Guide · Design systems
Design tokens explained
Design tokens are the named, reusable values behind a design system: a colour, a spacing step, a font size, stored once under a name like "surface" or "space-4" instead of a raw hex or pixel value repeated across screens. They turn design decisions into data a whole product can share.
Last updated
What a design token is
A token is a name mapped to a value. A primitive token holds a raw value — a specific hex or pixel amount. A semantic token gives that value a role — "colour.surface" or "colour.text.muted" — so screens reference the intent, not the literal.
Referencing intent is what makes tokens powerful. A screen asks for "the surface colour," not "#ffffff," so the same screen can render correctly whatever that surface colour turns out to be.
Why tokens matter
Tokens give you one place to change a decision. Update a token and every component using it updates too, which keeps a product consistent and makes wholesale changes cheap instead of manual.
They also make a design auditable. When colour and spacing come from a named set rather than ad-hoc values, drift is easy to spot and easy to prevent.
Tokens and theming
Light and dark mode are the clearest case for tokens. The two themes are the same token names with two sets of values, so a screen built on semantic tokens renders in both without being redrawn.
Koryvant generates every screen in both themes on a shared token system, then hands off the token definitions in its stack-agnostic specs so the same names carry into the build. It is the design surface, not a running application.
Try it on your own idea
Describe your product to Koryvant and get a complete clickable prototype — every screen, every state, both themes — free to generate and preview.
Questions
- What is the difference between a primitive and a semantic token?
- A primitive token holds a raw value, like a specific colour. A semantic token maps that value to a role, like "surface" or "danger", so screens reference meaning rather than a literal value.
- How do tokens enable dark mode?
- Dark mode is the same token names with a second set of values. A design built on tokens switches themes by swapping values, not by redrawing screens.
- Does Koryvant hand off its tokens?
- Yes. Koryvant generates on a shared token system and includes the token definitions in its stack-agnostic handoff specs, so engineering builds on the same names.
Keep reading: Empty-state design, explained or Error-state design, explained. Browse all guides, or see Koryvant by product type.