Translating brand values into a system
designers can actually use
Role: Design Lead
Scope: End-to-end, Solo
Stack: Figma · Framer
Surfaces: Brand · Marketing site · Product
Category: AI Voice SaaS · Enterprise
01 - The problem
Vox had strong values and a website that undermined all of them
Directed to campaigns & automations
Agency replacement
Vox is a media outlet built around a clear mission: make the complex world easier to understand. Their stated commitments — transparency, accessibility, and identity — aren't just marketing language. They're the standard Vox holds itself to in its editorial work every day.
The website told a different story.
Vox's brand calls for honesty and clarity. The interface was doing the opposite — hiding hierarchy under inconsistency, excluding users through contrast failures, and creating a visual language so fragmented that no two pages felt like they came from the same publication.
The question we started with wasn't "what should a design system include?" It was: if Vox's values are real, what does it look like when those values are failing in the UI?
02 - The Audit
34 typographic styles. 15 color swatches. 8 CTA variants. No system.
We started by building a complete interface inventory — every element on Vox's website captured, categorized, and evaluated. Colors, typography, navigation, buttons, icons, cards, interactive elements, blocks. Following Brad Frost's Interface Inventory methodology, the goal wasn't to find problems — it was to see the full picture before forming opinions about it.
The full picture was bad.
Inconsistencies ran through everything. 8 distinct CTA button styles. 12 link styles. 12 title styles. 34 total typographic styles across the site. 15 color swatches with no evident token logic. These weren't isolated decisions made by different teams at different times — they were design debt that had compounded without a shared reference to stop it.
Confusing hierarchies showed up in the bylines. Four distinct byline styles, each with a different font treatment, creating a visual hierarchy that was entirely unintentional. Readers absorbing signals about what content matters from the design — and those signals were noise.
Accessibility failures were the most serious finding. Several elements didn't pass WCAG color contrast standards at either AA or AAA rating. Some interactive elements had no visible focus states at all. A publication committed to making information accessible to everyone was failing the users who needed that commitment most.
These aren't cosmetic problems. Inconsistency raises cognitive load. Confusing hierarchy disrupts reading flow. Accessibility failures exclude people from content entirely. Each one is a small breach of the values Vox publicly stands by.
03 - Definition
The name came before the system. That was intentional.
Naming a design system is not a branding exercise. It's a constraint. Whatever you call it locks in what the system is supposed to do — and more importantly, what it isn't allowed to stop doing.
We ran through a lot of options. Most of them were functional: names that described what the system was or how it worked. We kept coming back to the same problem: Vox's existing brand inconsistency wasn't a technical failure, it was a values failure. The system we were building needed to hold designers accountable to something beyond visual consistency.
TBH — To Be Honest — came from that pressure. It's Vox's own standard applied back to the design practice. Honest color usage. Honest hierarchy. Honest accessibility. A system named TBH can't quietly ship a component that fails contrast, because the name itself is a commitment.
The design principles followed from the name, not the other way around:
Bold — Unapologetically distinct. Fearlessly creative. Vox has a strong editorial voice; the design system shouldn't sand it down.
Purposeful — User-centric. Clarity through simplicity. Every element should earn its place.
Inclusive — Embrace diversity. Empowerment through accessibility. Not a checkbox — a constraint baked into every token and component from the start.
04 - Creation
Three decisions worth unpacking
Building the UI kit was nine weeks of decisions. Most were straightforward once the principles were in place. Three weren't.
1
We spent a whole work session on tokenization. Simpler won.
Color tokenization sounds like an infrastructure problem until you're in it. We knew we needed tokens — raw hex values in components are a maintenance nightmare at scale — but the question of how many tiers of abstraction to build took longer than expected.
The tempting answer was comprehensive: primitive tokens → semantic tokens → component tokens. Three tiers, maximum flexibility, fully scalable. The problem was we were building for a specific website, not an enterprise platform. Three tiers of abstraction for a system Vox's designers would need to understand, adopt, and maintain in practice was over-engineering the problem.
We landed on a selective 3-tier system — but applied with restraint, not by default. Not every token needed three tiers. The decision at each level was: does this abstraction add clarity, or does it add complexity? Where the answer was complexity, we stopped one tier earlier.
Four core colors. A token system simple enough to explain in a single work session. Flexible enough to scale if Vox's needs grew.
2
One component. Seventy-five variations.
The CTA button is the most-used element on any media site. Vox had 8 versions of it with no shared logic. Our goal wasn't to design 8 better buttons — it was to design one button that could become all 8 through a consistent internal structure.
Using Figma Variants and Variables, we built a single Button component with properties for type (primary, secondary, ghost), size (large, medium, small), state (default, hover, focus, disabled), and icon presence (leading, trailing, none). Every combination that Vox's designers would realistically need — all derivable from one component, all guaranteed to be consistent with each other because they share the same token foundation.
The result: 1 component, 75 possible variations. Any designer pulling from the library gets a button that's already correct — no decisions to relitigate, no drift possible.
3
We tested it. Users couldn't find half of it.
Before shipping, we ran usability testing — asking participants to recreate the Vox homepage using the TBH UI Kit in Figma. The task was deliberately familiar: if designers who weren't involved in building TBH couldn't use it comfortably, the system would fail in the real world regardless of how well it was constructed.
The finding was humbling. Users could locate almost every component by browsing the kit, but they couldn't find many of them by searching. The names we'd given components internally didn't match the vocabulary designers actually use. What we called a "selector," someone else called a "dropdown." What we called a "tag," someone else called a "chip" or a "badge."
A design system with components no one can locate is a design system no one will use. We renamed elements to match user vocabulary and added missing variants that the test revealed were needed. The kit was updated. That's not a flaw in the process — it's the process working.
05 - Documentation
A system no one can find is not a system.
The UI Kit was only half the work. Components in a Figma file are raw material — they need context to be usable. When to use this component. Why this token, not that one. What combinations pass accessibility standards. What the contribution process looks like for a team adding new elements over time.
We documented TBH on Zeroheight, which integrates directly with Figma — changes to the kit propagate into the docs without a manual sync step. That integration mattered because it meant documentation wouldn't drift from the kit as the system evolved.
The documentation covers: design principles, accessibility guidelines, the full color system and token logic, typography, layout, iconography, spacing, borders, shapes — then every component with usage guidance, and finally design patterns for the recurring page sections Vox's designers would be assembling most often.
The release notes section is there deliberately. It signals that TBH is maintained, not frozen. A design system with a changelog is one that someone takes responsibility for.
View the live documentation →
06 - The pitch
We had to sell it before anyone would use it.
Across enterprise and SME
voice campaigns
A design system doesn't adopt itself. Even a well-built one needs a moment where designers and stakeholders understand what they're getting, why it exists, and what it costs them not to use it.
Our pitch to a group of hypothetical Vox stakeholders was structured around that problem — not "here's what we built" but "here's what's happening without it, and here's what becomes possible with it." We opened with the inconsistency data, walked through the principles, showed the system in motion through a live demo, and closed with the ROI: a design system takes time to build and time to adopt, but the efficiency curve eventually crosses over, and then the savings compound.
The outcome: the pitch was well-received. The branding and design principles were said to be fully aligned with Vox's identity. That feedback mattered — it confirmed that TBH hadn't solved the consistency problem by flattening Vox's voice. The system was still recognizably Vox.
07 - Outcome
Well-received. Published. Maintained.
The TBH UI Kit is live on the Figma Community. It has been updated since the initial release — incorporating the vocabulary findings from usability testing and expanding component coverage based on post-launch feedback. A design system that gets maintained is a design system that worked.
The pitch was received positively. The branding was confirmed to align with Vox's identity. The documentation is live on Zeroheight and structured for contribution, not just consumption.
The work this engagement covers:
Interface inventory and accessibility audit against WCAG AA/AAA standards
Brand value translation into design principles with real constraint
Token system design — deciding when abstraction adds clarity and when it adds complexity
Full UI Kit in Figma: 17 components, 75+ button variations, 5 design patterns
Usability testing of the kit itself — and acting on what it revealed
End-to-end documentation on Zeroheight built for adoption, not archiving
Stakeholder pitch — selling a system, not just presenting one
View Figma UI Kit →
View Documentation →
View Pitch Deck →
Reflections
Design systems are governance problems wearing a design hat
The hardest part of this project wasn't building components. It was making decisions that would hold up after we stopped being in the room.
Every token, every naming convention, every accessibility constraint — these weren't just design decisions, they were rules for a practice we wouldn't be around to enforce. A design system is only as good as the discipline of the people using it. Which means the real design challenge is making the right decision the path of least resistance. If TBH's constraints are easier to follow than to work around, the system works. If they're not, the inconsistencies come back.
That's what the naming came down to. TBH isn't a clever acronym. It's a commitment made visible — to Vox's own values, applied to the design practice. A system named To Be Honest has a higher standard to meet every time a new component gets added.
What I learned: Design systems are more than UI kits. Brand values, design principles, accessibility, documentation, and governance are distilled into them — and all of that has to hold together without the people who built it around to explain it.
Skills applied: Interface auditing and inventory · Figma Variants, Variables, and Auto-Layout · Color token architecture · Accessibility evaluation (WCAG AA/AAA) · Zeroheight documentation · Usability testing · Stakeholder presentation