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

Linear Style Landing Page: 9 Dark SaaS Sections

· Godrich · 9 items · 16 min read

Design trendsPage templateCSS onlyLanding pageHero sectionCTA

A linear style landing page — all over Dribbble and Pinterest right now — leans on Linear.app's ink-black background and one blue glow instead of

Scroll the assembled one-page mock below before copying anything on its own. The thing to watch for is whether the brightness ever wavers between the top nav and the footer.

Open the full page

The nine pieces below are cut from that same page, so each one carries the linear style ui design rules intact. They run in the order a visitor actually meets them — first glance, browsing the grid, checking the price, deciding whether to trust it, and then acting on it. Split the same dark mood into tiles and it becomes the bento grid landing sections; let the type itself move to carry the mood and the kinetic typography landing picks it up.

Product mockup + glow hero01 hero-linear Blurred sticky nav02 nav-linear Border-highlight cards03 card-grid-linear Monospace label list04 feature-list-linear Glowing highlighted plan05 pricing-linear Logo wall + quote06 testimonial-linear Gradient-border band07 cta-band-linear 4-column dark footer08 footer-linear Ghost/primary buttons, dark inputs09 buttons-inputs-linear

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

01Hero

A mockup on the ink background

A browser-chrome mockup window floats on the ink background, and behind it a single soft blue glow bleeds outward with nothing else competing for attention.

Product mockup + glow hero
Open in a new tab

01 · Product mockup + glow hero — Measured area 24.265% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

radial-gradient glowfloat loopradius 16

Why the eye goes inward

The window's title and its CTA button rise and settle together on a slow loop, which pulls the eye toward the mock instead of the page around it — no JavaScript runs any of it; the whole float is a CSS keyframe loop that starts the instant the page paints.

<section class="relative overflow-hidden rounded-card border border-line bg-ink p-2 shadow-raised">
  <span class="glow pointer-events-none absolute left-1/2 top-0 h-96 w-96
               -translate-x-1/2"></span>
  <div class="flex gap-1.5 px-3 py-2">
    <span class="h-2.5 w-2.5 rounded-full bg-cream/20"></span>
    <span class="h-2.5 w-2.5 rounded-full bg-cream/20"></span>
  </div>
  <div class="relative flex flex-col gap-3 px-6 pb-10 pt-8">
    <p class="text-xs font-bold uppercase tracking-wide text-accent">Console</p>
    <h2 class="text-2xl font-bold text-cream">Ship from one screen</h2>
    <button class="w-fit rounded-pill bg-accent px-5 py-2 text-sm font-bold text-cream">
      Start free
    </button>
  </div>
</section>

02Navigation

A pill that glides

Inside a nav bar blurred with backdrop-filter, a small pill glides between menu items to mark whichever one is active, while the brand mark and the CTA button stay fixed at either end of the capsule.

Blurred sticky nav
Open in a new tab

02 · Blurred sticky nav — Measured area 2.219% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

backdrop-filter: blur(10px)radius 999flex 0 0 auto

Why it never drifts

Because each item is a fixed 64px flex child rather than one sized by its own text, the pill never drifts off target as it slides.

<nav class="flex items-center gap-4 rounded-pill bg-ink/90 border border-line
            backdrop-blur px-3 py-2 shadow-raised">
  <span class="pl-3 font-display font-extrabold text-sm text-cream">Vantage</span>
  <div class="relative flex flex-1 rounded-pill bg-cream/5 p-1">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-accent"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2 text-cream">Home</span>
    <span class="relative z-10 flex-1 text-center text-xs py-2 text-cream/70">Features</span>
  </div>
  <button class="rounded-pill bg-accent px-4 py-2 text-xs font-bold text-cream">Sign in</button>
</nav>

03Card Grid

Borders that hand off in turn

Across a dark card grid, each tile's border lights up blue in turn, fades, and hands off to the next — each card's animation-delay is offset by a quarter of the loop so the sequence reads left to right instead of flashing all at once.

Border-highlight cards
Open in a new tab

03 · Border-highlight cards — Measured area 12.578% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

border-color 전환순차 delayradius 16

Where a flat grid falls short

Reach for it on a feature-showcase grid or a side-by-side comparison, anywhere a flat, static grid would let every tile compete equally for the same glance.

<div class="grid grid-cols-2 gap-gutter">
  <div class="rounded-card border border-line bg-cream/[.03] p-6
              transition-colors hover:border-accent">
    <span class="mb-3 block h-4 w-4 rounded-sm bg-accent/40"></span>
    <p class="text-sm font-semibold text-cream">Auto deploys</p>
  </div>
  <div class="rounded-card border border-line bg-cream/[.03] p-6
              transition-colors hover:border-accent">
    <span class="mb-3 block h-4 w-4 rounded-sm bg-accent/40"></span>
    <p class="text-sm font-semibold text-cream">Issue tracking</p>
  </div>
</div>

04Feature List

Monospace numbers out front

