Field guide
The exact checklist I run in paid audits, across tokens, components, design↔code parity, documentation, governance, and accessibility. Run it on your product this week, and you'll find things.
Contents
Score each item, count your reds and yellows, and turn the result into a prioritized plan.
00 · How to use this
This is the same diagnostic I use in paid engagements to find where a product's UI is drifting, and what it's costing. It works whether you have a mature system or none at all.
Go lens by lens. For each item, rate it honestly using the traffic-light scale below. Don't agonize, your gut read is usually right. When you're done, count your reds and yellows: that's your prioritized backlog.
Anything red in Governance or Tokens is almost always where you're losing the most time. Components and parity drift downstream of these two, fix the foundations first.
Inconsistency is a tax you pay in rework, slow velocity, and slow onboarding, every sprint.
The foundation. Without layered tokens, theming and consistency fall apart.
color-action, surface) that components consume.A design token isn't "a color variable." Two layers, primitive and semantic, are what let the whole system flex from one place. Skip the semantic layer and every theme change becomes a manual hunt-and-replace.
One governed set beats ten drifting copies.
Seven button variants across three codebases is the symptom everyone recognizes. The cure isn't more components, it's one canonical set, complete states, and naming both design and engineering trust.
If Figma and production disagree, the system isn't real.
This is the seam I live in. Figma and the repo. When design intent survives handoff, teams stop rebuilding the same patterns and start shipping consistently.
If it's not documented, it doesn't scale.
Docs are how a system survives team changes. If "how we build UI here" lives in Slack threads, every new hire slows the whole team down.
The #1 reason systems die. Boring, and decisive.
Most systems don't die from missing components. They die from no owner, no process, no versioning. Governance isn't bureaucracy, it's the small set of rules that keeps a system alive without a full-time babysitter.
Bake it into the system, not bolt it on later.
Accessibility and quality are cheapest when they live in the system. Build them into tokens and components once, and every screen inherits them for free.
Where automation and clear workflow let one senior cover more ground.
AI doesn't replace the senior judgment, it deletes the boring 80%. Migrating components, generating docs, wiring tokens, swapping mismatched instances. Used well, one person ships like a team.
Score tally worksheet
Fill this in as you work through the checklist. The lens with the most reds is usually where to start.
| Lens | 🟢 | 🟡 | 🔴 | Top gap / note |
|---|---|---|---|---|
| 01 Design tokens | ||||
| 02 Components | ||||
| 03 Design ↔ code parity | ||||
| 04 Documentation | ||||
| 05 Governance & ownership | ||||
| 06 Accessibility & quality | ||||
| + Bonus: workflow & AI | ||||
| Total (40 checks) |
Most reds in Tokens or Governance? Fix foundations first. Mostly yellows? You're closer than you think, a focused sprint closes the gaps.
07 · Reading your score
Tally Green / Yellow / Red across all 40 checks, then find yourself below. The point isn't a grade, it's knowing what to fix first.
Your system is in good shape. The risk now is drift as you scale, governance and a light ongoing partner keep it healthy.
Real pieces are in place, but gaps (usually governance, parity, or docs) are quietly slowing teams down. A focused Foundations Sprint closes them fast.
The cracks are showing and getting more expensive every sprint. An audit maps exactly where you're losing time and what to fix first.
You don't have a real system yet, and the tax is high. Start with tokens and a core component set: the highest-ROI fixes are usually obvious once you score them.
Group your reds by lens. Sequence the fixes: foundations (tokens) → core components → parity → docs → governance. Most teams get a usable system in weeks, not a year.
08 · What to do next
More reds than you expected? I help scaling product teams turn this list into an adopted system that survives handoff.
A fixed-price diagnostic across design, code, and process: this checklist, run by a senior pair of eyes, with a prioritized, costed roadmap. Fee credited toward a build.
Tokens, a core component set, a docs starter, and the Figma↔code connection: the system foundation, built for adoption.
Ongoing governance and design engineering so the system stays healthy as the team grows.
16+ years · led Aurora at Nord/NordVPN (dozens of teams, millions of users) · design engineering in React/TypeScript · 1st place, Into Design Systems AI Hackathon 2026.
Book a free 30-minute consult: I'll give you a couple of concrete, prioritized observations on your situation. No pitch.
Get a free consultation · christophhellmuth.com · post@christophhellmuth.com
© Christoph Hellmuth · Free to share with attribution · Not for resale · Full compendium (all 5 guides) → · Survive Handoff playbook → · Pilot-First playbook → · Collaboration ebook →