The problem
Every new build in my practice tended to start its own component library from scratch: its own button, its own dropdown, its own idea of what a card's border radius should be. That drift is invisible until you put several sites side by side, and it adds up to duplicated effort and a less coherent brand. One replaced all of that with a shared, themeable foundation that runs my own sites first, so it has to hold up there before it ever ships to a client's brand.
Research
Finding the drift meant comparing my own sites against each other the same way I'd audit any interface: looking for where a button, a hover state, or a spacing value quietly disagreed with itself from one site to the next. The workflow that built One follows the same loop I use for any visual QA pass: spot a defect, describe the desired outcome in plain language, implement it, then check the result against every affected state before moving on.
- A side-by-side visual audit of my own sites, looking for token and spacing drift.
- A repeating QA loop: spot a defect, describe the fix, implement, verify against every affected state.
- Every component checked in both light and dark mode before being considered done.
Design decisions
A few decisions turned One from a pile of components into something a client engagement can actually start on.
Foundation
Token-driven, not hard-coded
Radius, scale, padding, border width, shadow, and light or dark mode are all token-driven, so the same components can carry an entirely different brand identity with no component rewritten.
Accessibility
Built in, not bolted on
Focus states, contrast in both theme modes, and mobile behavior are handled at the component level, so every screen inherits them instead of a later pass having to add them back.
Theme panel
Only show the controls that apply
A typed settings map means the theme panel shows a radius slider next to a card but nothing next to a separator, which is just a line and has nothing to adjust.
Continuity
One system, not a fresh start
The registry stays internal to Experience+, but every engagement draws from the same one, themed to that client's brand from day one, so nothing about a client's foundation starts from zero.
Seven of the registry's thirty-plus component groups, illustrated: buttons, form controls, card, dialog, dropdown menu, tabs and badges, table and feedback.
Design system
The registry spans more than thirty coded components across eight categories, sitting on a full design token system underneath.
Categories
Eight categories, one registry
General, data display, forms, feedback, navigation, overlay, layout, and typography and color foundations.
Tokens
One token system underneath
An IBM Plex type family, a brand palette, and semantic tokens for success, warning, error, and info states.
Persistence
A preference that survives a refresh
Live theme customization persists to local storage, so a chosen theme is still there on the next visit.
Where it stands
The kind of defect a client project would otherwise hit mid-engagement, on their budget, One hit first, on mine: two production bugs, caught and fixed before they could reach a client's build. Both trace back to the same root cause: a class with no visible effect is almost always a missing token, not a mistake in the component.
Bug one
Hover states with no feedback
Sidebar links showed zero feedback on hover because an inline style set color, and inline styles beat Tailwind's hover classes every time. Moving that logic into Tailwind classes fixed it.
Bug two
Fine in light mode, broken in dark
Dropdown menus and avatar fallbacks referenced semantic tokens, a popover background, a muted background, that were undefined for dark mode. Auditing the token system for gaps fixed it.
Root cause
A missing token, not a mistake
Both bugs trace back to the same cause: a class with no visible effect is almost always a missing token, not a flaw in the component.
What I learned
A design system is only as strong as its token coverage. Both of the defects that mattered most traced back to a token that was undefined or only checked in one theme mode, not to a flaw in the component itself.
Visual QA
What an automated test would miss
A hover state with no feedback and a dark-mode background that quietly disappears don't fail an assertion, but they fail immediately to a trained eye.
The loop
Identify, direct, implement, verify
Pairing that judgment with AI-assisted implementation closes the loop fast enough for a small practice to run it alone.
The payoff
One person, a studio's job
That speed lets a small practice maintain a registry a whole studio would normally need to run.