Each row carries a monospace number out front, and the rows themselves lift and glow one after another rather than highlighting all at once.

Monospace label list
Open in a new tab

04 · Monospace label list — Measured area 27.006% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

ui-monospace 라벨stagger 등장translateY

Why it reads like a code editor

The numbering reads like line numbers in a code editor, which is exactly the association that makes this list feel like it belongs on a developer-tool page rather than a generic marketing site.

<ul class="flex flex-col gap-2 rounded-card border border-line bg-cream/[.03] p-4">
  <li class="flex items-center gap-4 rounded-control px-4 py-3 hover:bg-accent/10">
    <span class="font-mono text-xs font-bold text-accent">01</span>
    <span class="text-sm font-semibold text-cream">Real-time collaborative editing</span>
  </li>
  <li class="flex items-center gap-4 rounded-control px-4 py-3 hover:bg-accent/10">
    <span class="font-mono text-xs font-bold text-accent">02</span>
    <span class="text-sm font-semibold text-cream">Keyboard-only command bar</span>
  </li>
</ul>

05Pricing

One card breathes

Only the recommended plan's card wears a glowing blue border, and a soft blue halo breathes around it — expanding and fading on a slow pulse rather than sitting still.

Glowing highlighted plan
Open in a new tab

05 · Glowing highlighted plan — Measured area 6.678% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

box-shadow 펄스border 2pxradius 16

No comparison table needed

It flags the plan you're steering people toward without needing a comparison table underneath it; a badge and one breathing glow do the whole job.

<div class="relative flex-[1.1] rounded-card border-2 border-accent
            bg-cream/[.03] p-6 pt-8 shadow-glow">
  <span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
               text-xs font-bold text-cream">Recommended</span>
  <p class="font-bold text-cream">Pro</p>
  <p class="mt-1 text-sm text-cream/60">$19 / month</p>
</div>

06Testimonials

Dimmed logos under a quote

Below a row of dimmed partner logos sits a single quote card, and the logos themselves brighten and dim in turn rather than sitting at full strength the whole time.

Logo wall + quote
Open in a new tab

06 · Logo wall + quote — Measured area 3.367% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

@keyframes logoShineradius 16grayscale 필터

Why 16% opacity

Full-color logos would read as an ad strip, so they're dropped to 16% opacity, letting the animation, not the color, carry the trust signal.

<div class="rounded-card border border-line bg-cream/[.03] p-6">
  <div class="mb-5 flex justify-between gap-3 opacity-60">
    <span class="h-4 flex-1 rounded-sm bg-cream/20"></span>
    <span class="h-4 flex-1 rounded-sm bg-cream/20"></span>
  </div>
  <blockquote class="border-t border-line pt-4">
    <p class="text-sm font-semibold text-cream">
      &ldquo;We moved the whole team over in a day, no onboarding doc needed.&rdquo;
    </p>
  </blockquote>
</div>

07CTA Band

A rotating gradient edge

A gradient line wraps the CTA band's border and rotates slowly, so the edge reads like a glowing badge rather than a plain rule.

Gradient-border band
Open in a new tab

07 · Gradient-border band — Measured area 2.754% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

conic-gradient 회전mask borderradius 16

The 2px sliver trick

The trick underneath is a conic-gradient layer sized larger than the box and spun with transform: rotate(), with an opaque inner panel covering everything but a 2px sliver at the edge.

<div class="relative overflow-hidden rounded-card border border-accent/40
            bg-cream/[.03] px-10 py-12 text-center shadow-glow">
  <h3 class="mx-auto max-w-md text-3xl font-extrabold text-cream">
    Move your team over today
  </h3>
  <button class="mt-6 rounded-pill bg-accent px-6 py-3 text-sm font-bold text-cream">
    Start free
  </button>
</div>

08Footer

Columns fading up in order

Four columns of links fade up left to right, one after another, until the dark footer is filled in.

4-column dark footer
Open in a new tab

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

@keyframes colRise4열→2열구분선 없음

Gaps instead of dividers

There's no divider line between the columns anywhere — the gap between them is the only thing marking where one group ends and the next begins.

<footer class="grid grid-cols-4 gap-gutter border-t border-line py-10">
  <div>
    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-accent">Product</p>
    <p class="text-sm text-cream/70">Features</p>
  </div>
  <div>
    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-accent">Company</p>
    <p class="text-sm text-cream/70">About</p>
  </div>
</footer>

09Buttons & Inputs

What moves in a dark mode landing page ui

The primary button and the email field each breathe a soft blue glow on their own loop, while the ghost button sits still with no animation at all.

Ghost/primary buttons, dark inputs
Open in a new tab

09 · Ghost/primary buttons, dark inputs — Measured area 4.033% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

box-shadow glowfocus ring 2pxradius 12

One radius across the page

All three share the same corner radius as the cards elsewhere on the page, so the form reads as part of one system rather than a widget dropped in from somewhere else.

