Linear Style Landing Page: 9 Dark SaaS Sections

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.

The nine pieces below are cut from that same page. 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.

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

• 01 Product mockup + glow hero
• 02 Blurred sticky nav
• 03 Border-highlight cards
• 04 Monospace label list
• 05 Glowing highlighted plan
• 06 Logo wall + quote
• 07 Gradient-border band
• 08 4-column dark footer
• 09 Ghost/primary buttons, dark inputs

01Hero

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

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

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

Each row carries a monospace number out front, and the rows themselves lift and glow one after another rather than highlighting all at once. 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

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

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. 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 gradient line wraps the CTA band's border and rotates slowly, so the edge reads like a glowing badge rather than a plain rule. 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

Four columns of links fade up left to right, one after another, until the dark footer is filled in. 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

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

Every part above, plus the one-page mock, reads from this single config. 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

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.

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

Where it breaks (the trap)

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

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

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. 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. 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 dark SaaS and landing-page sections 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 style 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.