What is Linear's primary brand color?

Linear's brand color is lavender-blue at "#5e6ad2" — a desaturated blue-violet sitting between Slack purple and Discord blurple. The hover state lightens to "#828fff" and the focus tint settles at "#5e69d1". Linear uses lavender scarcely: brand mark, primary CTA, focus ring, and link emphasis only. It never fills cards, never appears as a section background, and never pairs with a second chromatic accent.

Does Linear's design system have a light mode?

No — the marketing site is dark-only. Canvas is "#010102" (essentially pure black with a faint blue tint), with a four-step surface ladder running through "#0f1011", "#141516", "#18191a", and "#191a1b" for lifted panels. The spec documents three inverse tokens ("#ffffff" canvas, "#f5f6f6" and "#f6f7f7" surfaces) used only on the rare white pill CTA over a dark section opener. Linear's product UI ships a light theme, but it is not represented in this DESIGN.md.

What typography does Linear use, and what should I use if Linear Display isn't available?

Linear runs three custom typefaces: Linear Display for headlines, Linear Text for body, and Linear Mono for code. The fallback stack documents SF Pro Display on macOS. None of these are publicly distributed. Inter at weights 500 / 600 / 700 is the closest free substitute, with Geist Sans as another viable option. For mono, JetBrains Mono or Geist Mono at weight 400 closely approximates Linear Mono. The display scale runs from 80px down to 12px with negative letter-spacing scaling aggressively at the top end.

Why does Linear use such aggressive negative letter-spacing on display type?

The display scale pulls tracking to -3.0px at 80px, -1.8px at 56px, -1.0px at 40px, and -0.6px at 28px — roughly 4% of font size at the top of the ramp. This compresses headlines optically and gives Linear's voice a precise, mechanical feel that matches the product's keyboard-shortcut-driven UI. Body tracking holds at -0.05px and eyebrow labels use positive tracking (+0.4px) to mark them as taxonomy rather than display.

Can I use this DESIGN.md to build my own React project management tool?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Linear's restraint: dark canvas, single lavender accent, surface ladder over shadows. Reference the tokens directly inside Tailwind config or CSS variables — every color, type style, radius, and spacing value is a quoted scalar. The 22 component definitions cover buttons, pricing cards, product screenshot panels, testimonial cards, and the changelog row used on "/build".

What's missing from this DESIGN.md spec?

A handful of things, documented in the Known Gaps section: form-field error and validation styling is not visible on the inspected pages; light mode is not documented because Linear's marketing site does not ship a light theme; and Linear's actual product UI uses a richer color-tag palette (red, orange, yellow, green, blue, purple) for issue priorities and project labels that lives inside the in-product surfaces shown in mockups. The four-step surface ladder values are extracted directly from Linear's canonical CSS variables.

Linear Design System

Linear's design system as a DESIGN.md file.

About Linear DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source linear.app

Project Management
Productivity & SaaS

Linear's marketing site is the strictest dark-canvas system in this directory. The page floor is "#010102" — essentially pure black with a faint blue cast, never the unfortunate "#000000" true black that most dark sites default to. On top sits a four-step surface ladder: charcoal panels at "#0f1011", "#141516", "#18191a", and "#191a1b" carrying every card, hovered tile, and lifted dropdown. Hairlines run from "#23252a" up through "#34343a" and "#3e3e44". The single chromatic accent is Linear's lavender-blue "#5e6ad2", deployed scarcely on the brand mark, focus rings, and one primary CTA per section. There is no second chromatic color, no atmospheric gradient, no spotlight card. Linear trusts surface lift and hairline borders to carry every bit of hierarchy.

This page packages the entire spec into one DESIGN.md file written to the Google Labs spec. Inside: 22 color tokens grouped into brand, surface, hairline, text, and semantic families; 14 type tokens running Linear Display, Linear Text, and Linear Mono with negative tracking scaling from -3.0px at 80px down to 0 at body; an 8-step rounded scale (4px through 24px plus pill and full); a 9-step spacing scale on a 4px base unit ending at 96px section padding; and 22 component definitions covering buttons, pricing cards, product screenshot panels, testimonial cards, changelog rows, and the dark top-nav and footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Linear's discipline — dark canvas, single lavender accent, surface ladder over shadows — rather than a generic dark theme. Or reference the tokens directly: every hex, font, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or your component library. Linear is worth studying because it proves how far restraint scales: a single accent color, one negative-tracking display family, and four surface lifts produce a marketing page that reads as software-craft documentation.

What makes it distinct

Deepest dark canvas in the directory#010102 with a faint blue tint, never pure #000000 true black
Single chromatic accentlavender-blue #5e6ad2 reserved for brand mark, focus ring, and primary CTA only
Four-step surface ladder carries hierarchy without drop shadowscanvas to surface-4 with hairline borders
Aggressive negative letter-spacing on display-3.0px at 80px, scaling to -0.05px at 16px body
Product UI screenshots are the protagonistmarketing chrome is a dark frame for high-fidelity app captures

Live at linear.app

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

linear.app

Explore Linear

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Linear design system FAQ

Common questions about Linear's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Linear brand guidelines

Linear's official brand site — wordmark, color usage, and the lavender accent token in context.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Linear in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→