Dark, cinematic product brochure + keyboard-first app: Inter at optical weights (510/590), near-white pill CTAs, indigo #5e6ad2 confined to product UI, dense 32px rows.
Browse Linear in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: linear.app homepage (live DOM, computed styles), recaptured 2026-07-08 at desktop 1512px; palette/weights cross-checked against Linear's published CSS custom properties (2026-07-06). Coverage: full homepage (hero → logo wall → feature chapters → closing CTA → footer). App shell: see apps/linear/app/. Responsive: breakpoints from stylesheets only; mobile rendering not verified.
A cinematic dark product brochure: near-black canvas, huge left-aligned Inter display at medium (510) weight with tight negative tracking, and real app screenshots floating in bordered frames over metallic silver-gradient floors. Color is almost absent — white/gray type, near-white pill CTAs, one indigo/violet brand hue reserved for product UI inside the screenshots. Sections read like numbered chapters (gray index numerals + arrow links), and a signature two-tone editorial device sets the lead clause in white and the rest in gray within one 48px block. Motion is restrained: fades and staggers, everything fast. Feels: cinematic, engineered, confident, quietly premium.
| Token | Hex | Role / usage |
|---|---|---|
| bg | #08090a | Page canvas (deepest sections #010102) |
| surface-1 | #0f1011 | Framed screenshot panels, cards |
| surface-2 | #141516 | Higher panels |
| panel | #1c1c1f | Floating cards (Slack thread, Pulse card) |
| ghost-fill | rgba(255,255,255,.05) | Dark pill CTA (Contact sales) |
| border | #23252a / rgba(255,255,255,.05) | Hairlines, frame borders |
| nav | transparent + backdrop-filter: blur(20px), h73, fixed | Header |
| Token | Hex | Role / usage |
|---|---|---|
| text-primary | #f7f8f8 | Display, headings, lead clauses |
| text-secondary | #d0d6e0 | Feature card titles (20/590) |
| text-tertiary | #8a8f98 | Subheads, body, nav links, footer links, de-emphasized display text |
| text-quaternary | #62666d | Chapter index numerals, fine print |
| Token | Hex | Role / usage |
|---|---|---|
| cta near-white | #e5e5e6 | Primary pill buttons (text #08090a) |
| brand indigo | #5e6ad2 / violet #7170ff | Appears only inside product screenshots and small UI accents — never as marketing chrome |
| metallic floor | silver gradient (light gray → white → dark) | Pedestal under hero/section screenshots |
Rule: marketing chrome is strictly grayscale; the only saturated color on the page lives inside embedded product UI (issue-state dots, charts). Rule: two-tone display — lead clause #f7f8f8, remainder #8a8f98, same size/weight.
"Inter Variable", "SF Pro Display", -apple-system, "Segoe UI", Roboto, sans-serif. One family; no display face.#8a8f98.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 64 / 64 | 510 | -1.408px (-2.2%), left-aligned |
| Closing display (h2) | 72 / 72 | 510 | -1.584px, centered |
| Section chapter (h2) | 48 / 48 | 510 | -1.056px (-2.2%) |
| Feature card title (h3) | 20 / 26.6 | 590 | -0.24px |
| Hero subhead | 15 / 24 | 400 | 0, #8a8f98 |
| Body / editorial | 16 / 24 | 400 | 0 |
| Nav links | 13–14 | 400–510 | 0, #8a8f98 |
Footer: headers 13/510 #f7f8f8, links 13/400 #8a8f98 |
Patterns: display sizes are huge but weight stays 510; tracking tightens ~-2.2% at every display size; body tracking neutral.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.
Source: Linear's published CSS custom properties + the full embedded product shells on linear.app (live DOM, computed styles), 2026-07-06/07. The logged-in dashboard itself was NOT captured (needs-dashboard) — tokens below are Linear's own app design tokens as shipped in its public stylesheets and rendered in embedded app frames. Responsive: not captured.
Dark-first, high-contrast, and engineered: a near-black canvas with a stepped elevation ladder, hairline translucent borders, and dense keyboard-driven rows. Indigo is the only chrome color — brand, active, focus — while status hues live exclusively on issue states and priority icons. Typography is Inter at Linear's custom optical weights (510/590/680, never true bold). Everything is compact: 28px sidebar rows, 32px controls, 4px grid. Motion is instant and snappy — never bouncy or slow. Feels: fast, precise, engineered, quietly premium.
| Token | Hex | Role / usage |
|---|---|---|
| bg-primary / level-0 | #08090a | App canvas |
| level-1 | #0f1011 | Raised surface |
| level-2 | #141516 | Higher surface, row hover |
| level-3 | #191a1b | Highest surface |
| bg-secondary | #1c1c1f | Panels, menus, inputs |
| bg-tertiary | #232326 | Hover fills, chips, selected rows |
| bg-quaternary | #28282c | Active/pressed fills |
| overlay-primary | #000000d9 | Modal scrim |
| Token | Hex | Role / usage |
|---|---|---|
| text-primary | #f7f8f8 | Headings, primary text |
| text-secondary | #d0d6e0 | Body, sidebar labels, code |
| text-tertiary | #8a8f98 | Muted UI text |
| text-quaternary | #62666d | Section headers, placeholders, disabled |
| Token | Hex | Role / usage |
|---|---|---|
| border-primary | #23252a | Default hairline |
| border-secondary | #34343a | Stronger separators |
| border-tertiary | #3e3e44 | Input/interactive borders |
| border-translucent | #ffffff0d | Most-used divider (5% white) |
| line-primary | #37393a | Table/list dividers |
| Token | Hex | Role / usage |
|---|---|---|
| brand-bg (indigo) | #5e6ad2 | Primary buttons, active states, focus rings |
| accent (violet) | #7170ff | Links, highlights, glow accents |
| Token | Hex |
|---|---|
| blue | #3caefe |
| green | #27a644 |
| red | #eb5757 |
| orange | #fc7840 |
| yellow | #f0bf00 |
| teal | #00b8cc |
Rule: chrome is grayscale near-black; indigo/violet is the only chrome color. Status hues appear only on issue states, labels, and priority icons.
"Inter Variable", "SF Pro Display", -apple-system, "Segoe UI", Roboto, sans-serif. One family everywhere.400, medium 510, semibold 590, bold 680. Titles are 590, never true bold.#f7f8f8.| Role | Size/Line | Weight |
|---|---|---|
| tiny | 10 / 1.5 | 400 |
| mini (rows, meta, labels) | 13 / 1.5 | 400–510 |
| small | 14 / 1.5 | 400 |
| regular (body) | 15 / 1.6 | 400 |
| large | 17 / 1.6 | 400 |
| title-1 → title-9 | 17 / 20 / 24 / 32 / 40 / 48 / 56 / 64 / 72, lh 1.0–1.4 | 590 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.