GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

SaaS Landing Page Design: 9 Clean Trust Sections

· Godrich · 9 items · 16 min read

Design trendsPage templateCSS onlyLanding pagePricingCTA

Good SaaS landing page design leans on two neutral backgrounds — white and a barely-there off-white — plus exactly one brand blue, gray shadows, and corners

Unlike the pastel or candy-gradient look, the brightness here comes from empty space and restraint, not from more colors.

Below is a full one-page landing built from that recipe, the kind of screen people save from Stripe or Linear without knowing what to call it. Scroll from the nav to the footer and count how many colors you actually see.

Open the full page

The nine pieces that make up that page are pulled apart and laid out in the grid below, in the order a visitor's eye actually moves — get noticed, browse features, check pricing, feel trust, act. Blue is the only accent color in the whole kit; everything else is white, off-white, or gray.

Soft-grid hero01 hero-trust Underline nav02 nav-trust Icon card grid03 card-grid-trust Checkmark feature list04 feature-list-trust Simple pricing05 pricing-trust Logo-trust testimonial06 testimonial-trust Solid CTA band07 cta-band-trust Minimal 4-column footer08 footer-trust Clean buttons & inputs09 buttons-inputs-trust

Auto-plays · click a tile to jump to its section · all nine in one zip

The whole kit runs on eight colors. Never using the brand blue for small body text is the one rule most saas landing page design best practices agree on, and it is what keeps this palette readable. Raising the color count toward fruit-bright gives Citrus Web Design Kit in the same design pillar, and cutting the surfaces out of paper gives Paper Cutout Design.

Role Color Used for
Off-white #f7f9fc Page background
Blue tint #eaf1ff Card-grid stage, icon backgrounds
Gray tint #f1f5f9 Nav and logo-strip stage
Mint tint #eaf6f1 Checkmark icons, input stage
Brand blue #2f6df6 Buttons, icons, borders, accents
Blue deep #1d4ed8 CTA band background, pressed buttons
Slate #475569 Secondary text
Ink #17141a Headings and body text

01Soft-grid hero

What you see in this b2b saas landing page design

A faint dot grid sits over an off-white background while the white card in front drifts up and down at an easy pace.

Soft-grid hero
Open in a new tab

01 · Soft-grid hero — Measured area 11.469% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

점 격자 배경중립 그림자radius 16

Where to look in the code

The only accent is a small blue badge — every shadow underneath stays a soft, neutral gray.

<section class="dotgrid relative overflow-hidden rounded-card py-20">
  <div class="relative mx-auto flex max-w-xl flex-col items-start gap-4
              rounded-card bg-white p-10 shadow-soft">
    <p class="text-xs font-bold uppercase tracking-widest text-brand">Trusted by teams</p>
    <h1 class="text-4xl font-bold leading-tight">Ship faster, safer</h1>
    <button class="rounded-pill bg-brand px-6 py-3 text-sm font-bold text-white shadow-brand">Start free</button>
  </div>
</section>

02Underline nav

What happens on screen

A single blue underline glides to the active tab as it moves between menu items.

Underline nav
Open in a new tab

02 · Underline nav — Measured area 8.271% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateX 이동slideUnderlineradius pill

How to read the code

In the actual demo a pale blue highlight block travels on the same beat as the line — a 3px underline alone barely reads as motion.

<nav class="mx-auto flex max-w-5xl items-center gap-6 rounded-pill bg-white px-5 py-3 shadow-soft-sm">
  <span class="relative whitespace-nowrap text-xs font-semibold pb-1
               after:absolute after:-bottom-[13px] after:left-0
               after:h-[3px] after:w-full after:rounded-control after:bg-brand">Home</span>
  <span class="whitespace-nowrap text-xs font-semibold text-slate">Features</span>
</nav>

03Icon card grid

What moves

Four white cards sit in a grid with only a faint gray shadow, and the blue circle holding each icon grows slightly and deepens in tone, one card after another on a staggered delay.

Icon card grid
Open in a new tab

03 · Icon card grid — Measured area 7.384% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

단일 브랜드 컬러scale 호버2열→1열

What to change

Every card shares the exact same blue.

<div class="flex flex-col items-start gap-3 rounded-card bg-white p-5 shadow-soft-sm">
  <span class="grid h-9 w-9 place-items-center rounded-full bg-bluetint text-brand">
    <svg><!-- ph:shield-check-duotone --></svg>
  </span>
  <p class="text-sm font-bold">Security</p>
