Design Tokens

Design tokens are the atomic values that form the foundation of our visual design language. They ensure consistency across all components and enable systematic design decisions.

Core Principles

Our token system follows three fundamental principles:

1. Mathematical Progression - All scales follow predictable mathematical ratios
2. Perceptual Consistency - Values are adjusted for human perception, not just math
3. Constraint-Based - Limited options force better design decisions

Token Categories

Implementation

All tokens are defined as CSS custom properties in /src/app.css:

/* Example: Spacing tokens with 8px base unit */
--space-2: 0.5rem; /* 8px - base unit */
--space-4: 1rem; /* 16px - standard */
--space-8: 2rem; /* 32px - large */

Usage Guidelines

• Always use tokens instead of arbitrary values
• Respect the constraints - if you need a value that doesn’t exist, reconsider your design
• Maintain relationships - spacing, sizing, and typography work together

Token Reference

View the complete token definitions in:

• /src/app.css - Implementation
• /.claude/rules/design-system.rules.md - Specification