Design token
Example: A neighborhood cafe names its main color once as --brand-primary and references it everywhere, so switching the brand from rust to olive becomes a single one-line edit instead of a search-and-replace across dozens of stylesheet files.
a name for a decision, not a value
A named reference for a brand decision — a color, a font size, a corner radius, a spacing step — exported as a portable file (CSS variables, JSON, or a Figma library) so the same value lives in one place and every surface that uses it stays in sync.
Why it matters
Hex codes scattered across a stylesheet are how a brand drifts. Tokens are how it doesn't. When the palette is named once (--brand-primary) and referenced everywhere, swapping rust for olive is a one-line change instead of a search-and-replace across forty files. Brand Suite exports a starter set of tokens from any logo.
Frequently asked
What is design token?
Design token is a named reference for a brand decision — a color, a font size, a corner radius, a spacing step — exported as a portable file (CSS variables, JSON, or a Figma library) so the same value lives in one place and every surface that uses it stays in sync.
Why does design token matter for a restaurant?
Hex codes scattered across a stylesheet are how a brand drifts. Tokens are how it doesn't. When the palette is named once (--brand-primary) and referenced everywhere, swapping rust for olive is a one-line change instead of a search-and-replace across forty files. Brand Suite exports a starter set of tokens from any logo.
- Brand identity — the full visible system around your logo
- Logo lockup — mark + wordmark + optional tagline, as one unit
- Clearspace — the empty zone around a logo
- Color palette — the curated set of colors that belong to your brand
- WCAG AA contrast — accessible color contrast
- Favicon — the small icon in the browser tab
Browse all
149 terms.
Plain-English definitions for every term in your audit, organized by category.