Design System: Linear

1. Visual Theme & Atmosphere

Linear's website is a masterclass in dark-mode-first product design a near-black canvas (#08090a) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (rgba(255,255,255,0.05)) to soft, luminous text (#f7f8f8). This is not a dark theme applied to a light design it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.

The typography system is built entirely on Inter Variable with OpenType features "cv01" and "ss03" enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.

The color system is almost entirely achromatic dark backgrounds with white/gray text punctuated by a single brand accent: Linear's signature indigo-violet (#5e6ad2 for backgrounds, #7170ff for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (rgba(255,255,255,0.05) to rgba(255,255,255,0.08)) that create structure without visual noise, like wireframes drawn in moonlight.