Design Tokens
The atomic visual values that power the design system, stored in CSS custom properties.
Colors
Semantic palette optimized for dark mode.
Gray / Neutral
gray-50#fafafa
gray-100#f4f4f5
gray-200#e4e4e7
gray-300#d4d4d8
gray-400#a1a1aa
gray-500#71717a
gray-600#52525b
gray-700#3f3f46
gray-800#27272a
gray-900#18181b
gray-950#09090b
Purple (Primary Accent)
purple-400#c084fc
purple-500#a855f7
purple-600#9333ea
Status Colors
blue-500Info
green-500Success
yellow-500Warning
red-500Danger
Spacing
4px base unit scale.
spacing-1 (4px)
spacing-2 (8px)
spacing-4 (16px)
spacing-8 (32px)
spacing-16 (64px)
Shadows
shadow-sm
shadow-md
shadow-lg
shadow-xl