Linear-Quality Design System

Build UI with the craft of Linear, Vercel, and Resend. Great UI is restraint, not addition. The best details are invisible — felt, not seen.

Color System

Design a derived color system, not a palette of hardcoded values.

Define 3 foundation variables: base color, accent color, contrast level.
Derive all surfaces, text, icons, borders from these via opacity operations.
Use perceptually uniform color space (LCH/OKLCH) so colors at same lightness look equally light.
Hierarchy through opacity and weight, not hue. Monochrome-first.
Color ONLY for semantic meaning: error (red), success (green), active/selected, brand accent.
No decorative color. No habitual colored icons — make them muted-foreground.
Limit brand color leakage into chrome. The frame should feel neutral and timeless.
No hardcoded hex anywhere. CSS variables / design tokens only.