Catalog/Admin/Colors

Colors

Brand blue ramp, cream ramp, semantic token pairs, surface tokens, and chart palette — all OKLCH.

Preview

Brand Blue Ramp

50--blue-50

100--blue-100

200--blue-200

300--blue-300

400--blue-400

500--blue-500

600--blue-600

700--blue-700

800--blue-800

900--blue-900

Cream Ramp

50--cream-50

100--cream-100

200--cream-200

300--cream-300

Accent--cream-accent

Semantic Pairs

Each semantic token has a background + foreground pair. Toggle light/dark in the catalog header to compare.

Primary

--primary--primary-foreground

Secondary

--secondary--secondary-foreground

Muted

--muted--muted-foreground

Interactive

--interactive--interactive-foreground

Accent

--accent--accent-foreground

Destructive

--destructive--destructive-foreground

Success

--success--success-foreground

Card

--card--card-foreground

Popover

--popover--popover-foreground

Surface & Chrome

Background--background

Foreground--foreground

Border--border

Input--input

Ring--ring

Chart Palette

Chart 1--chart-1

Chart 2--chart-2

Chart 3--chart-3

Chart 4--chart-4

Chart 5--chart-5