Blog
Guides, research and product news on design systems, tokens and keeping design and code in sync.
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.
6 min read
Product
Design system context for AI: rules files, MCP and what works
Three ways to tell an AI agent about your design system, where each one breaks, what the big public systems ship, and why the final check belongs in the pull request.
4 min read
Design systems
Figma Dev Mode and Code Connect: what they solve and what they don't
Dev Mode and Code Connect help developers go from design to code. What each does, what plans they need, and the question neither of them answers.
6 min read
Design systems
Your AI agent does not know your design system
AI agents write UI that compiles, passes tests and quietly skips your design system. The mechanics behind it, and the two layers that keep it in check.
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.
6 min read
Design systems
A design system audit in one afternoon
An honest first picture of how far your product has drifted, in one afternoon: a twelve-step checklist, the commands to run and a form for the results.
5 min read
Engineering
An SVG sprite from Figma, and when it beats components
One file of symbols instead of one component per icon: when an SVG sprite is the better choice, how to use it in React, and the gotchas that trip people up.
7 min read
Engineering
Figma icons to React components, end to end
From an icon component in Figma to a merged pull request: every step, what it produces, and the three delivery formats with real generated output.
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.