Colors
A comprehensive set of color tokens organized by category. Each token maps to a CSS variable for consistent theming across the design system.
brand-50var(--ds-brand-50)
brand-100var(--ds-brand-100)
brand-200var(--ds-brand-200)
brand-300var(--ds-brand-300)
brand-400var(--ds-brand-400)
brand-500var(--ds-brand-500)
brand-600var(--ds-brand-600)
brand-700var(--ds-brand-700)
brand-800var(--ds-brand-800)
brand-900var(--ds-brand-900)
primaryvar(--ds-primary)
primary-foregroundvar(--ds-primary-foreground)
secondaryvar(--ds-secondary)
secondary-foregroundvar(--ds-secondary-foreground)
accentvar(--ds-accent)
accent-foregroundvar(--ds-accent-foreground)
mutedvar(--ds-muted)
muted-foregroundvar(--ds-muted-foreground)
destructivevar(--ds-destructive)
destructive-foregroundvar(--ds-destructive-foreground)
chart-1var(--ds-chart-1)
chart-2var(--ds-chart-2)
chart-3var(--ds-chart-3)
chart-4var(--ds-chart-4)
chart-5var(--ds-chart-5)
gradient-fromvar(--ds-gradient-from)
gradient-viavar(--ds-gradient-via)
gradient-tovar(--ds-gradient-to)
backgroundvar(--ds-background)
foregroundvar(--ds-foreground)
cardvar(--ds-card)
card-foregroundvar(--ds-card-foreground)
bordervar(--ds-border)
ringvar(--ds-ring)