Web Design System, Aura
Fifteen button variants across two offices with no shared language.
Context
Workhuman is a B2B SaaS platform for employee recognition. Its US and Ireland design teams had developed their component libraries independently. By the time I joined, the drift was visible everywhere: inconsistent spacing, divergent type scales, and a button component that had forked into fifteen variants across both codebases, and neither of them were formally documented.
3
4
15
Problem
Fragmented user experiences from inconsistent UI, inefficient designer–developer handoffs caused by differing layout systems, and the ongoing cost of maintaining two divergent visual languages. Every handoff re-litigated decisions that should already have been settled.
“We spend 60% of our time asking the same design questions.”
Engineering, discovery interviews
The work was less about building new components and more about establishing the conditions under which both teams could stop rebuilding the same things. That meant a token layer first: named decisions about color, spacing, and typography that could travel between Figma and code without re-interpretation at each handoff.
Solution
Consolidate the fifteen buttons into one flexible component, or a small set of clearly-named ones?
While the elegant fix is one component with props for every case, the smallest surface to maintain, we weren’t struggling with too many buttons; we were struggling to find the right one and a single component just moves that into a properties panel. I shipped six, named clearly enough that you find what you need by reading. Six is more to keep in sync, and someone will eventually want a seventh.
Establishing a shared source of truth
A four-tier token model: primitives, aliases, semantic tokens, component tokens. Each tier exists so a decision made once resolves the same way everywhere it lands: in Figma, in code, and in the conversation between them.
Making the token chain visible
White button, focus state: the focus ring resolves to border/acc-default, which aliases humanity/60, which is the primitive #5B63E4 from Tier 1. One annotated component showing the whole chain did more for adoption than the documentation site did.
Name tokens the way designers think, or the way engineers think?
Designers reach for what a thing looks like, while engineers reach for where it’s used. Naming tokens the way they appear in Figma was the path of least resistance, and it broke the first time brand shifted a hue. Humanity/60 was still called humanity/60 and no longer described anything. The second pass named by role instead, so a value could change without the name going stale. The documentation matters as much as the library because designers can’t guess a token based on how it looks anymore.
Governing contribution, instead of policing it
A six-step contribution pipeline: request, validate against three-plus use cases, design review, engineering feasibility, required docs, ship. Semantic versioning, a changelog every release, six-month deprecation notices, and migration guides for breaking changes.
Impact
Over the course of the rollout, the system moved from a source of friction to the default starting point for both teams.
15 → 6
2 wks → 4 days
↓60%
92%
Learning
A design system’s users are designers and engineers, and they behave like any other user: they route around anything slower than what they already do. Aura was adopted when reaching for a component became faster than rebuilding one. Most of the work wasn’t designing components but rather removing reasons to go around them.
The tokens are the artifact while the pipeline is the product. Our two teams in two time zones didn’t need a better button, but instead, a shared way to decide what a button is and somewhere that decision survives the conversation. What outlasted me was the vocabulary and the review ritual, not the library.
Credits
Aura was built with the US and Ireland product and web design teams and the engineers who owned the component libraries on both sides. Thanks to the Ireland team, Gin, Amanda, Cameron, Jesse, and Jon, who took the arguments about naming seriously enough to make them worth having.