Component Design System Guide

Spacing

Always use CSS variables for spacing, never hardcoded pixel values:

• var(--space-2): 0.5rem
• var(--space-4): 1rem
• var(--space-8): 2rem

Colors

Use semantic color tokens:

• var(--color-brand-500): Primary brand color
• var(--color-surface-0): Main background
• var(--color-text-primary): Primary text

Typography

• Headings: var(--font-display)
• Body: var(--font-sans)