Design teardown
Linear
A dark instrument. Hierarchy is weight and opacity, and structure is a hairline.
linear.app
Design character
An instrument, not a brochure
Linear’s public site is a dark, precise tool surface that happens to be marketing. Contrast is high, chrome is quiet, and almost every edge is a 1px line at low opacity. The indigo accent marks action and focus. It does not paint large areas.
Typography
The interface trusts a neutral grotesque and keeps sizes modest. Display type is reserved for the hero. Inside the product frame, hierarchy comes from weight and from how muted a line is, not from jumping three sizes at once.
Color system
A near-black canvas, off-white text, and a single indigo used as a signal. Surfaces step up by a few percent of lightness. Borders are translucent white, so they exist on every background without a second palette.
Spacing and geometry
A 4px grid used tightly inside controls and more loosely between marketing sections. The product feels dense because padding is honest: enough to hit, not enough to lounge.
Layout
Marketing is a centered column with product imagery bleeding wider. The implied product is a fixed tool shell: sidebar, list, detail. Alignment is left. Centered type is limited to short hero lines.
Motion
Motion is fast and functional. Things appear, they do not bounce. The personality is a short ease, under 200ms, used to confirm a change of state.
UI fingerprint
- Hairline borders carry structure, and shadows almost never appear. Depth is a slightly lighter rectangle and a 1px line at low opacity. That choice keeps the dark canvas flat and technical. Adding drop shadows would immediately make it feel like a generic app shell.
- Indigo is a signal for action, not a surface you sit in. The accent shows up on the primary button, focus, and selection. Large areas stay neutral. The brand is recognizable because the color is rare.
- UI type stays small. Hierarchy comes from weight and opacity. 13px medium next to 13px secondary gray does more work than a jump from 16px to 28px. The interface feels calm because it refuses dramatic scale inside the tool.
- Corners are tight, and padding stays compact. 6px on controls and about 12px of horizontal padding reads as machined, not friendly-rounded. Generous padding would tip it toward a consumer app.
- Metadata drops into mono so the chrome feels like a tool. Identifiers, keys, and short labels get a monospace face. It is a recurring tell: this is a place where text is also data.