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.

Surface & Elevation