Linear-Style Dark SaaS

---
name: linear-dark-saas
description: Apply the Linear-Style Dark SaaS visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Linear-Style Dark SaaS, mentions linear style, dark product site, dev-tool dark, or describes near-black background, 1px low-opacity white borders, subtle radial glows — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Linear-Style Dark SaaS Design System

The contemporary developer-tool aesthetic defined by Linear and Vercel: near-black backgrounds, tight Inter typography, 1px low-opacity borders, restrained indigo accents, and subtle radial glows suggesting light sources behind the UI.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Linear-Style Dark SaaS.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (linear style, dark product site, dev-tool dark, vercel style), or describes its traits: near-black background; 1px low-opacity white borders; subtle radial glows; tight negative letter-spacing; restrained indigo accent.

## Design tokens

### Color palette

- Page background, near-black with a hint of blue: `#08090a` (--color-bg)
- Card and panel background: `#141516` (--color-surface)
- Raised surface, hover states: `#1d1e20` (--color-surface-2)
- Primary text: `#f7f8f8` (--color-text)
- Secondary text, the workhorse gray: `#8a8f98` (--color-text-muted)
- Indigo accent for links, focus, and glows: `#5e6ad2` (--color-accent)
- 1px borders; reads as white at ~8% opacity: `#23252a` (--color-border)

### Typography

- Display / headings: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: JetBrains Mono (fallback: SF Mono, Menlo, monospace)
- Type scale: 1.2 ratio, base 16px — computed steps: 16px / 19px / 23px / 28px / 33px / 40px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.1, letter-spacing -0.022em
- Body: line-height 1.6, letter-spacing -0.011em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 — Marketing sections are spacious (96–128px apart); product UI within screenshots is dense. Text columns stay narrow (~640px).
- Border radius: sm 6px, md 10px, lg 16px, pill 999px — Medium rounding; nothing sharp, nothing bubbly.
- Border treatment: 1px solid #23252a — Borders do the separating work shadows would do in light themes.

### Shadows

- glow: `0 0 120px 40px rgba(94, 106, 210, 0.12)` — Ambient glow behind heroes and screenshots
- card: `0 1px 2px rgba(0, 0, 0, 0.4)` — Barely-there card lift

### Layout

- Max content width: 1200px
- Centered narrow text columns with full-width visual bands
- Product screenshots tilted or clipped at section edges
- Bento-style feature grids in lower sections

### Effects

- Radial accent glows behind key elements
- 1px gradient borders (white 12% to transparent) on featured cards
- Slow shimmer on hero gradient text (accent to white)

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 120ms / 200ms / 350ms
- Fade-up on scroll (8–16px translate, staggered 40ms)
- Hover brightens borders from 8% to 16% white
- No bouncy easings; everything is calm and precise

## CSS variables (drop-in)

```css
:root {
  --color-bg: #08090a;
  --color-surface: #141516;
  --color-surface-2: #1d1e20;
  --color-text: #f7f8f8;
  --color-text-muted: #8a8f98;
  --color-accent: #5e6ad2;
  --color-border: #23252a;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-glow: 0 0 120px 40px rgba(94, 106, 210, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --border-default: 1px solid #23252a;
  --font-display: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: -0.022em;
  --tracking-body: -0.011em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 56px, blurred bg (rgba(8,9,10,0.8), blur 12px), 1px bottom border, 13–14px medium links in muted gray that brighten on hover
- **Hero:** Centered 56–72px semibold headline with -0.02em tracking, muted subhead, primary + ghost CTA pair, glowing product screenshot below
- **Card:** Surface bg, 1px border, 10px radius, 24px padding; hover raises to surface-2 and brightens border
- **Button (primary):** Accent or white fill, 8px radius, 13–14px medium label, subtle inner top highlight
- **Button (secondary):** Transparent with 1px border, muted text brightening to white on hover
- **Form fields:** Surface bg, 1px border, 8px radius; focus swaps border to accent with 2px accent ring at 30% opacity

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Faint radial gradient glows (accent color at 10–15% opacity, 600px+ blur radius) bleeding from behind product screenshots and section headings, over a #08090a background. Spend boldness here; keep everything else quiet.

## Do

- Keep the palette to grays plus ONE accent; let glows carry the color
- Use tight negative tracking on all headings
- Separate surfaces with 1px borders, not shadows
- Keep marketing copy short and set in narrow measure

## Don't

- No pure #000 background (use #08090a) and no pure-white body text at full opacity
- No colorful multi-hue gradients — this is a monochrome style with one accent
- No heavy drop shadows; depth comes from borders and glows
- Don't crowd sections; sparse density is part of the signal

## Accessibility notes

- Muted gray #8a8f98 on #08090a passes AA for normal text (≈5.1:1) but avoid going darker for body copy
- Accent #5e6ad2 on the dark bg is below AA for small text — reserve it for large text, icons, and focus rings
- Glow effects are decorative; ensure they carry no information

## Reference sites

- Linear: https://linear.app
- Vercel: https://vercel.com
- Resend: https://resend.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip linear-dark-saas.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/linear-dark-saas.json

Settings → Capabilities → Skills → Upload skill → linear-dark-saas.zip