Design tokens
Design tokens are named values for a brand's basic design decisions, such as colors, font sizes, spacing and corner radius, stored once and reused everywhere instead of being typed in by hand.
A token has a name and a value, for example color-text-primary = #0F0F0F or space-m = 24px. When the value changes, everything that uses the token changes with it.
Why they matter
Consistency: the same blue is the same blue on every page.
Speed: a rebrand or dark mode updates tokens, not hundreds of layers.
A shared language: designers and developers use the same names.
Tokens in practice
Tokens are often layered. Base tokens hold raw values (blue-600). Semantic tokens describe a purpose (color-button-background) and point to a base token. A W3C community group works on a shared file format so tools can exchange tokens.
In Framer, tokens usually live as color styles and text styles. They are the foundation of a design system and the reusable sections in a component library. Trueform sets them up at the start of every build so the brand system carries through to every page the team adds later.
FAQ
What is the difference between design tokens and a style guide?
A style guide documents the rules. Design tokens are the actual values the design tool or code uses, so the rules are applied automatically.
Does a marketing website need design tokens?
Yes, in a light form. Named colors, type styles and spacing make every new page faster to build and keep the brand consistent.
Related terms
Design system
A design system is a shared set of reusable components, styles and rules, such as colors, typography, spacing, buttons and sections, that keeps a website or product consistent as it grows.
Brand system
A brand system is the full set of elements that define how a brand looks and sounds, including logo, colors, typography, imagery, motion, voice and rules for using them, across website, product and marketing.
Component library
A component library is a collection of ready-made, reusable interface parts, such as buttons, cards, navigation and full page sections, that teams combine to build new pages without designing each one from scratch.
Related at Trueform:
