Linear Design System

---

version: alpha

name: Linear-design-analysis

description: "A near-black product-focused marketing canvas built around #010102 (the deepest dark surface of any tool in this collection), light gray text (#f7f8f8), and the signature Linear lavender-blue (#5e6ad2) used as the single chromatic accent. The system reads as software-craft documentation: dense, technical, and quietly luxurious. Display type is set in the Linear custom sans (SF Pro Display fallback) at 500–700 with measured negative tracking. Cards live as charcoal panels (#0f1011) with hairline borders. The accent lavender appears on the brand mark, focus rings, and a few intentional CTAs — never decoratively. Page rhythm leans on product UI screenshots framed in dark panels rather than atmospheric color."

colors:

primary: "#5e6ad2"

on-primary: "#ffffff"

primary-hover: "#828fff"

primary-focus: "#5e69d1"

ink: "#f7f8f8"

ink-muted: "#d0d6e0"

ink-subtle: "#8a8f98"

ink-tertiary: "#62666d"

canvas: "#010102"

surface-1: "#0f1011"

surface-2: "#141516"

surface-3: "#18191a"

surface-4: "#191a1b"

hairline: "#23252a"

hairline-strong: "#34343a"

hairline-tertiary: "#3e3e44"

inverse-canvas: "#ffffff"

inverse-surface-1: "#f5f6f6"

inverse-surface-2: "#f6f7f7"

inverse-ink: "#000000"

brand-secure: "#7a7fad"

semantic-success: "#27a644"

semantic-overlay: "#000000"

typography:

display-xl:

fontFamily: Linear Display

fontSize: 80px

fontWeight: 600

lineHeight: 1.05

letterSpacing: -3.0px

display-lg:

fontFamily: Linear Display

fontSize: 56px

fontWeight: 600

lineHeight: 1.10

letterSpacing: -1.8px

display-md:

fontFamily: Linear Display

fontSize: 40px

fontWeight: 600

lineHeight: 1.15

letterSpacing: -1.0px

headline:

fontFamily: Linear Display

fontSize: 28px

fontWeight: 600

lineHeight: 1.20

letterSpacing: -0.6px

card-title:

fontFamily: Linear Display

fontSize: 22px

fontWeight: 500

lineHeight: 1.25

letterSpacing: -0.4px

subhead:

fontFamily: Linear Display

fontSize: 20px

fontWeight: 400

lineHeight: 1.40

letterSpacing: -0.2px

body-lg:

fontFamily: Linear Text

fontSize: 18px

fontWeight: 400

lineHeight: 1.50

letterSpacing: -0.1px

body:

fontFamily: Linear Text

fontSize: 16px

fontWeight: 400

lineHeight: 1.50

letterSpacing: -0.05px

body-sm:

fontFamily: Linear Text

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

letterSpacing: 0

caption:

fontFamily: Linear Text

fontSize: 12px

fontWeight: 400

lineHeight: 1.40

letterSpacing: 0

button:

fontFamily: Linear Text

fontSize: 14px

fontWeight: 500

lineHeight: 1.20

letterSpacing: 0

eyebrow:

fontFamily: Linear Text

fontSize: 13px

fontWeight: 500

lineHeight: 1.30

letterSpacing: 0.4px

mono:

fontFamily: Linear Mono

fontSize: 13px

fontWeight: 400

lineHeight: 1.50

letterSpacing: 0

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 24px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 8px 14px

button-primary-pressed:

backgroundColor: "{colors.primary-focus}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

button-primary-hover:

backgroundColor: "{colors.primary-hover}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 8px 14px

button-tertiary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 8px 14px

button-inverse:

backgroundColor: "{colors.inverse-canvas}"

textColor: "{colors.inverse-ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 8px 14px

pricing-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

pricing-card-featured:

backgroundColor: "{colors.surface-2}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

feature-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

product-screenshot-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.xl}"

padding: 24px

testimonial-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body-lg}"

rounded: "{rounded.lg}"

padding: 32px

customer-logo-tile:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-subtle}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 16px

text-input:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 8px 12px

text-input-focused:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 8px 12px

pricing-tab-default:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-subtle}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 6px 14px

pricing-tab-selected:

backgroundColor: "{colors.surface-2}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 6px 14px

cta-banner:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.headline}"

rounded: "{rounded.lg}"

padding: 48px

changelog-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.xs}"

padding: 24px 0

status-badge:

backgroundColor: "{colors.surface-2}"

textColor: "{colors.ink-muted}"

typography: "{typography.caption}"

rounded: "{rounded.pill}"

padding: 2px 8px

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.xs}"

height: 56px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-subtle}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 64px 32px

---

Linear's marketing canvas is the deepest dark surface in this collection — `{colors.canvas}` is #010102, essentially pure black with a faint blue tint. On top sits a four-step surface ladder (`{colors.surface-1}` through `{colors.surface-4}`) for cards, panels, and lifted tiles, with hairline borders running from `{colors.hairline}` (#23252a) up through `{colors.hairline-strong}` and `{colors.hairline-tertiary}`. Light gray text (`{colors.ink}` #f7f8f8) carries the body and headlines.

