One source of truth for colours, spacing, and typography — shared between React and React Native. Here's our full setup.
Before design tokens, our web and mobile products had drifted apart. The "primary green" was three slightly different shades across different platforms. Spacing was inconsistent. Typography scales were defined separately and had diverged over two years.
Design tokens fixed this. Here's exactly how.
What are design tokens?
Design tokens are named values for design decisions — colours, spacing, radii, font sizes. Instead of hardcoding #4caf82, you reference color.accent.default. The token name is the contract. The value can change.
Our token stack
We define tokens in a single JSON file, checked into the monorepo. A build step transforms that JSON into:
- CSS custom properties for the web app
- A TypeScript object for React Native
- A Figma variables import via the Tokens Studio plugin
One source, three outputs. Figma, web, and mobile are always in sync.
The hard part: semantic tokens
Raw colour tokens (green.500) are easy. Semantic tokens (color.button.primary.background) are where it gets interesting — and where most teams give up. Semantic tokens capture intent, not just value. They're what allow dark mode and theming to work without rewriting UI code.