Colors
Semantic color scales defined via CSS variables.
The palette is organized into semantic scales: Primary, Secondary, Background, and Destructive. To customize your theme, override these variables in your project's CSS (after importing the theme).
Primary
Used for main actions, active states, and highlights.
50
100
200
300
400
500
600
700
800
900
950
Secondary
Used for muted elements, borders, and secondary actions.
50
100
200
300
400
500
600
700
800
900
950
Background (Neutral)
Used for page backgrounds, cards, and text colors.
50
100
200
300
400
500
600
700
800
900
950