</div>

04Checkmark feature list

What you see

Each row carries a blue checkmark in a pale mint circle, and the rows slide down into place from top to bottom, then fade back out and repeat.

Checkmark feature list
Open in a new tab

04 · Checkmark feature list — Measured area 29.301% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

두 막대 체크순차 슬라이드인radius pill

Where to look in the code

The check is a real Phosphor Duotone icon, not a hand-drawn shape.

<li class="flex items-center gap-3 rounded-pill bg-white px-5 py-3 shadow-soft-sm">
  <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-mint text-brand">
    <svg><!-- ph:check-duotone --></svg>
  </span>
  <span class="text-sm font-semibold">Unlimited team seats</span>
</li>

05Simple pricing

What happens on screen

All three plans share the same white card, but the recommended one gets a thin blue border and a slightly deeper shadow.

Simple pricing
Open in a new tab

05 · Simple pricing — Measured area 2.276% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

테두리 위계그림자 깊이차radius card

How to read the code

Hierarchy comes from border weight and shadow depth, never from a different background color.

<div class="relative flex-1 max-w-[240px] rounded-card border-2 border-brand
            bg-white p-6 text-center shadow-brand">
  <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-pill
               bg-brand px-3 py-1 text-[11px] font-bold text-white">Popular</span>
  <p class="text-sm font-bold">Pro</p>
</div>

06Logo-trust testimonial

What moves

Above the quote, six gray logo chips scroll sideways in an endless loop by stitching an original set to a cloned copy and sliding the whole track by -50%.

Logo-trust testimonial
Open in a new tab

06 · Logo-trust testimonial — Measured area 5.942% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

무한 로고 마퀴grayscale 호버 해제margin-right 간격

What to change

Only the hovered chip regains full blue color.

<div class="track flex w-max" style="animation: scrollLogos 6s linear infinite">
  <span class="mr-3 shrink-0 rounded-pill bg-white px-5 py-2 text-xs
               font-bold text-slate shadow-soft-sm">Nimbus</span>
  <!-- repeat the same six chips a second time right after -->
</div>

07Solid CTA band

What you see

The band is a single flat brand-blue fill with no gradient, and only the white button inside lifts and deepens its shadow in a loop.

Solid CTA band
Open in a new tab

07 · Solid CTA band — Measured area 1.019% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

단색 배경버튼 lift 호버radius pill

Where to look in the code

Restraint here means one color, not a blend of several.

<div class="rounded-card bg-brand-deep px-10 py-14 shadow-brand-deep text-center">
  <h2 class="text-3xl font-bold text-white">Start free today</h2>
  <button class="mt-4 rounded-pill bg-white px-8 py-3 text-sm font-bold text-brand-deep">Request a demo</button>
</div>

08Minimal 4-column footer

What happens on screen

A single pale-gray rule sits above the column links, and each social icon circle fills blue and grows a little on hover — cycled automatically in the demo.

Minimal 4-column footer
Open in a new tab

08 · Minimal 4-column footer — Measured area 4.968% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

단일 구분선아이콘 배경 채움4열→1열

How to read the code

The only ornament on the whole footer is that one line.

<div class="grid h-9 w-9 place-items-center rounded-full bg-graytint text-slate
            transition hover:bg-brand hover:text-white">
  <svg><!-- ph:twitter-logo-duotone --></svg>
</div>

09Clean buttons & inputs

What moves

The button darkens slightly and lifts by a pixel on hover, while the input's thin gray border softens into a two-layer blue focus ring.

Clean buttons & inputs
Open in a new tab

09 · Clean buttons & inputs — Measured area 10.641% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

1px lift 호버focus 2중 링radius 12

What to change

This one item bundles the whole kit's tactile feel into a single pair of controls.

<input class="w-full rounded-control border border-border bg-white px-4 py-3
              text-sm outline-none focus:border-brand
              focus:ring-4 focus:ring-brand/20" placeholder="[email protected]">
<button class="rounded-control bg-brand px-6 py-3 text-sm font-bold text-white
               shadow-brand hover:bg-brand-deep hover:-translate-y-px">Continue</button>

Custom tailwind.config

Two backgrounds, one brand blue, and four shadows — two neutral, two brand-tinted — live in this one file so the one-pager and all nine pieces stay equally restrained. The gray shadow-soft and shadow-soft-sm sit under plain cards, while the blue-tinted shadow-brand and shadow-brand-deep mark only the buttons, the pro plan, and the CTA band.

