Design Tokens
A reference page.
Intro to Design Tokens
- Difference between primitives and styles
- Spacings
- Semantic colors
- Themeing using modes
- Grid and Breakpoints
- Token naming conventions
Grid
Sizing
| xs | 4px |
| sm | 8px |
| md | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 64px |
| 4xl | 96px |
Colors
Font
Icons
Elements
- using tokens in elements