Tokens
Named values — colours, sizes, type — that keep a design and its code consistent.
Overview
Tokens
A token is a named value, like a CSS variable. Instead of typing #E8B07A into ten places, you use brand — and when you change brand, everything using it changes with it. If your code uses Tailwind or CSS variables, tokens line up with how they work.
Supported tokens
Colour · Opacity · Radius · Spacing · Container · Breakpoint · Font family · Font weight · Font size · Line height · Letter spacing
Guides
Add tokens
In the app
- Open the Theme tab in the left panel.
- Press + (or Create token) and choose a kind.
- Give it a name and a value. It saves as you type.
New file? Use starter theme adds a ready-made set to adjust.
With your agent, from a design — select a frame and ask the agent to make tokens from it, saying what to include: colours, type, spacing, radius.
With your agent, from your code — open the agent in your project and ask it to create Gesso tokens from your CSS variables.
Use tokens
Fields that can take a token show a token button beside them in the right panel — for a colour, it's in the fill row. Pick a token from its list.
Detach a token
Press the detach button next to a field to keep its current value without the link.
Update tokens
Click a token in the Theme tab to change its name or value; everything using it updates. Right-click a token to duplicate it, move it up or down, or delete it. You can also ask your agent to change a token, or to set one from a colour on the canvas.
Remove tokens
Right-click a token in the Theme tab and choose Delete, or ask your agent to remove the ones you name.
What's next
On our list
- Copying tokens between files and straight into your code's theme file.
- Selecting several tokens at once.
- Text styles that bundle font, size, weight and spacing.
- Modes — light and dark, or compact — with different values per mode.