Design System — Linear Design System

Visual Theme & Atmosphere

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.

...

Key Characteristics:

Dark-canvas marketing system — {colors.canvas} (#010102) is the deepest dark in this collection.
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

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

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

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

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.

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 Rules

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

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

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

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.

Dynamic Preview:

display-xl size: 80px | weight: 600 | height: 1.05 | spacing: -3.0px