Tag
#Design tokens
6 min read
Engineering
Token modes and a dark theme without duplication
A dark theme shouldn't be a copy of the light one. Keep one set of token names, switch only the values, and ship modes as CSS without letting them drift.
5 min read
Engineering
Finding hard-coded colours in a React codebase
Every hex value in a component opts it out of the design system. Search commands that find them in minutes, the false alarms to remove, and how to keep them out.
5 min read
Design systems
The W3C DTCG token format: what the standard finally settled
Six years after the group formed, the design token format has a stable version. What 2025.10 settled, what changed from the 2022 draft and what to check in your files.
7 min read
Design systems
Naming design tokens: three tiers that survive a rebrand
Flat names like blue-500 break the first time the brand changes. Three tiers of tokens keep component code untouched through a rebrand and a dark theme.
6 min read
Engineering
Style Dictionary in practice: design tokens to CSS, SCSS and TypeScript
A working Style Dictionary 5 setup for DTCG tokens, tested on a real build: references, modes, units, and a rename experiment that breaks CSS silently.
6 min read
Engineering
How to ship Figma variables to developers without an Enterprise plan
The only official API for Figma variables is Enterprise-only. Here are the three ways variables leave Figma today and where each one stops.
6 min read
Engineering
Design tokens from Figma to code without manual exports
A workflow that keeps tokens in Figma and code in sync: name tokens by purpose, compare instead of copying and deliver every change as a pull request.
6 min read
Design systems
Why production quietly drifts from your design system
Drift between design and code rarely comes from one big mistake. Here is where it comes from, why nobody sees it and when it starts to cost real money.