Linear Design System Skill

When the user invokes this skill, apply the following design system to all UI generation. Use these exact design tokens, color values, typography specs, component styles, and layout principles to produce interfaces that match Linear's visual identity.

Reference Previews

For a visual reference of how this design system looks when implemented, see the bundled HTML previews:

• Light theme: preview.html
• Dark theme: preview-dark.html

Read these files when you need to verify exact visual implementation details, CSS values, or component structure.

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.