Design Tokens
Colors
Brand
--color-brand#1a1a1aAccent
--color-accent#3b82f6Text
--color-text#111827Text Muted
--color-text-muted#6b7280Surface
--color-surface#ffffffSurface Alt
--color-surface-alt#f9fafbBorder
--color-border#e5e7ebError
--color-error#ef4444Success
--color-success#22c55eWarning
--color-warning#f59e0bInfo
--color-info#3b82f6Overlay
--color-overlayrgba(0, 0, 0, 0.5)Typography
Heading Font
--font-headingInterBody Font
--font-bodyInterBase Size
--type-scale-base16pxSmall Size
--type-scale-sm14pxLarge Size
--type-scale-lg20pxXL Size
--type-scale-xl28pxTight Line Height
--type-line-height-tight1.2Relaxed Line Height
--type-line-height-relaxed1.6Spacing
XS (4px)
--space-xs4pxSM (8px)
--space-sm8pxMD (16px)
--space-md16pxLG (24px)
--space-lg24pxXL (32px)
--space-xl32px2XL (48px)
--space-2xl48pxBorder Radius
Small
--radius-sm0.375remMedium
--radius-md0.5remLarge
--radius-lg0.75remXL
--radius-xl1remShadows
Small
--shadow-sm0 1px 2px 0 rgba(0,0,0,0.05)Medium
--shadow-md0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)Large
--shadow-lg0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)Motion
Fast (100ms)
--duration-fast100msNormal (200ms)
--duration-normal200msDefault Easing
--ease-defaultcubic-bezier(0.4, 0, 0.2, 1)