Traction Design System
How I architected a token-driven design system in 4 weeks for America's largest independent tire dealer — unifying 16+ workstreams and cutting design support requests by half.
Role
Design Systems Lead
Lead Architect — Strategy, governance & token maintenance
Mentor — Onboarding & guiding product teams
Team
3 designers +
1 engineer
Core systems pod — design-led with engineering partnership
Tools
Timeline
MVP launched in 4 wks, scaled to 16+ workstreams over 2 yrs
TL;DR — The Outcome
What shipped
- Token-driven design system — single source of truth for Discount Tire's digital org
- Powers discounttire.com, enterprise tools, and 16+ concurrent workstreams
- Supernova-hosted docs cut ad-hoc design inquiries by ~50%
My role
- Design Systems Lead, core team of 4 (3 designers + 1 FE engineer)
- Federated contribution from product designers across the org
- Owned system strategy, token architecture, governance, docs, and onboarding
Timeline
- Phase 1 (MVP): 4-week sprint timed to Q3 kick-off
- Phase 2 (Scale): 2-year continuous delivery roadmap
- Quarterly sentiment check-ins
Audit &
Strategy
“Deconstructing the Silos”
Audited 500+ legacy symbols. Defined the ‘Foundations/Semantic’ token architecture. Secured stakeholder buy-in for the Figma migration.
System_Mandates
Object: Infrastructure_System
Class: Design_Engineering
Strategic
Objectives
Unify the Tooling (Migration)
Eliminate tool fragmentation by migrating the entire organization from Sketch to Figma, establishing a single source of truth for 16+ workstreams.
Architect the Foundation
Establish a scalable governance model and documentation site to reduce onboarding time and enforce UI consistency across the enterprise.
Engineer for Scale (Tokenization)
Bridge the design-engineering gap by implementing a multi-tiered token architecture (Primitives vs. Semantic), ensuring code parity and future-proofing for dark mode/theming.
The Challenge:
Concurrent Execution
We had a rigid 4-week window to deliver the system before the Q3 engineering roadmap began. A traditional waterfall process (audit → design → build) was impossible.
“I implemented a concurrent migration strategy. Instead of waiting for a perfect system, we built the aircraft while flying it — auditing legacy Sketch files and architecting the new Figma components in parallel. This allowed us to ship the ‘Traction’ MVP precisely when engineering needed it.”
Interactive_Simulation
Timeline_Dynamics
Efficiency_Report
Failure ⚠
Linear execution exceeds the mandatory Q3 roadmap entry. Traditional handoffs create a 2-week bottleneck, pushing launch into late August.
Strategic_Outcome
System delivery: 0% at deadline
Stakeholder_Alignment
Selling the System
A design system only succeeds with executive sponsorship. I framed the investment around three pillars that resonated with leadership at Discount Tire.
Speed to Market
Pre-built, tested components eliminate redundant UI work. Teams stop rebuilding buttons and start shipping features. At enterprise scale, this compounds — 16 workstreams all pulling from one library instead of inventing their own.
Consistency at Scale
Without a system, every team interprets the brand differently. Customers moving between the e-commerce site, in-store iPads, and internal tools experienced a fractured brand. A shared library means one visual language across every touchpoint.
Reduced Design Debt
Years of ad-hoc design had created a sprawling inventory of rogue values, duplicated components, and undocumented patterns. The system audit gave leadership a concrete number to quantify the problem — and a clear path to zero.
Token_Layer_01
Foundations:
Primitive
Color Scales
The Foundations layer defines raw, context-free design tokens — the primitive color scales that every semantic alias in the system ultimately resolves to. We consolidated 37 rogue hex values into WCAG AA-compliant stepped scales (50–900) for Primary, Secondary, and Neutral palettes.
“No opinion on usage — just mathematically consistent values that the Foundations semantic layer references.”
Mathematical_Framework
Foundations:
Mathematical Typography
The Problem: “Eyeballed” Hierarchy
The legacy audit revealed a chaotic mix of font sizes — designers were manually picking values like 13px, 15px, and 17px based on personal preference. This broke vertical rhythm and made maintaining responsive behavior a nightmare across 16 workstreams.
The Solution
1.125 Major Second Scale
Replaced manual guesswork with a strict Modular Scale anchored at 16px base. Every size in the system is mathematically derived from a single ratio.
Algorithmic Harmony
Every heading level relates proportionally to body text. No more visual guessing — the math guarantees consistent vertical rhythm across every screen.
Responsive Tokens
A “Fluid Type” strategy where tokens like Heading-XL automatically map to different rem values across Desktop, Tablet, and Mobile. A headline on a 4K monitor scales down perfectly for an associate’s iPad in-store.
Asset_Standardization
Foundations:
Icon
Library
Optical standardization across 400+ custom assets. Every icon in the system was rebuilt on a unified 24px master grid with consistent 2px stroke weight, organized into domain-specific sets for Core Components, Customer Tools, and Service Operations.
“Semantic search taxonomy lets designers find icons by intent (e.g. ‘delivery’) rather than file name.”
Architecture &
MVP
“The 4-Week Sprint”
Establishing a friction-free pipeline between Design and Engineering.
MVP_Core_Pillars
Three Pillars
The 4-week sprint was structured around three non-negotiable deliverables that engineering needed to begin consuming the system.
Tokenization
We mapped Figma Variables directly to codebase JSON/CSS tokens. This automated the handoff, ensuring that a color change in design propagated to the development environment without manual translation errors.
Developer Adoption
Adoption fails when it requires effort. We integrated the system directly into the engineering workflow (Storybook), setting a KPI of 80% component usage within the first quarter to measure success.
Documentation
We moved from static PDFs to a dynamic, web-based documentation site (Supernova). This provided “non-designers” with live code snippets and accessibility guidelines, reducing DM support requests by ~50%.
Token_Strategy
Token
Configuration
Strategy
Bridging design and code with a semantic variable architecture.
1. Data-Driven Migration (The 95% Stat)
Moving from loose legacy styles to strict variables required precision. We didn’t just guess; we audited the codebase. By mapping our new primitives to existing UI patterns, we achieved 95% coverage of all production use cases in the first sprint.
2. Semantic Aliasing (Intent vs. Appearance)
We moved away from naming tokens by appearance (e.g., Grey-600) to naming by intent (e.g., $color-text-subtle). This decouples design decisions from hex codes.
Developers no longer ask, “Which grey do I use?” — the token name answers the question. This also prepares the codebase for instant Dark Mode switching.
Development_Integration
Engineering
Sync
Coordinating developer adoption across eight distinct workstreams presented a significant challenge. To ensure consistency and efficiency, we aimed for a single source of truth for all development components, regardless of the varied technologies and platforms involved.
Storybook emerged as the preferred solution for our web development teams, with discussions actively continuing for its implementation across other internal tools and platforms.
Alert
Patterns
Alerts provide contextual feedback messages for typical user actions with the help of status icons and colors.
Knowledge_Infrastructure
Self-Service
Documentation
Empowering Business Analysts and PMs with a “No-Code” reference
The Problem: Design as a Bottleneck
Traditionally, Product Managers and Business Analysts had to ping designers just to ask, “Do we have a component for this?” or “What are the rules for this alert?” This created a constant support queue that distracted the design team from strategic work.
The Solution: Democratized Access via Supernova
We expanded our documentation strategy beyond just engineers. I configured Supernova to serve as a self-service knowledge base for the entire organization.
For PMs: Clear "Do's and Don'ts" for patterns, allowing them to write accurate requirements before a designer even opens Figma.
For Stakeholders: Live previews of components, ensuring that leadership reviews the system, not just static screenshots.
The Result: This “Single Source of Truth” reduced ad-hoc design inquiries by ~50%, freeing up the team to focus on complex UX problems.
Scale &
Governance
“From ‘Policing’ to ‘Federated Contribution’”
Onboarded 16+ workstreams. Implemented the contribution model. Reduced design debt by shifting from “detached instances” to strict library usage.
Adoption Metrics & Sentiment
Quantifying the developer and designer experience (DX/UX)
The Strategy: Measuring “System Fit”
You can’t improve what you don’t measure. We launched a comprehensive Sentiment Baseline Survey targeting our primary users: Product Designers, Frontend Engineers, and Business Analysts.
The Insights:
Consistency Win: 50% of respondents rated the system "Excellent" for keeping consistency, validating our token architecture.
The Friction Point: The survey revealed that "Finding the right assets" was a friction point (rated only "Good" or "Fair" by some).
The Pivot: This data directly influenced our roadmap. We deprioritized new component creation and prioritized Search Optimization in our Supernova documentation to address the discoverability gap immediately.
System Maturity
How we maintained quality, trust, and adoption across three agile teams shipping in parallel.
Next case study