Colors
Semantic color tokens that adapt automatically between light and dark themes.
Core Colors
Primary surface, text, and accent colors used throughout the system.
background
bg-subtle
surface
foreground
primary
primary-hover
primary-fg
secondary
secondary-fg
muted
muted-fg
card
card-fg
border
input
point
point-hover
point-fg
point-subtle
Status Colors
Semantic colors for success, warning, error, and informational states.
success
success-bg
success-fg
warning
warning-bg
warning-fg
error
error-bg
error-fg
info
info-bg
info-fg
Gray Scale
Neutral palette from 50 (lightest) to 900 (darkest).
50
100
200
300
400
500
600
700
800
900
Chart Colors
8-color palette optimized for data visualization.
chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8
Usage
Access colors as CSS custom properties or Tailwind utility classes.
/* CSS variable */
color: var(--primary);
background: var(--card);
/* Tailwind class */
className="text-[var(--primary)] bg-[var(--card)]"