Linear.app Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

23tokens

11type steps

6radius steps

2pxspacing base

Linear.app, in one page

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:

Dark-canvas marketing system — {colors.canvas} (#010102) is the deepest dark in this collection.
Lavender-blue brand accent ({colors.primary} #5e6ad2) — used scarcely on brand mark, focus, and the primary CTA.
Four-step surface ladder (canvas → surface-1 → surface-2 → surface-3 → surface-4) carries hierarchy without shadow.
Display tracking pulls aggressively negative (-3.0px at 80px); body holds at -0.05px.
Cards use {rounded.lg} 12px corners with 1px hairline borders — never pill, rarely 16px.
Product UI screenshots dominate the page. The marketing chrome is a dark frame for the app.
No second chromatic color. No atmospheric gradients. No spotlight cards.

Do's and don'ts

Do

Reserve {colors.canvas} (#010102) as the system's anchor surface — the faint blue tint is intentional.
Use {colors.primary} lavender ONLY for: brand mark, primary CTA, focus ring, link emphasis.
Use the four-step surface ladder for hierarchy. Avoid skipping levels.
Pair display weight 600 with body weight 400 — Linear resists 700+ display weights.
Apply negative letter-spacing aggressively on display.
Use product UI screenshots as the protagonist of every section.
Compose CTAs as {rounded.md} 8px corners.

Don't

Don't ship a light-mode marketing page.
Don't use lavender as a section background or card fill.
Don't introduce a second chromatic accent (orange, pink, green for marketing).
Don't add atmospheric gradients or spotlight cards.
Don't pill-round CTAs.
Don't use #000000 true black as the canvas.
Don't combine multiple bright accents in product screenshot mockups.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Linear.app design language. Follow the measured tokens below — do not substitute your own palette.

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

Type:
- families: Linear Display, Linear Text, Linear Mono, Inter
- scale: 12, 13, 14, 16, 18, 20, 22, 28, 40
- weights: 400, 500, 600

Shape:
- radius: 4, 6, 8, 12, 16, 24

Spacing: 2, 4, 6, 8, 12, 16, 24, 32, 48, 64

Rules:
- Reserve `{colors.canvas}` (#010102) as the system's anchor surface — the faint blue tint is intentional.
- Use `{colors.primary}` lavender ONLY for: brand mark, primary CTA, focus ring, link emphasis.
- Use the four-step surface ladder for hierarchy. Avoid skipping levels.
- Pair display weight 600 with body weight 400 — Linear resists 700+ display weights.
- Apply negative letter-spacing aggressively on display.
- Use product UI screenshots as the protagonist of every section.

Avoid:
- Don't ship a light-mode marketing page.
- Don't use lavender as a section background or card fill.
- Don't introduce a second chromatic accent (orange, pink, green for marketing).
- Don't add atmospheric gradients or spotlight cards.
- Don't pill-round CTAs.
- Don't use `#000000` true black as the canvas.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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

Brand & Accent

Lavender-Blue ({colors.primary}): The signature Linear accent — primary CTA, brand mark, link emphasis.
Lavender Hover ({colors.primary-hover}): Lighter lavender (#828fff) — hovered state of the primary CTA.
Lavender Focus ({colors.primary-focus}): Focus-ring tint (#5e69d1) — focused inputs, focused buttons.
Brand Secure ({colors.brand-secure}): Muted lavender-gray (#7a7fad) — used in "Linear Security" surfaces.

Surface

Canvas ({colors.canvas}): Default page background — #010102, near-pure black with a faint blue tint.
Surface 1 ({colors.surface-1}): One step above canvas — feature cards, pricing cards, product screenshot panels.
Surface 2 ({colors.surface-2}): Two steps above — featured pricing card, hovered cards.
Surface 3 ({colors.surface-3}): Three steps above — line-tertiary backgrounds, sub-nav.
Surface 4 ({colors.surface-4}): Four steps above — bg-level-3, deepest lifted surface.
Hairline ({colors.hairline}): 1px borders on cards and dividers.
Hairline Strong ({colors.hairline-strong}): Stronger 1px borders — input focus rings.
Hairline Tertiary ({colors.hairline-tertiary}): Tertiary borders for nested surfaces.
Inverse Canvas ({colors.inverse-canvas}): Pure white — surface of the inverse pill CTA on a small set of section openers.
Inverse Surface 1 ({colors.inverse-surface-1}): One step above inverse canvas.
Inverse Surface 2 ({colors.inverse-surface-2}): Two steps above inverse canvas.

Text

Ink ({colors.ink}): All headlines and emphasized body type — light gray #f7f8f8.
Ink Muted ({colors.ink-muted}): Secondary type at #d0d6e0 — meta info on hero panels.
Ink Subtle ({colors.ink-subtle}): Tertiary type at #8a8f98 — deselected pricing tabs, footer columns.
Ink Tertiary ({colors.ink-tertiary}): Quaternary at #62666d — disabled, footnotes.

Semantic

Success Green ({colors.semantic-success}): Status pills, success indicators. The only semantic color on marketing.
Overlay ({colors.semantic-overlay}): Pure black overlay scrim for modals.

Type scaleRead the full spec

Font Family

Linear Display — Linear's custom display sans; fallback SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto. Carries display-xl through subhead.
Linear Text — Linear's custom text sans (a slightly different cut tuned for body sizes); same fallback stack. Carries body sizes, button labels, captions.
Linear Mono — Linear's custom mono; fallback ui-monospace, SF Mono, Menlo. Used for code snippets in product screenshots and for status / ID tokens.

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

Hierarchy

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

Principles

Aggressive negative tracking on display (-3.0px at 80px ≈ 4% of size).
Single voice from display to body. Display-xl at 600 → body at 400 — same family, narrower weights.
Eyebrow uses positive tracking (+0.4px) — contrast against the negative-tracked display marks the eyebrow as taxonomy.
Mono only in code contexts. Linear Mono lives inside product screenshots — not on marketing chrome.

Note on Font Substitutes

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.

Components and layoutRead the full spec

Buttons

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

Background {colors.primary}, text {colors.on-primary}, type {typography.button}, padding 8px 14px, rounded {rounded.md}.
Pressed state lives in button-primary-pressed (background shifts to {colors.primary-focus}).
Hover state lives in button-primary-hover (background shifts to {colors.primary-hover} lighter lavender).

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

Background {colors.surface-1}, text {colors.ink}, type {typography.button}, padding 8px 14px, rounded {rounded.md}. 1px {colors.hairline} border.

button-tertiary — Plain text button.

Background {colors.canvas}, text {colors.ink}, type {typography.button}, rounded {rounded.md}, padding 8px 14px.

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

Background {colors.inverse-canvas}, text {colors.inverse-ink}, type {typography.button}, rounded {rounded.md}, padding 8px 14px.

Pricing Tabs

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

Default: {colors.canvas} background, {colors.ink-subtle} text, rounded {rounded.pill}, padding 6px 14px.
Selected: {colors.surface-2} background, {colors.ink} text — selected = surface lift.

Cards & Containers

pricing-card — Each tier on /pricing.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 24px. 1px {colors.hairline} border.

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

Background {colors.surface-2}, otherwise identical structure.

feature-card — Generic feature highlight tile.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 24px.

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.xl}, padding 24px.

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body-lg}, rounded {rounded.lg}, padding 32px.

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

Background {colors.canvas}, text {colors.ink-subtle}, type {typography.caption}, rounded {rounded.xs}, padding 16px.

cta-banner — Closing CTA panel near page bottom.

Background {colors.surface-1}, text {colors.ink}, type {typography.headline}, rounded {rounded.lg}, padding 48px.

Inputs & Forms

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding 8px 12px.
Focused state retains the same surface; the focus ring is a 2px {colors.primary-focus} outline at 50% opacity.

Status & Build Page

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

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.xs}, padding 24px 0. 1px {colors.hairline} bottom rule.

status-badge — Small status pill.

Background {colors.surface-2}, text {colors.ink-muted}, type {typography.caption}, rounded {rounded.pill}, padding 2px 8px.

Navigation

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.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, height 56px.

Footer

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

Background {colors.canvas}, text {colors.ink-subtle}, type {typography.caption}, padding 64px 32px.

Responsive behaviourRead the full spec

Breakpoints

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

Touch Targets

CTAs hold ≥40px tap height across viewports.
Pricing tab pills hold ≥36px tap height; touch viewports grow to ≥44px.
Form inputs hold ≥44px tap target on touch.

Collapsing Strategy

Top nav: links collapse to hamburger below 768px.
Card grids: 3-up → 2-up at 1024px → 1-up below 768px.
Pricing comparison: per-tier accordion below 768px.
Display type: {typography.display-xl} 80px scales toward {typography.display-md} 40px on mobile.

Image Behavior

Product UI screenshots maintain aspect ratio and never crop.
Customer logos in the marquee may collapse from 6-up to 3-up below 768px.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-linear {--page-bg: #010102;
  --page-bg-gradient: none;
  --text-color: #f7f8f8;
  --heading-color: #f7f8f8;
  --link-color: #6e79d6;
  --link-hover-color: #4654cb;
  --border-color: #2d2d2e;
  --card-bg: #010102;
  --card-shadow: 0 1px 2px rgba(247,248,248,0.06);
  --card-hover-shadow: 0 6px 18px rgba(247,248,248,0.12);
  --header-bg: #151516;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #010102;
  --footer-text-color: #a1a2a2;
  --button-bg: #5e6ad2;
  --button-text-color: #ffffff;
  --button-hover-bg: #3746c6;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #101011;
  --button-secondary-text-color: #f7f8f8;
  --button-secondary-hover-bg: #1f1f20;
  --button-secondary-border: 1px solid #2d2d2e;
  --prompt-bg: #0d0d0e;
  --prompt-text-color: #f7f8f8;
  --base-font: var(--font-mono);
  --heading-font: var(--font-inter);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

minimax 78.6%
composio 77.5%
mongodb 75.9%
spiral 73.7%
resend 73.6%

Where this came from

Source document: volt/design-md/linear.app/DESIGN.md · 23.6 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.