<form class="mx-auto flex max-w-md flex-col gap-3 rounded-card border
            border-line bg-cream/[.03] p-6 sm:flex-row">
  <label class="relative flex-1 rounded-control border border-line bg-cream/5">
    <input class="w-full rounded-control bg-transparent px-4 py-3 text-sm
                  text-cream outline-none" type="email" placeholder="Email address">
  </label>
  <button class="rounded-control bg-accent px-5 py-3 text-sm font-bold text-cream">
    Sign up
  </button>
</form>

Custom tailwind.config

One config for every part

Every part above, plus the one-page mock, reads from this single config.

Change a value, shift the tone

Change a background, accent, radius, or shadow value here and the whole page shifts tone at once instead of section by section.

theme: {
  extend: {
    colors: {
      ink: "#17141a",
      cream: "#fff7e6",
      accent: "#2f6df6",
      line: "rgba(255,247,230,.08)",
    },
    fontFamily: {
      display: ["'Inter'", "system-ui", "sans-serif"],
      body: ["'Inter'", "system-ui", "sans-serif"],
    },
    borderRadius: { control: "12px", card: "16px", pill: "999px" },
    boxShadow: {
      raised: "0 14px 24px rgba(23,20,26,.32)",
      glow: "0 0 40px rgba(47,109,246,.35)",
    },
    spacing: { gutter: "16px" },
  },
},

Vibe-coding prompt

A short instruction is enough

Paste the config above into a project first; then a short instruction to Claude Code or Cursor is enough to keep the style consistent. The full prompt text ships in the zip's prompt.md.

Background is ink (#17141a) only — nothing else. Cards aren't pure white either;
they're ink with a faint cream overlay (3-5%) laid on top.
Reserve accent (#2f6df6) for the spots that need it: buttons, the recommended
badge, focus rings. Never add a second accent color.
Radius comes from only three values: rounded-card, rounded-pill, rounded-control.

What it produced

Running that instruction against page/index.html produced the result below, captured as a full-page screenshot at a 1280px viewport.

Result

Where it breaks (the trap)

Why theme() falls back to white

The most common way this style breaks is setting the background with a theme() function call. The Tailwind Play CDN compiles utility classes like bg-ink correctly, but a raw background: theme('colors.ink') written inside a <style> tag gets ignored and silently falls back to a plain white background. This project hit exactly that on the first pass — the <body> background was set through theme() inside a <style> block, the whole one-page mock rendered on white, and the pricing card's text-cream/60 text nearly vanished against it in the screenshot before anyone caught it. Switching to a compiled utility class, <body class="bg-ink">, is what actually applied the ink background. A dark surface swallowing bright text repeats as an unsupported-dark-mode failure in the transactional email templates, where the palette flips the other way. The second trap is radius. Any card that drifts to an arbitrary px value outside rounded-card, rounded-pill, and rounded-control breaks the sense that the whole page is one system rather than several sites stitched together. The zip bundling all nine parts and the one-page source is locked, and the password is wdu6yd23, typed exactly as shown — unlocked with the button just below.

Narrow screens under 320px

A third trap shows up under 320px if you skip clamp() altogether. Section 01's hero mock keeps its width and padding on clamp() for exactly that reason — swap any of those calls back to a fixed px value and the card grows taller than the viewport, forcing a scrollbar.

Accessibility

What reduced motion settles to

All nine demos are wrapped in the media query defined by MDN's prefers-reduced-motion documentation, and a visitor with reduced motion turned on sees the finished, settled state of each one instead of the rotating, glowing, or sweeping loop.

Color is never the only signal

Anything that signals state through color alone — the active pill in 02, the dimmed logos in 06 — is marked aria-hidden, and the real meaning behind it (which menu item, which partner name) sits nearby as plain text either way.

Blur fallback and further reading

Section 02 also follows MDN's backdrop-filter documentation by keeping the nav's own translucent background under the blur, so text contrast holds up even on a browser that skips the blur entirely.

More saas landing page examples like these sit in the design category hub, and what this project sells — and what it doesn't — is on the about page.

FAQ

Can I use the Linear logo or brand name in these sections?

No. Nothing here copies Linear.app's logo, trademark, or actual screens — only the general design language carries over: a dark background, a blue accent, and monospace labels. Every brand name in the demo, including the nav mark, is the fictional "Vantage," not Linear's own name.

Does this dark saas landing page work as a light-mode version too?

Yes. Swapping the roles that ink and cream play is enough, but the part that has to survive that swap either way is a single accent color doing all the pointing. Add a second accent and a reader loses the one signal telling them which element actually matters.

Can I use this without Tailwind, in plain CSS?

Yes — link the tokens.css file included in the zip. It carries the same values as tailwind.config.js, just written as CSS custom properties (--color-ink, --color-accent, and so on), so referencing var(--color-accent) directly keeps the same tone without any Tailwind classes at all. For a promo block carrying discount copy and a deadline, the promotion landing templates hold the assembly drawing.

Enter the archive password

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