Colors
Our color system uses OKLch for perceptually uniform colors that work beautifully in both light and dark themes.
Primary Palette
Our primary blue palette anchors the brand. Use these colors for primary actions, links, and key UI elements.
Primary 50
oklch(0.97 0.02 250) Primary 100
oklch(0.93 0.04 250) Primary 200
oklch(0.88 0.06 250) Primary 300
oklch(0.78 0.10 250) Primary 400
oklch(0.68 0.14 250) Primary 500 (Base)
oklch(0.58 0.18 250) Primary 600
oklch(0.48 0.16 250) Primary 700
oklch(0.40 0.14 250) Primary 800
oklch(0.32 0.10 250) Primary 900
oklch(0.24 0.06 250) Accent Colors
Eight accent colors provide visual variety and semantic meaning across the product.
Coral
Errors, warnings, destructive actions
oklch(0.70 0.18 25) Amber
Warnings, highlights, attention
oklch(0.80 0.16 80) Lime
Success, growth, positive
oklch(0.85 0.20 130) Teal
Information, trust, calm
oklch(0.70 0.12 180) Azure
Links, interactive, primary
oklch(0.65 0.15 250) Violet
Premium, creativity, special
oklch(0.60 0.20 290) Rose
Personality, delight, featured
oklch(0.70 0.18 350) Slate
Neutral, subtle, secondary
oklch(0.50 0.02 250) Grey Scale
A comprehensive grey scale for text, backgrounds, and borders.
0
50
100
200
300
400
500
600
700
800
900
950
Color Usage
Text
Primary text Secondary text Tertiary text
Backgrounds
Primary
Secondary
Tertiary
Status
Success Warning Error Info