Designer

Design Tokens

Colors

Brand--color-brand#1a1a1a
Accent--color-accent#3b82f6
Text--color-text#111827
Text Muted--color-text-muted#6b7280
Surface--color-surface#ffffff
Surface Alt--color-surface-alt#f9fafb
Border--color-border#e5e7eb
Error--color-error#ef4444
Success--color-success#22c55e
Warning--color-warning#f59e0b
Info--color-info#3b82f6
Overlay--color-overlayrgba(0, 0, 0, 0.5)

Typography

Heading Font--font-headingInter
Body Font--font-bodyInter
Base Size--type-scale-base16px
Small Size--type-scale-sm14px
Large Size--type-scale-lg20px
XL Size--type-scale-xl28px
Tight Line Height--type-line-height-tight1.2
Relaxed Line Height--type-line-height-relaxed1.6

Spacing

XS (4px)--space-xs4px
SM (8px)--space-sm8px
MD (16px)--space-md16px
LG (24px)--space-lg24px
XL (32px)--space-xl32px
2XL (48px)--space-2xl48px

Border Radius

Small--radius-sm0.375rem
Medium--radius-md0.5rem
Large--radius-lg0.75rem
XL--radius-xl1rem

Shadows

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-fast100ms
Normal (200ms)--duration-normal200ms
Default Easing--ease-defaultcubic-bezier(0.4, 0, 0.2, 1)