Design tokens
Design tokens are named values for the basic decisions in a design system, like colors, type sizes, spacing and corner radii, stored so design tools and code can share them.
Area
Design systems
What it means in practice
Each raw value, like #2F6BFF or 16px, gets a name, like color.accent or space.md, and the name is used everywhere. Change the value once and it changes everywhere the token appears.
Tokens usually come in layers. Primitive tokens hold raw values (blue-500). Semantic tokens describe purpose (color.text.muted) and point to primitives. Component tokens apply to specific parts (button.background). The semantic layer is what makes theming work. Dark mode swaps which primitives the semantic tokens point to, and the components follow.
In Figma, tokens are usually set up as variables. In code, they often become CSS custom properties, generated by tools that export tokens for each platform. The W3C Design Tokens Community Group publishes a shared format so different tools can exchange tokens. Its first stable version came out in October 2025.
Why it matters for B2B and AI teams
B2B and AI companies often run several surfaces at once, such as a marketing site, a web app, docs, emails and slide templates. Tokens keep them consistent with less effort, because every surface draws on the same named values.
They also make brand changes safer. Adjusting a brand color or the spacing scale becomes an update to a few tokens, with no hunt through hundreds of files. For teams with dark mode or several product themes, tokens are close to essential.
How we approach it
We set up the core values of a system as Figma variables. Framer and Webflow both support reusable styles or variables, so the same decisions can carry into the build.
FAQ
A style guide documents values for people to read. Tokens store those values in a form that design tools and code can use directly.
A light version helps any team: a named color palette, type scale and spacing scale in Figma. Full token pipelines matter more as products and teams grow.
Yes, with plugins and build tools that export Figma variables into code formats. Setups vary, and most teams still review token changes before they ship.
Keep exploring
Related terms
Design system
A design system is a shared set of reusable components, patterns, tokens and guidelines that a team uses to design and build consistent interfaces and brand material.
Component library
A component library is a collection of reusable interface parts, such as buttons, cards, forms and navigation, designed once and used across many pages or screens.
Visual identity
Visual identity is the visible part of a brand: the logo, color, typography, graphic elements and imagery, plus the layout rules that tie them together.
Design handoff
Design handoff is the point where finished design work passes to the people who will build, run or extend it, with the files and guidance they need.
Brand guidelines
Brand guidelines are the documented rules for using a brand identity, with examples of the brand applied.
Show us what you’re working on
Book a call and walk us through what’s changing. We’ll suggest the scope that fits, or tell you if you don’t need us yet.