Design System That Scaled From 8K to 17K+ Publishers
Building a token-based design system that eliminated the "game of telephone" between design and engineering.
Full adoption across design and engineering within the first month of launch. No one reverted to old patterns.
Estimated $50K+ in annual cost savings from reduced rework, faster handoff, and eliminated redundant design decisions.
Measured 54.18% improvement in design-to-dev workflow efficiency. Designers spent less time on specs, engineers spent less time interpreting intent.
Every component meets WCAG AA accessibility standards. Changed the brand color from #59C8E5 to #0097B2 to achieve compliant contrast ratios.
We needed a single source of truth that was always up-to-date, matched engineering's code, and could scale with the business as it grew from 8,000 to 17,000+ Publishers.
Three products with diverging UI patterns and no shared source of truth, costing the team an estimated $20-25K per year in rework and miscommunication.
When I joined Mediavine, design and engineering were playing a "game of telephone." Designers handed off static mockups, engineers interpreted them differently, and the final product rarely matched the original intent. There was no design system, no shared component library, and no token architecture. Each of the three products (Dashboard, Trellis, Create) had its own visual language. The same button could look three different ways depending on which product you were in. Every new feature meant rebuilding from scratch, and every handoff introduced drift.
No Shared Source of Truth
Design and engineering had no common reference point. Designers created mockups in one tool, engineers built in another, and the gap between intent and implementation grew with every sprint.
Three Products, Three Visual Languages
Dashboard, Trellis, and Create each evolved independently. The same UI patterns looked and behaved differently across products, confusing publishers who used all three.
$20-25K Annual Rework Cost
Without standardized components, every feature required custom builds. Engineering spent significant time interpreting design intent rather than building functionality.
Accessibility Gaps
The existing brand color (#59C8E5) failed WCAG AA contrast requirements. Without systematic accessibility checks, compliance was inconsistent and often missed entirely.
I chose alignment over perfection. Using Material UI meant engineers could map design components to code 1:1, reducing learning curve and enable immediate adoption.
The approach prioritized alignment over invention. Rather than building a custom system from scratch, I anchored the design system to Material UI (the framework engineering already used) and layered semantic meaning on top through a two-tier token architecture.
Align with engineering reality
Engineering was already using Material UI. Rather than fighting that or building a competing system, I made Material UI the foundation and customized on top of it. This meant zero migration cost and immediate buy-in.
Tokens over hard-coded values
Every color, spacing, and typography value flows through a two-tier token system: primitive tokens (raw values) and semantic tokens (contextual meaning). This enables theming, dark mode, and product-tier differentiation without touching components.
Accessibility as a foundation, not an afterthought
I changed the brand color to achieve WCAG AA compliance before building a single component. Accessibility was baked into the token layer so every component inherits it automatically.
What we built.
The design system was built in layers: tokens first, then components, then documentation. Each layer reinforced the others.
Two-Tier Token Architecture
Primitive + Semantic
The foundation is approximately 150 design variables organized into two tiers. Primitive tokens are the raw palette: colors, spacing scales, type sizes. Semantic tokens map those primitives to meaning: "primary action," "surface background," "error state." Components reference semantic tokens, never primitives directly. This means you can swap an entire theme by remapping semantics without touching a single component.
Material UI Alignment
Strategic foundation
Rather than building custom components from scratch, I customized 40-50 Material UI components with our token system. Engineers could use familiar APIs while designers maintained visual control. This eliminated the translation gap: what designers built in Figma mapped directly to what engineers had in code.
Brand Color Evolution
Accessibility-first decision
The original brand color (#59C8E5) failed WCAG AA contrast requirements. I proposed and implemented a shift to #0097B2, which achieved AA compliance while preserving brand recognition. This was a foundational decision that every component inherited automatically through the token system.
Multi-Product Theming
Three products, one system
The token architecture enabled product-tier theming: Dashboard, Trellis, and Create each got distinct visual identity while sharing the same component library. Semantic tokens controlled the differentiation. A button component is built once but looks contextually appropriate in each product.
Dark Mode and Figma Variables
System evolution
As the system matured, I added dark mode support through token remapping (no component changes needed) and migrated the entire token system to Figma Variables when the feature launched. This kept the design system aligned with modern tooling and enabled real-time theme previewing in Figma.
The receipts.
Impact was measured through adoption tracking, time studies comparing pre and post design system workflows, cost analysis, and qualitative feedback from designers and engineers.
Full adoption across design and engineering within the first month. No custom one-off components have been built outside the system since launch.
Measured improvement in design-to-development workflow efficiency. Designers spend less time on specs, engineers spend less time interpreting intent, and handoff is predictable.
Estimated annual cost savings from reduced rework, faster handoff, and eliminated redundant design decisions across all three products.
The design system supported Mediavine's growth from 8,000 to over 17,000 publishers without requiring proportional design or engineering headcount increases.
Every component in the system meets WCAG AA accessibility standards. The brand color change alone impacted every interactive element across all three products.
Approximately 150 design variables organized into primitive and semantic tiers, powering consistent theming across three products, dark mode, and accessibility compliance.
Engineering Buy-In Was Immediate
Because the system aligned with Material UI (what engineering already used), there was zero resistance. Engineers saw immediate value: less interpretation, cleaner handoff, and familiar APIs. The alignment strategy eliminated what is usually the hardest part of design system adoption.
Token Architecture Enabled Unplanned Features
The two-tier token system was built for consistency, but it unexpectedly enabled dark mode and product-tier theming with minimal effort. Because components referenced semantic tokens (not hard-coded values), adding a new theme was a token remapping exercise, not a component rebuild.
The Brand Color Change Built Trust
Proposing a brand color change could have been contentious, but presenting it as an accessibility requirement with visual proof that brand recognition was preserved actually built trust with stakeholders. It demonstrated that the design system team was thinking beyond aesthetics.
How it evolved.
Component Library Expansion
Grew from an initial set of core components to 40-50 customized Material UI components covering all common UI patterns across the three products.
Documentation and Onboarding
Created comprehensive documentation covering token usage, component guidelines, and accessibility requirements. New team members could onboard to the system independently without requiring guided walkthroughs.
What they said.
KARLYN this is so great. Make sure we save that video demo somewhere. Its a great walkthrough
already won me over. That presentation was awesome!! I think its safe to say you blew all of us away
Copy/pasting from old designs can turn into a xerox of a xerox of a xerox. This is soooo much better
I still can't get over how amazing that design system library presentation was!
OOOOOO Noooiiiice!!
What I took away.
Adoption beats sophistication
A simpler system that the team actually uses is worth more than a complex system that sits unused. Every architectural decision was filtered through "will this make adoption easier or harder?"
Align with engineering, do not compete
Building on Material UI (what engineering already used) eliminated migration friction entirely. The best design system is the one that fits into existing workflows rather than requiring new ones.
Tokens are the real product
Components get the attention, but tokens are what make a design system actually scalable. The two-tier architecture (primitive + semantic) enabled dark mode, product theming, and accessibility compliance without touching a single component.
Accessibility is a foundation, not a feature
Changing the brand color before building components meant every element inherited WCAG AA compliance automatically. Baking accessibility into the token layer is orders of magnitude more effective than auditing components after the fact.
Design systems scale people, not just pixels
The system supported growth from 8K to 17K+ publishers without proportional team growth. The real value was not visual consistency; it was operational efficiency that let a small team punch above its weight.
This design system was never about building the most impressive component library. It was about eliminating the gap between what designers intended and what engineers shipped. By anchoring to engineering reality, building on tokens instead of hard-coded values, and prioritizing adoption over perfection, the system became invisible infrastructure: the team stopped thinking about it because it just worked. That is the highest compliment a design system can receive.
Interested in working together?
Book a 15-minute chat and let's talk about your next project.