What it is
Design tokens are the named decisions underneath a design system — color, type, space, motion and the roles they play. Done well, they are the contract that lets a designer’s change in Figma reach a developer’s build without anyone retyping a hex value.
How I approach it
I build tokens in three tiers: primitive (the raw palette and scales), semantic (roles like color-ink or color-accent), and component (the handful of values a specific component needs). Product code only ever references semantic and component tokens, never primitives — so re-theming and rebranding stay a one-layer change.
The source of truth is a DTCG-format token file. From there Style Dictionary v5 generates every target: CSS custom properties for the web, a React Native object, an SLDS theme, and whatever else the platforms need. Tokens Studio keeps Figma variables in sync so design and code read from the same document.
Common problems I solve
- Two-tier token sets where every component references raw primitives, so nothing can be themed.
- Naming that describes what a value is (
blue-500) instead of what it does (color-link). - Tokens that live in Figma and in code but drift apart because nothing syncs them.
- Theme switching bolted on after the fact instead of designed into the token layer.
This very site is built on a token pipeline like this — the colors, type and spacing you’re reading come from a DTCG source compiled with Style Dictionary.