Linear — design system & UI screens

Dev Tools · 9 screens · 39 sections · linear.app

The issue tracker and project tool built for high-velocity product teams.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/product/linear.

Decoded design system

Linear's decoded design system: background #08090A, text #D0D6E0, accent #E5E5E6, link #5E6AD2, primary #D0D6E0; type scale h1 64px / h2 48px / body 15px; 4px spacing base; 2px base radius. The single interactive/action color is #E5E5E6 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#08090A`
surface	`#141516`
border	`#26272A`
text	`#D0D6E0`
text_muted	`#84888E`
primary	`#D0D6E0`
accent	`#E5E5E6`
link	`#5E6AD2`
secondary	`#E4F222`
button_bg	`#E5E5E6`
button_text	`#08090A`

Using these colors

Action color #E5E5E6 — the single interactive color; only on things you click or must notice, never large fills.
accent, button_bg are all #E5E5E6 — one role, not several (the action color).
accent #E5E5E6 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #D0D6E0 — ≈ the text color — a foreground/text color, not an action color (action = #E5E5E6).
link #5E6AD2 — inline text links and link-styled controls.
secondary #E4F222 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: SF Pro Display
Body: Inter
Mono: Berkeley Mono
h1: 64px
h2: 48px
body: 15px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 6px, 8px, 12px, 15px, 16px, 20px, 24px

Radii

base: 2px
button: 9999px

Shadow

rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px

Shadows (elevation)

subtle: rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px
card: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px
overlay: rgba(8, 9, 10, 0.6) 0px 4px 32px 0px

Motion

Micro-interactions run at 160ms (dominant) with cubic-bezier(0.25, 0.46, 0.45, 0.94).

durations: 160ms · 400ms · 100ms
easings: cubic-bezier(0.25, 0.46, 0.45, 0.94) · ease-out
animated properties: transform, filter, background, opacity

Native design tokens

Token	Value
`--color-text-secondary`	`#d0d6e0`
`--color-text-tertiary`	`#8a8f98`
`--color-line-tertiary`	`#18191a`
`--color-white`	`#fff`
`--color-accent`	`#7170ff`
`--color-border-translucent`	`#ffffff0d`
`--color-line-secondary`	`#202122`
`--color-bg-level-3`	`#191a1b`
`--editor-text-color`	`#e4e5e9`
`--color-line-primary`	`#37393a`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #FFFFFF
primary focus: outline 2px solid rgb(94, 105, 209)

Layout (measured)

container max-width: 1436px
nav: 73px fixed, backdrop blur(20px)
common grid: 2 columns

Motion choreography (measured)

Load order: span.w9ZFkq_animatedTextGradi → circle.grid-dot-0-0-upDown×25 → circle.grid-dot-0-0-pong×25 → circle.grid-dot-0-0-agent×50 → div.qM9FAa_cursor → circle.grid-dot-0-0-empty-once×25

Scroll reveal: 2 elements rest at opacity 0, animate in over 800ms.

Overlay recipe (measured)

dropdown panel: #171718 · radius 8px · enter 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)

Input (measured)

height 68px · radius 6px · focus ring 2px solid rgb(94, 105, 209)

Responsive (measured)

breakpoints: 640px · 768px · 928px · 1024px · 1280px · 1440px
mobile (390px): hero 38px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →