Menu
Design
Design tokens: why your site has them
Why your site's colors and fonts are named once and used everywhere, and what that means when you change them.
Every Starjay site has a small set of named colors and fonts called design tokens. Instead of each heading, button and background storing its own color, they all point to a name, such as primary or heading.
Why this helps
- Change once, update everywhere. Change the value of
primary, and every button, link and heading that uses it changes with it. - Consistency. When you or the AI style something, you pick from your palette and fonts, so the site doesn't drift into slightly different shades of the same color.
- Better AI results. The AI builds with your tokens, so new sections match the rest of your site.
Only colors and fonts are tokens
Colors and fonts are the parts of a brand you want to keep consistent. Spacing, sizes, corner rounding and similar settings use a standard scale of steps instead (for example, padding of 4, 6 or 8). You pick those in the Style panel.
Where to find them
Click Tokens in the left icon rail. The Design Tokens panel has these tabs:
- Colors: color scales and single swatches. See Colors.
- Typography: your font families. See Fonts.
- Brand Guide: written instructions the AI follows. See Brand guide.
How tokens grow
You don't have to set up tokens before you start. When the AI uses a new color, it's added to your tokens automatically: a standard palette color becomes a color scale, and a one-off custom color becomes a named swatch. You can rename, change or delete any of them later.
Renaming and deleting
Renaming a color or font updates every place that uses it, so nothing breaks. Deleting one removes it from every element that uses it. To change how something looks without removing it, change the token's value instead. See Colors and Fonts.