Design System
System Preview
Canonical token output and shared component behavior in one place.
Light Tokens
Mode
Generated from design-system/tokens/palette.tokens.json
background
66 16% 61%
foreground
215 35% 55%
card
66 18% 66%
card-foreground
215 35% 55%
popover
66 18% 66%
popover-foreground
215 35% 55%
primary
112 71% 15%
primary-foreground
217 45% 79%
secondary
215 35% 12%
secondary-foreground
217 45% 79%
muted
66 12% 54%
muted-foreground
215 28% 45%
accent
217 45% 79%
accent-foreground
215 35% 12%
destructive
0 72% 45%
destructive-foreground
0 0% 98%
border
66 10% 48%
input
66 10% 48%
ring
215 35% 55%
chart-1
112 71% 15%
chart-2
215 35% 55%
chart-3
217 45% 79%
chart-4
66 20% 45%
chart-5
215 35% 30%
sidebar-background
215 35% 12%
sidebar-foreground
217 45% 79%
sidebar-primary
112 71% 15%
sidebar-primary-foreground
217 45% 79%
sidebar-accent
215 35% 20%
sidebar-accent-foreground
217 45% 79%
sidebar-border
215 20% 24%
sidebar-ring
215 35% 55%
Dark Tokens
Mode
Generated from design-system/tokens/palette.tokens.json
background
215 35% 12%
foreground
217 45% 79%
card
215 34% 16%
card-foreground
217 45% 79%
popover
215 34% 16%
popover-foreground
217 45% 79%
primary
112 71% 30%
primary-foreground
215 35% 12%
secondary
215 30% 22%
secondary-foreground
217 45% 79%
muted
215 25% 20%
muted-foreground
215 35% 55%
accent
215 35% 55%
accent-foreground
215 35% 12%
destructive
0 62.8% 30.6%
destructive-foreground
0 0% 98%
border
215 20% 28%
input
215 20% 28%
ring
217 45% 79%
chart-1
112 71% 35%
chart-2
215 35% 55%
chart-3
217 45% 79%
chart-4
66 24% 62%
chart-5
215 30% 30%
sidebar-background
215 35% 10%
sidebar-foreground
217 45% 79%
sidebar-primary
112 71% 30%
sidebar-primary-foreground
215 35% 12%
sidebar-accent
215 28% 20%
sidebar-accent-foreground
217 45% 79%
sidebar-border
215 20% 24%
sidebar-ring
217 45% 79%
Buttons
Shared variants from components/ui/button.tsx
Global helpers:
.ds-nav-link, .ds-nav-pill, .ds-panel, .ds-fieldFields
Inputs/selects with semantic tokens
Interaction Motion
Liquid transitions for option switching (tabs + side-menu state changes).
Liquid Tabs
Profile content panel.