theme: {
  extend: {
    colors: {
      offwhite: "#f7f9fc", bluetint: "#eaf1ff", graytint: "#f1f5f9", mint: "#eaf6f1",
      ink: "#17141a", slate: "#475569", brand: "#2f6df6", "brand-deep": "#1d4ed8",
      border: "#e2e8f0",
    },
    borderRadius: { card: "16px", control: "12px", pill: "999px" },
    boxShadow: {
      soft: "0 14px 28px rgba(23,20,26,.08)",
      "soft-sm": "0 8px 16px rgba(23,20,26,.07)",
      brand: "0 10px 22px rgba(47,109,246,.28)",
      "brand-deep": "0 16px 30px rgba(29,78,216,.32)",
    },
  },
},

Vibe-Coding Prompt

Once the config is in your project, this is the entire instruction you hand to Claude Code or Cursor. It runs ten rules instead of five because, unlike the candy or citrus kits, it has to spell out what not to use. The unabridged version sits inside the zip as prompt.md.

Use only two backgrounds: white and offwhite (#f7f9fc). The only brand color is
brand (#2f6df6), and every card stays white. Shadows stay a soft gray
(shadow-soft) — never a colored shadow. Text is always ink or slate, never
brand. Hierarchy comes from border weight and shadow depth, not card color.

Here's the full 1280px screenshot of that prompt applied to page/index.html.

Result

Where it breaks (the trap)

The first real snag was the nav indicator's motion. A 3px underline alone barely read as movement once rendered — the changed-pixel area was too small to notice on an 480×300 stage. Adding a pale blue highlight block the width of a tab, moving on the same beat as the underline, is what actually made the motion visible.

The second was viewport width. With three 108px tabs plus side padding, the nav's real layout box came out to 332px — 12px over the 320px phone check even though nothing looked wrong at 480px. Shrinking each tab to 92px and the whole bar to 284px is what cleared the 320×200 overflow check. The third was one word: "Enterprise" wrapped mid-word inside a 92px pricing card until it was shortened to "Team" so it fit on a single line. How far this restrained blue holds up inside a mail body was checked separately in Marketing Email Design. All three fixes are in the zip behind the password 8h4q5uur — open it and you can confirm every one directly.

All nine demos check for the MDN prefers-reduced-motion media feature and, when it's set, freeze every element at its resting state — cards stay put, list rows stay visible, focus rings stay off. Visitors who've asked for less motion lose the drift and the scroll, not the information in the card, button, or input itself.

Accessibility

This style has an easier time with contrast than the pastel or candy kits simply because the background is almost always white or off-white. Measured directly: ink text (#17141a) hits 18.24:1 on white, and the slate (#475569) used for secondary text hits 7.58:1 — both comfortably clear the WCAG 2.1 minimum contrast ratio of 4.5:1 for body text. The brand blue (#2f6df6), though, only reaches 4.53:1 as text on white — right at the line — so this kit's code never uses it for body copy, only for buttons, icons, and borders where it covers enough area or weight to stay legible. Where blue needs to be a background (the CTA band), the code switches to the deeper blue-deep (#1d4ed8), which clears white text at 6.70:1. Shadows follow the MDN box-shadow syntax at low opacity (.07–.32) so they never double as a border, and keyboard focus is drawn separately with a :focus-visible outline and a two-layer blue ring.

For other homepage trends beyond trustworthy SaaS, browse the design trends category, and the about page explains what this whole blog covers.

FAQ

Why don't these saas landing page design examples look like pastel candy?

Because the brightness comes from a different place. Pastel-candy kits get their brightness from many colors — pink, lemon, mint, lavender — one per card. This kit fixes the background at two neutral tones and adds exactly one brand color, so it can be bright while keeping the color count to a minimum. More colors read as playful; fewer read as serious. Building trust out of other people's voices rather than color is what Testimonial Section Design handles.

Can I swap in a different brand color instead of blue?

Yes, but if that color is going to sit as text on a white background, you have to check its 4.5:1 contrast yourself. This kit's blue (#2f6df6) sits right at 4.53:1, which is why it's never used for body copy — a green or purple at the same lightness could land under the line, so don't carry the ratio over without recalculating it.

Does adding a light color to each card still count as this style?

No — once a card's own surface takes on a color, it has moved into the candy or fruit family of bright design. In this kit, cards stay white; light tints only ever sit on the stage behind them or inside small accents like an icon circle.

Enter the archive password

The password is inside this article. You will find it as you read.