Refactoring a live
design system
with AI.
How I used AI to refactor, clean up and fix Dynery's design system — three eras of decisions, one iOS payments app — and then re-cut it so the whole team can run it without me.
In a payments app, our active buttons looked disabled.
Built by the previous designer.
Mine — some MVP components inherited, most built to that year's decisions.
This case.
primary-container role existedThe app pre-authorizes money when you join a table. A control that reads as dead is a trust problem, not a polish problem.
“the whole light-tint side was unfinished — full of TBD”
Our taste moved. So did iOS.
iOS 26 → 27: directly referenced instances changed style even after Swap Library
All-Open-Sans had started to feel cold as the brand matured. At the same moment Apple's Liquid Glass reset what “native” looks like. Both pressures hit one file.
I could not read a file this size by hand.
I briefed AI the way I'd brief a design lead.
The judgment stayed mine; the generation was delegated. The brief audits the old system verbatim first, so before/after is provable.
One hue-stable ramp. One neutral ramp. One real “active light” role.
Names what our greys already were: iOS system grays.
#FF3B30
#FF8D28
#FFC957
#34C759
Warm colors live here, and nowhere else.
Every pairing labelled with its contrast ratio in the brief — because the brief demanded it.
The serif I specified is not the serif we shipped.
The brief's rule: one serif, applied across the whole heading tier.
BRIEF SET IN FRAUNCES · SHIPPED SET IN NEWSREADER
BRIEF SET IN FRAUNCES · SHIPPED SET IN NEWSREADER
Newsreader sits closer to the brand's tone. Where it stands today: shipped in the typed theme; ready in its first product surface, the Home Banner; the wider UI iteration that standardizes on it is planned.
The tokens became a typed theme, so the decisions can't be forgotten.
// tokens.ts · one source of truth, light + dark export const teal = { 100: '#CCEBE6', // primaryContainer · new role 700: '#00696B', // brand primary (locked) 900: '#00494A', // onPrimaryContainer }; theme.colors.primary = teal[700]; theme.colors.primaryContainer = teal[100]; theme.colors.fillDisabled = 'rgba(229,229,234,0.35)'; // Button.tsx <Button variant="primary">Confirm</Button> <Button variant="soft">Save for later</Button> // primaryContainer // disabled: neutral grey @ 0.35 — never a teal tint
React Native shaped the design back: static font weights, unitless points, no backdrop-filter. Handing off RN tokens is now part of how I deliver. Engineering owns the code; the front end I built helped them land it.
The new tokens existed. The 26,747-node product file did not know yet.
From refresh to repair.
A refreshed token set is a promise. The live file — three button generations, hundreds of Apple-kit instances — is where the promise gets tested.
Own the component. Borrow only the aesthetic.
Liquid Glass is a material, not a component identity. Radius is one token — capsule ↔ 16 in one switch.
“Adopt the liquid-glass aesthetic — drop the liquid-glass dependency.”
consolidation landed · ~700 instances decoupled · (creator's account)
AI read all 26,747 nodes and handed me a scope of work.
Done by hand this was about a month of my time — my own estimate. It read as a real cleanup project — itemized. Then I re-verified before assigning a single hour of it.
The first thing I checked did not survive.
Same screen. Opposite conclusion.
10.2% by the composite count · 68.1% on color alone — the same 32 bound nodes.
Colour, spacing, radius and type counted as one number.
Colour separated from spacing. The same 32 bound nodes, a truthful denominator.
56% active · 44% parked or hidden
the model counted the dead space
#1a1a1a “hardcoded” hexteal-500 / teal-700#3C3C43 @ 60%#7272725 of the 16 errata rows.
“AI scales whatever counting rule you give it — including the wrong one.”
“good archiving inflated the defect count — the rule must subtract dead space first”
The real defect was in the system — and it needed a decision, not a find-and-replace.
Restrict the token to non-critical supporting text; no information lives only in it; document the exception. Accepted as documented accessibility debt — not AA conformance.
A solid ≤ #767676; #727272 = 4.81:1. The road not taken.
I set the counting rule — active canvas only, color separate from spacing — and wrote it into the monthly regression, so the baseline cannot mislead itself again.
The system was mine to run. The question was whether anyone else could.
From a system for me to a system for the team.
Everything so far made the system correct. None of it made it usable by someone who is not a designer.
“What are you actually saying to the AI?”
— our head of brand partnership & investor relations, at a daily standup, after seeing my comments on a PostHog readout
the angle and the data visualization struck him — the charts were AI-generated too
The advantage was never the model. It was design judgment written into the instructions. Keeping that as a personal edge would be stubborn.
I re-cut the system for readers who can't open Figma — people and agents.
built by the COO on the same system
(creator's account)
What an external stakeholder needs is rarely a developer-ready screen. It's a framework that renders fast enough to communicate and demo with.
The next version is for people who are not designers at all.
Brand color + a quick-guide rail on every document
Which chart explains which concept
A light visual style guide so a non-designer can build an on-tone demo from their own idea
The system's next users are the people furthest from design.
The status board.
Refreshed token system — 248 variables in the migrated library
ShippedSupportedTyped React Native theme, light + dark
ShippedSupportedEngineering adopted the tokens; RN tokens now part of my handoff
ShippedCreator's accountButton consolidation, ~700 instances decoupled, migrated in batches ordered by the corrected metric
ShippedCreator's accountSecondary-text decision (follow Apple, restricted use, documented exception)
ShippedCreator's accountLight version in use by the other six people; the COO's screen is the proof
ShippedSupported (screen)Creator's account (rollout)Home Banner — the serif's first bounded product use
ReadySupportedLight version, next iteration
PlannedState says where it is in delivery. Evidence says how it is backed.
No user-facing metric is claimed. The outcome is a system that is correct, owned, cheaper to audit, delivered as tokens, and now run by people other than me.