Linear: the system is the site

Why this one first

Developer tools are judged hardest because the reviewers are also the users, and Linear is the product most often cited as the standard for craft in that category. It is also the clearest public case of a company shipping its design system as the website rather than beside it. For a channel about design systems, that is the right first subject: the question is not whether the site is pretty but whether the system holds up when measured.

Method: the public pages were loaded at 1280px and at a phone width; stylesheets and computed styles were sampled in the browser; animations were checked against the reduced-motion media query. No account was created, so the product itself is out of scope here.

What is done well

1. One variable font, used as an instrument

Inter Variable (v4.1) is self-hosted from Linear's own CDN and used at seven weights: 300, 400, 450, 500, 550, 600, 700. The fractional stops are the tell. They are only possible because the font is variable, and they let the type ramp move in half-steps where a static family would jump. Contextual alternates (calt) are on globally. The scale is 11, 12, 13, 15, 18, 20, 24 and 36px, with line heights of 23, 32 and 46px.

Principle: a variable font is a control surface, not an upgrade. Use the axis.

2. Depth without shadows

The dark surface is #08090a. Separation comes from borders at 8% white (#ffffff14), hover states at 4% (#ffffff0a), and backdrop blur at 20px on the navigation and 32px on dropdown panels. There is one drop shadow in the system, 0 8px 32px #08090a, reserved for floated panels. Everything else is layered translucency.

Principle: in dark UI, translucent borders and blur separate surfaces more honestly than stacked shadows.

3. Motion with a system and an off switch

Dropdowns scale in over 0.18s, the hero CTA fades over 0.5s after a 0.1s delay, navigation slides at 0.18s. Every one of these sits inside @media (prefers-reduced-motion: no-preference), and so does smooth scrolling. Durations are short enough not to delay a keyboard user and long enough to give spatial orientation.

Principle: reduced motion is a contract, not an enhancement. Gate the animation, not the fallback.

4. Tokens named by role

Eight radius steps (4 to 32px, plus pill and circle), a 12-column grid, an 8px spacing rhythm, and z-index tokens with names like --layer-command-menu (650), --layer-dialog (700) and --layer-tooltip (1100). The names describe the job, not the position. The pre-footer gets 224px of vertical margin on desktop, which is why a dense product page still breathes.

Principle: name tokens by role so they survive new surfaces without renegotiation.

5. Copy that stays at the level of fact

The headline is eleven words: "The product development system for teams and agents". The pricing page says "Trusted by more than 40,000 companies", a count rather than an adjective. Across the pages sampled there is no "delightful", "seamless" or "powerful".

Principle: claims held to observable facts age better than aspirational adjectives.

6. Theme decided before first paint

An inline script reads localStorage["website-theme"] and stamps data-theme on the root element before the browser renders anything. Three values exist (dark, light, glass); the CSS reacts through scoped selectors. No flash of the wrong theme.

Principle: theme state belongs on the document root before paint, not after hydration.

What can be improved

1. The reset removes outlines; the restoration is not proven

The global reset sets outline: none on all link, button and select elements. Whether :focus-visible is restored by the atomic utility classes could not be confirmed from the sampled stylesheets, and the audit session could not verify it by tabbing. For a product that positions itself as keyboard-first, this is the one claim that needs a visible test: every interactive element type, with a focus ring, in both themes.

Principle: a reset that removes outlines without a tested restoration path is a liability, not a baseline.

2. A third theme that nobody is told about

The token vocabulary declares glass next to dark and light, but the visible toggle exposes two, and the glass variant's legibility rules and intended context are not documented anywhere a visitor or contributor can find. A partial theme is a maintenance surface with no specification.

Principle: ship a token surface with documented intent, or remove it from the vocabulary.

3. Vertical rhythm breaks at the last breakpoint

The pre-footer margin steps 224px, 128px, 96px across desktop, 768px and 640px. The last step is a 25% cut where the previous one was 43%; it reads as a round number rather than a position on the same scale the rest of the layout uses.

Principle: spacing transitions follow the layout's modular scale, not viewport thresholds chosen by hand.

4. The pricing comparison is a list wearing a table

More than thirty feature rows are presented as plain text. At phone width this becomes a long vertical list with no grouping, no icon coding and no tier badges, so the differences between plans have to be read rather than seen. The content is right; the presentation carries more load than it needs to.

Principle: dense comparison tables need spatial grouping to show tier differences at a glance.

The principle

A design system's public face should be built from the same token vocabulary as the product it ships. When the spacing, radius, colour and motion tokens are production-grade, the marketing site doubles as a living specification.

Linear passes this test almost everywhere, which is why the one gap matters: a specification that cannot demonstrate its own focus states is incomplete at exactly the point where the audience looks hardest.

Takeaway

Systematic constraints produce a coherent surface without visual novelty: one font at full range, translucent-border depth, motion gated behind the user's preference. Before calling an interface keyboard-first, prove that every outline: none is paired with a restored :focus-visible.

Measurements

Item	Value
Fonts	Inter Variable 4.1 (UI), Berkeley Mono Variable 3.2 (code), Tiempos Headline (rare display)
Weights in use	300, 400, 450, 500, 550, 600, 700
Type scale	11, 12, 13, 15, 18, 20, 24, 36px (mobile h1 38px)
Header	72px desktop, 64px mobile
Prose measure	624px max
Radii	4, 6, 8, 12, 16, 24, 32, 9999px
Surface and border	#08090a, border #ffffff14, hover #ffffff0a
Blur	20px nav, 32px panels
Motion	0.18s panels, 0.5s CTA fade; all behind reduced-motion
Themes	dark, light, glass via data-theme, set before paint