The Problem with Two Codebases
When you maintain a web app and a mobile app for the same product, design drift is inevitable unless you have a single source of truth for design decisions. Colours drift. Spacing drifts. Typography drifts. By the time someone notices, the two apps look like they were made by different companies.
tokens.json as the Single Source
We maintain a tokens.json file at the root of our design monorepo. It contains every design decision: colours, spacing, radii, typography scales, shadows, motion durations.
Build Pipeline
A Node script transforms tokens.json into three outputs at build time:
- CSS custom properties for the web app
- A JavaScript constants file for React Native
- A Figma plugin-compatible JSON for designers
Designers work in Figma, export token changes, commit tokens.json, and CI generates the platform outputs automatically.
What Changed After Adoption
Before tokens: design review flagged 12ÔÇô15 inconsistencies per sprint. After: fewer than 2. The remaining ones are intentional platform differences (iOS navigation patterns vs web navigation).