SaaS Landing Page Design: 9 Clean Trust Sections

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.

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.

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

• 01 Soft-grid hero
• 02 Underline nav
• 03 Icon card grid
• 04 Checkmark feature list
• 05 Simple pricing
• 06 Logo-trust testimonial
• 07 Solid CTA band
• 08 Minimal 4-column footer
• 09 Clean buttons & inputs

The whole kit runs on eight colors. Never using the brand blue for small body text is what keeps this palette readable.

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

A faint dot grid sits over an off-white background while the white card in front drifts up and down at an easy pace. 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

A single blue underline glides to the active tab as it moves between menu items. 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

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. 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

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. 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

All three plans share the same white card, but the recommended one gets a thin blue border and a slightly deeper shadow. 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

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%. 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

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. 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

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. 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

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. 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.

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. 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 doesn't this bright style 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.

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.