Colors

All colors are defined as CSS custom properties using HSL values. They adapt automatically between light and dark themes. Click any swatch to copy its CSS variable.

Brand

Semantic

Surfaces

Utility

Chart

Sidebar

Usage in Tailwind

The tokens map to Tailwind utility classes:

/* These CSS variables... */
--primary: 20.5 90.2% 48.2%;
--background: 20 14.3% 96.1%;

/* ...become Tailwind classes */
bg-primary        /* background-color: hsl(var(--primary)) */
text-foreground   /* color: hsl(var(--foreground)) */
border-border     /* border-color: hsl(var(--border)) */

Overriding colors

Override any token in your CSS after importing the defaults:

@layer base {
  :root {
    --primary: 220 90% 50%;  /* Change brand to blue */
  }
}