Design Mode
The Design tab gives you a 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. It's the best starting point if you're building from scratch.
The Design tab shows a lock unless your plan includes AI credits.
The nine guides
The side nav shows a Guides list of four groups and nine guides:
| Group | Guides | What they set up |
|---|---|---|
| Color | Primary, Neutral, Accent, Status | Your palettes and the shade scales behind them |
| Typography | Font Family, Type Scale | Font pairings and a sized type ramp |
| Border | Width, Radius | Border width and corner radius scales |
| Spacing | Size | The spacing scale for padding, margins, and gaps |
Covered in detail in Color Systems, Typography, and Spacing & Layout.
How they work
Each guide focuses on one set of tokens, and most of them give you:
- Presets for a sensible starting point in one click
- Sliders and inputs for dialing in exact values
- A live preview of what you're changing
- Contrast checking on the color guides
Changes take effect in your project immediately, and show up in the preview panel as you make them.
Accessibility
The color guides have an Accessibility Guides toggle, marked with a PRO badge. Turning it on grades your color pairings against WCAG contrast thresholds as you adjust them, so a failing combination is something you catch while choosing it rather than after shipping.
Using the AI in a guide
The assistant works inside the guides. Ask it to suggest a palette, recommend a font pairing, or generate a type scale and it'll use the open guide as context. There's no Group/Global scope button here; it's already scoped to the guide. More in AI Assistant.