Design Guides
The Design Guides give you a more structured way to build out your token system. Instead of typing raw values into the token table, you get controls, presets, and previews that generate the tokens for you. Good starting point if you're building from scratch.
What's in here
Four areas in the left sidebar under Guides:
| Guide | What it sets up |
|---|---|
| Color | Primary, neutral, accent, and status color palettes |
| Typography | Font pairings (sans, serif, mono) and a type scale |
| Border | Width scale and radius scale |
| Spacing | A spacing scale for padding, margins, and gaps |
How they work
Each guide page focuses on one set of tokens. You'll usually find:
- Quick Presets to get a sensible starting point in one click
- Sliders and inputs for dialing in exact values
- Live previews so you can see changes as you make them
- Accessibility checks on color guides (WCAG contrast scores, available on Pro)
Changes you make take effect in your project immediately.
Using the AI in a guide
The AI assistant works inside the guides too. Ask it to suggest a color palette, recommend a font pairing, or generate a type scale and it'll use the guide's context to help. More on that in AI Assistant.