The single chromatic accent is **Linear lavender-blue** `{colors.primary}` (#5e6ad2) — used on the brand mark, focus rings, and the primary CTA button. A lighter hover state (`{colors.primary-hover}` #828fff) and a focus-tinted variant (`{colors.primary-focus}` #5e69d1) extend the same hue. Linear avoids saturated greens, oranges, reds, etc. on the marketing canvas — the only semantic color is `{colors.semantic-success}` (#27a644) for status pills and the rare success indicator.

Display type runs Linear's custom sans (with `SF Pro Display` fallback) at weight 500–700 with negative letter-spacing scaling from -3.0px at 80px down to 0 at body. The body family is Linear's text cut, and a Linear Mono is reserved for code snippets in product screenshots.

The page rhythm is **dense product screenshots** — Linear's marketing leads with high-fidelity captures of the product UI (issue list, project view, dashboard) framed in `{colors.surface-1}` panels with `{rounded.xl}` 16px corners. The chrome is intentionally minimal so the app screenshots can do the heavy lifting.

**Key Characteristics:**

> Source pages: linear.app (home), /intake, /pricing, /contact/sales, /build.

The marketing surface treats Display and Text as one continuous voice; the family change is silent.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 80px | 600 | 1.05 | -3.0px | Largest hero headline |

| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.8px | Section opener headlines |

| `{typography.display-md}` | 40px | 600 | 1.15 | -1.0px | Sub-section headlines |

| `{typography.headline}` | 28px | 600 | 1.20 | -0.6px | Pricing tier titles, CTA banner heading |

| `{typography.card-title}` | 22px | 500 | 1.25 | -0.4px | Feature card title |

| `{typography.subhead}` | 20px | 400 | 1.40 | -0.2px | Lead body, intro paragraphs |

| `{typography.body-lg}` | 18px | 400 | 1.50 | -0.1px | Hero subhead, lead paragraphs |

| `{typography.body}` | 16px | 400 | 1.50 | -0.05px | Default body |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Card body, footer columns |

| `{typography.caption}` | 12px | 400 | 1.40 | 0 | Captions, meta, status |

| `{typography.button}` | 14px | 500 | 1.20 | 0 | All button labels |

| `{typography.eyebrow}` | 13px | 500 | 1.30 | 0.4px | Section eyebrow (slight positive tracking) |

| `{typography.mono}` | 13px | 400 | 1.50 | 0 | Linear Mono for code in product screenshots |

Linear's custom typeface isn't publicly distributed; the documented fallback `SF Pro Display, -apple-system, system-ui` is the recommended substitute on macOS. For cross-platform implementation, **Inter** at weight 500 / 600 / 700 is the closest free substitute. **Geist Sans** is also viable. For mono, **JetBrains Mono** or **Geist Mono** at weight 400 closely approximates Linear Mono.

The dark canvas IS the whitespace. Sections separate by lift onto surface-1 panels, not by gaps in white. Within a panel, generous `{spacing.lg}` 24px gaps between content blocks; `{spacing.section}` 96px between sections.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow, no border | Default for body type, hero text, footer |

| 1 (charcoal lift) | `{colors.surface-1}` background on canvas, 1px `{colors.hairline}` | Default cards, product panels |

| 2 (surface-2 lift) | `{colors.surface-2}` background, 1px `{colors.hairline-strong}` | Featured pricing card, hovered cards |

| 3 (surface-3 lift) | `{colors.surface-3}` background | Sub-nav, dropdown menus |

| 4 (focus ring) | 2px `{colors.primary-focus}` outline at 50% opacity | Focused input, focused button |

Linear's depth is carried by surface ladder + hairline borders. The brand resists drop shadows on dark almost entirely.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Small chips, status badges |

| `{rounded.sm}` | 6px | Inline tags |

| `{rounded.md}` | 8px | All buttons, form inputs |

| `{rounded.lg}` | 12px | Pricing cards, feature cards, testimonial cards |

| `{rounded.xl}` | 16px | Product screenshot panels |

| `{rounded.xxl}` | 24px | Oversized CTA banners (rare) |

| `{rounded.pill}` | 9999px | Pricing tab toggles, status pills |

| `{rounded.full}` | 9999px | Avatar circles |

**`button-primary`** — Lavender CTA. The default primary CTA across all pages.

**`button-secondary`** — Charcoal button. Used for secondary CTAs ("Sign in", "Read changelog").

**`button-tertiary`** — Plain text button.

**`button-inverse`** — White-on-dark inverse CTA.

**`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`.

**`pricing-card`** — Each tier on `/pricing`.

**`pricing-card-featured`** — Recommended tier — surface lift to surface-2.

**`feature-card`** — Generic feature highlight tile.

**`product-screenshot-card`** — The dominant card type — frames a high-fidelity Linear app UI screenshot.

**`testimonial-card`** — Customer quote with avatar + name + role.

**`customer-logo-tile`** — Small tile in the customer marquee.

**`cta-banner`** — Closing CTA panel near page bottom.

**`text-input`** + **`text-input-focused`** — Form fields on `/contact/sales` and signup overlays.

**`changelog-row`** — Each row in `/build` (changelog page) listing version, date, and changes.

**`status-badge`** — Small status pill.

**`top-nav`** — Sticky dark bar with the Linear wordmark left, primary nav links centered, and a `button-secondary` ("Sign in") + `button-primary` ("Get started") pair right.

**`footer`** — Dense link grid on `{colors.canvas}` with the Linear wordmark left.

| Name | Width | Key Changes |

|---|---|---|

| Desktop-XL | 1440px | Default desktop layout |

| Desktop | 1280px | Card grid 3-up maintained |

| Tablet | 1024px | Card grid 3-up → 2-up |

| Mobile-Lg | 768px | Pricing comparison becomes accordion; nav hamburger |

| Mobile | 480px | Single-column; display-xl scales 80px → ~36px |

1. Focus on ONE component at a time and reference it by its `components:` token name.

2. When introducing a section, decide first which surface lift it lives on.

3. Default body to `{typography.body}` at weight 400.

4. Run `npx @google/design.md lint DESIGN.md` after edits.

5. Add new variants as separate component entries.

6. Treat lavender as scarce: brand mark, primary CTA, focus, link emphasis.

7. Lead every section with a product UI screenshot.