Colors

OKLCH-based color system with semantic tokens. Perceptually uniform colors that adapt to light and dark modes.

Why OKLCH

OKLCH is a perceptually uniform color space that makes it easy to create accessible color palettes with consistent perceived brightness.

OKLCH Formatoklch(L C H / A) L = Lightness (0-1) 0 = black, 1 = white C = Chroma (0-0.4) 0 = gray, higher = more saturated H = Hue (0-360) Color wheel position A = Alpha (0-1) Optional opacity Examples: oklch(0.585 0.233 264) Indigo accent oklch(0.145 0 0) Near-black (foreground) oklch(0.556 0 0) Gray (muted text) oklch(0.585 0.233 264 / 0.2) Indigo at 20% opacity

Why not HSL? In HSL, colors with the same lightness value appear to have different perceived brightness. OKLCH's lightness is perceptually uniform—if two colors have the same L value, they look equally bright to human eyes.

Semantic Tokens

Use semantic names instead of raw colors. These adapt automatically to light and dark modes.

background

var(--background)

Page backgrounds, card backgrounds

foreground

var(--foreground)

Primary text, headings, icons

muted

var(--muted)

Subtle backgrounds, secondary surfaces

muted-foreground

var(--muted-foreground)

Secondary text, captions, descriptions

border

var(--border)

Card borders, dividers, separators

input

var(--input)

Input borders, form element borders

ring

var(--ring)

Focus rings, selection indicators

CSS Variables in Tailwind// Use with Tailwind classes bg-background // Page background text-foreground // Primary text text-muted-foreground // Secondary text border-border // Borders bg-muted // Subtle backgrounds // Or access directly in CSS background: var(--background); color: var(--foreground);

Accent Colors

Indigo is our primary accent color. Use for links, buttons, active states, and brand highlights.

accent

var(--accent)#6366f1

Primary accent, links, active states, brand color

accent-foreground

var(--accent-foreground)

Text on accent backgrounds

accent-light

var(--accent-light)

Glows, subtle highlights, hover backgrounds

Accent at Different Opacities

Use opacity variants for hover states and subtle backgrounds.

100%

40%

20%

10%

Common Opacity Uses100% Solid buttons, links 40% Hover borders (border-accent/40) 20% Focus rings (ring-accent/20) 10% Badges, pills (bg-accent/10) 5% Subtle hover backgrounds (bg-accent/5) 3% Very subtle tints (cards on hover)

Feedback Colors

Semantic colors for errors, success, and warnings.

destructive

var(--destructive)

Errors, warnings, delete actions

success

(Use Tailwind green-500)

Success states, confirmations

warning

(Use Tailwind yellow-500)

Warnings, caution states

Feedback PatternError States border-color var(--destructive) ring 0 0 0 3px oklch(0.577 0.245 27 / 0.1) text text-destructive Success States Use Tailwind: text-green-600, bg-green-500/10, border-green-500/30 Warning States Use Tailwind: text-yellow-600, bg-yellow-500/10, border-yellow-500/30

Gradient Palette

Colors used for animated gradients and mesh backgrounds.

Gradient Start

Beginning of accent gradients

oklch(0.585 0.233 264)

Gradient Mid

Middle of accent gradients

oklch(0.7 0.2 280)

Mesh Blob 1

Hero background mesh

oklch(0.75 0.15 264)

Mesh Blob 2

Hero background mesh

oklch(0.8 0.12 280)

Mesh Blob 3

Hero background mesh

oklch(0.7 0.18 250)

Mesh Blob 4

Hero background mesh

oklch(0.85 0.1 270)

Gradient Text Effect

Animated gradient text

Gradient Text CSS.gradient-text { background: linear-gradient( 135deg, oklch(0.585 0.233 264) 0%, oklch(0.7 0.2 280) 50%, oklch(0.585 0.233 264) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 3s ease-in-out infinite; }

Usage with Tailwind

Common patterns for using colors in your components.

Common Patterns// Primary Button "bg-foreground text-background hover:bg-foreground/90" // Secondary Button "border border-foreground/20 bg-transparent text-foreground hover:bg-foreground/5 hover:border-foreground/40" // Card with Border "bg-background border border-border rounded-xl" // Card with Hover "bg-background border border-border hover:border-accent/40 hover:bg-accent/5 transition-all" // Muted Text "text-muted-foreground" // Inline Link "text-accent hover:underline" // Error State "border-destructive ring-2 ring-destructive/20" // Focus State "focus:border-accent focus:ring-2 focus:ring-accent/20"

Pro tip: When creating opacity variants, use the OKLCH alpha syntax for consistency:

// Tailwind opacity classes
bg-accent/20     // Uses Tailwind opacity
border-accent/40

// Or in raw CSS
oklch(0.585 0.233 264 / 0.2)   // Native OKLCH alpha