---

name: design-tokens description: Design tokens for consistent styling

Design Tokens

Token Types

• Colors
• Typography
• Spacing
• Shadows
• Borders

Format

Copy:root {
  /* Colors */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  
  /* Typography */
  --font-family: system-ui;
  --font-size-base: 16px;
}

Usage

Always use tokens, never hardcode values.