Linear's design language, explained

Linear is one of the most copied looks in software, and most copies miss what makes it work. People reach for "dark mode and a purple gradient" and call it Linear. The real thing is stricter: a near-black surface stack, exactly one accent color, one display family set with negative tracking, and a layout that assumes your hands never leave the keyboard. The restraint is the design. This is a breakdown of the parts, with real values, so you can tell the language apart from the imitation.

The trend even has a name now. Writers call it "linear design," after the tool, for layouts that are direct, sequential, and offer minimal choices. Accurate, but that describes the vibe, not the tokens. Here are the tokens.

dark, but engineered, not just inverted

Linear reads as dark because almost every surface sits near black, not because someone flipped a light theme. The marketing canvas bottoms out around #010102, essentially pure black with a faint blue cast, and the interface builds up from there in small, deliberate lifts rather than one flat charcoal. A panel is a hair lighter than the page, a hovered row lighter than the panel, a menu lighter again. Four or five surface levels, each a few points of lightness apart, do the entire job of depth.

That is why Linear can mostly skip drop shadows. On a light UI, elevation comes from shadow. On Linear's dark stack, it comes from the surface lift plus a single hairline border at low opacity. The result looks flatter and cleaner than a shadow-heavy dark theme, and it survives being rebuilt in plain CSS, part of why the style spread so fast. Get the stack wrong and the whole thing collapses into muddy gray, which is the most common failure in Linear knockoffs: one dark background, no lift, so nothing has edges.

one accent, spent carefully

Linear's chromatic signature is a single lavender-indigo, around #5e6ad2. It is not a palette. It is one hue that carries the brand mark, focus rings, and the single primary action in a view, with a lighter tint near #828fff for hover. Everything else is the grayscale surface stack and text.

That scarcity is the point. When only one thing on the screen is colored, that thing reads as "the action" with zero extra effort. A violet button, a violet focus ring, and gray everywhere else gives an unmistakable hierarchy. Add a second accent and it blurs. Restraint here is not minimalism for taste, it is a working system for pointing attention.

If you study the Linear teardown, the thing to notice is how little color there is. The accent shows up in a handful of places and nowhere else. That discipline is copyable; the specific violet is not the secret. Corners follow the same restraint: a rounded radius scale, tight on small controls and larger on cards, applied consistently so nothing looks hand-tuned.

typography: Inter, but with the features turned on

Linear's body type is Inter, which sounds unremarkable until you see how it is configured. Linear does not ship Inter at its defaults. It turns on specific OpenType features, notably cv01 for the single-story lowercase a and ss03 for geometric alternates. Those two switches are a large part of why Linear's text looks more precise than the thousand other sites also running Inter.

The display type does the emotional work. Headings run a tighter, custom sans with negative letter-spacing that scales with size: heavily negative tracking on large display text, easing toward zero near body size. That is what makes big Linear headings feel dense and confident rather than airy. Body copy sits around 16px at a normal weight and a line height near 1.5, with slightly larger, heavier settings for emphasis blocks.

The lesson for anyone rebuilding the look: picking Inter is step one and almost meaningless alone. The character variants and the size-dependent negative tracking carry the identity. Miss those and you have generic Inter, which is exactly the AI-slop UI default that every model reaches for.

dense spacing on a strict grid

Linear is compact. Rows are short, padding is tight, and a lot fits on one screen without feeling cramped. That density is not sloppiness fighting a deadline, it is a spacing scale applied without exception. Values step in a small, repeating rhythm (in the 4-to-8-point family), so gaps are always one of a handful of numbers rather than whatever looked right that day.

The strictness is what keeps density from becoming clutter. When every gap is a multiple of the same base, the eye reads alignment even in a dense list, and the interface feels engineered rather than crowded. Dense plus strict is the combination. Dense without a grid is noise. A grid without density is a marketing page pretending to be an app.

keyboard-first, which is a design decision, not a feature list

Linear assumes the keyboard is the primary input. Nearly every common action has a shortcut, and a global command palette puts the whole app one keystroke away. You can create an issue, change its status, assign it, and move on without touching the mouse.

This is design language, not just an engineering flourish, because it shapes what you see. Keyboard-first means the UI need not surface every action as a visible button, which is part of why Linear looks so uncluttered: the affordances live in muscle memory and the command palette, not in a crowded toolbar.

Speed is the other half. A technical breakdown of why Linear feels instant traces it to a local database in the browser (IndexedDB), with mutations applied optimistically and synced in the background, so there are no spinners to wait on. Restraint in the design and "hide every network request" in the engineering are the same instinct at two layers.

what the imitations get wrong

Put the parts together and the failure modes are obvious. Flat dark background with no surface lift. Two or three accent colors instead of one. Inter at its defaults with no character variants. Un-gridded spacing that reads as a landing page, not a tool. Any one breaks the resemblance even if the rest is right, which is why "make it look like Linear" so rarely lands from a screenshot alone. A screenshot cannot tell you the background is #010102 and not #0a0a0a, that the accent is one hue and not three, or that the headings carry negative tracking. Those are values, and values are what you rebuild from.

reading the language off the page with uiscanner

That is the gap uiscanner closes. Paste any public URL and it reads the rendered page with vision plus the DOM, then returns the design tokens (surface colors, the accent, the type family and scale, radii, spacing, shadows, and motion), a section-by-section structure, and a Claude-tailored build prompt to recreate the look. Because it reads the real page rather than guessing from pixels, it catches what a knockoff usually misses: the actual primary button, the surface lifts, the type settings. It describes and tokenizes; it never copies or re-hosts the original asset bytes, so you rebuild in your own stack from the tokens.

Pull the tokens from your terminal:

npx -y uiscanner-mcp@latest scan linear.app --target landing

Or wire it into Claude Code so an agent can request a teardown mid-build:

claude mcp add uiscanner -- npx -y uiscanner-mcp@latest

Every scan returns an id and a shareable uiscanner.com/t/<id> link. The quota is unified across the web app, MCP, and CLI on a rolling 30-day window: Free is 5 scans, Indie ($12/mo) is 100, Studio ($39/mo) is 400. Setup for every client lives at /mcp, and you can browse other teardowns in /explore.

the short version

Linear's design language is a small set of strict rules: build depth from near-black surface lifts instead of shadows, spend one accent color and nothing more, run Inter with cv01 and ss03 and set display type with negative tracking, keep spacing dense on a single grid, and design for the keyboard so the UI stays quiet. The look is famous because the discipline is unusual, not because the tokens are exotic. Read the tokens, apply the rules, and you get the language. Skip them, and you get another dark page with a purple button.