Work/Traction Design System

Design SystemsEnterpriseGovernance

Traction Design System

I led Traction's four-week MVP at Discount Tire, then helped scale the design system across 16+ workstreams.

Role

Design Systems Lead

System structure, token naming, and governance
Onboarding and guidance for product designers

Team

3 designers +

1 engineer

Design team with early engineering involvement

Tools

FigmaDesign & tokens

SupernovaDocs

StorybookDev

Timeline

4 wks → 2 yr scale

W1W46mo2yr

AuditTokensMVP BuildDocs & UnifyGovernance

Designed for

desktop

tablet

mobile

TL;DR — The Outcome

What shipped

Core library delivered in a four-week MVP using structured Figma styles
First released to designers, then scaled across 16+ workstreams
Documentation and governance developed after the MVP

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

Four-week MVP
Rapid fixes and component refinements during the first month of use
Documentation, governance, and wider adoption over the following two years

~40%Lower Figma library memoryAdvanced component properties and token consolidation

16+Workstreams on one systemConsumer, enterprise & internal tools

~50%Fewer ad-hoc design requestsFirst month after docs vs. first month after MVP

3→18Active system contributorsDesigners across teams now co-own the system

01Phase_One

Audit &
Strategy

Understanding what teams already used

Audited 500+ legacy symbols and worked with engineering to define a library structure that fit the production codebase.

Context

How I got the brief

Within a month of joining Discount Tire, I volunteered to lead Traction. The team was moving from Sketch to Figma, and my experience with design systems gave me a place to contribute while I was still learning the products. We involved engineering early so the library’s structure could follow the production codebase as closely as possible.

Volunteered within a monthEarly engineering involvementShared library structureSketch → Figma migration

The Challenge:
Concurrent Execution

The Constraint

Four challenges, running in parallel.

Build

A shared library to replace fragmented components and styles.

Coverage

Consumer, B2B, and internal products with different component needs.

Alignment

A library structure that designers could use and engineering could map to the codebase.

Migration

A company-wide Sketch → Figma transition absorbed into the rollout.

All inside a rigid 4-week window before the Q3 engineering roadmap began. Traditional waterfall (audit → design → build) was impossible.

The Strategy

“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

Q3_Launch_Deadline

Week 1Week 2Week 3Week 4Week 5

Audit

Legacy Sketch Review

Design

Token Architecture

Build

Component Library

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

System_Mandates

Object: Infrastructure_System

Class: Design_Engineering

Core_LibTraction

Status: Operational

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.

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.

Sprint_VelocityBefore → After

UI Build

QA Review

Handoff

~60%avg. reduction

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.

Visual_Consistency

Before

After

1 Sourceof truth

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.

Debt_Eliminated

Rogue Color Values

370

Duplicated Components

830

Undocumented Patterns

1200

240+issues resolved

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 Root Cause

37 reds emerged from designers working in silos — each sampling color from whatever non-standardized source was closest at hand: print assets, competitor sites, one-off hover states. Legitimate local choices, none coordinated.

The Build Order

Foundations First

The standardized baseline. Stepped scales 50–900 for Primary, Secondary, and Neutral — all anchored to WCAG AA.

Semantic Tokens On Top

Built only after Foundations were locked. Never reference a raw hex — only a Foundation.

“No opinion on usage — just mathematically consistent values that the 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.

AaAaAaAaAaAa— inconsistent

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

400+Custom assets
rebuilt from scratch

Optical standardization across the full asset library. Every icon was rebuilt on a unified master grid with a consistent stroke weight.

Technical Grid

24px

Master grid

2px

Stroke weight

Domain Sets

B2C WebsiteInternal ApplicationB2B Fleet

The Search Taxonomy

Navigate

also surfaces on

mapdirectionslocationGPSpin

Alternates baked into every component’s Figma description. Find by intent, not file name.

02Phase_Two

Architecture &
MVP

“The 4-Week Sprint”

Building the core library with engineering, then refining it through the design team’s first month of use.

MVP_and_First_Rollout

Building the MVP

The four-week MVP established the core library. We released it to designers, refined it through use, and began documentation and governance after the MVP.

MVP_Core

Figma_Styles

Codebase_Structure

Structured styles

Figma did not have Variables when we built the MVP. I used color and text styles to represent the token structure, mapping the Figma names to engineering's token names.

Architecture_Layer

MVP_Core

80%Target

Usage_Target

Engineering alignment

Engineering joined early to help align the library with the production codebase. We worked through structure and naming together so designers and developers could use the same system. Our initial adoption target was 80% component usage.

Architecture_Layer

First_Month

Component_Preview: Secondary_CTA

Focus_and_Inactive_States

Completing the states

The first month surfaced missing component states, such as focus and inactive states for a secondary CTA. Defining these gave developers the intended appearance and behavior without having to pause work for a design clarification.

Architecture_Layer

Color Style Organizationv1.0

Production · Intent Collections

Text11

Brand5

Icon10

Border9

Exploration · Extended PalettesNot for Prod

Blue5

Green5

Gold4

Grey10

Grey-B4

Traction / Intent-Based Groups60 color styles

Token_Strategy

Token
Configuration
Strategy

Organizing the library around the purpose of each style.

1. Component Availability

The MVP made 95% of the components available in the library. This measured component coverage; the separate 80% usage figure was our initial adoption target.

2. Semantic Aliasing

Named by intent, not appearance — $color-text-subtle, not Grey-600. Decisions decouple from hex codes.

3. Scoped Collections

Semantic tokens grouped by intent — Text, Border, Icon, Brand. Search “text” and see only the ~10 approved options, not the full Foundations palette. The collection pre-filters the decision.

4. Extended Palettes (Exploration Only)

Blue, Green, Gold, Grey scales stay in the panel as an escape hatch for spikes, prototypes, and illustration work. Production uses the intent-based groups. We developed documentation and governance after the MVP. Exploration gets flexibility; production gets discipline.

The Naming Discussion

Shared_Structure

Mapping Figma names to code tokens.

Designers wanted names that followed the way they browsed styles and components in Figma. Engineering wanted names that followed the codebase. I mapped the Figma names to their corresponding code tokens so each team could work with its preferred structure.

Before Figma Variables

During the MVP, color and text styles represented the token structure in Figma. The mapping connected those names to the conventions engineering used in production.

Two Naming Mappings

Primitive ColorColor

Figma color styleprimary/brand_red

Mapped code tokencolor.red.500

Component Layer

Primary ButtonDefault

Figma component assetbutton/primary/red/default

Mapped background tokenbutton.primary.background.default

Styles

Figma MVP

color and text

Mapping

Naming method

Figma to code

Code

Library structure

early engineering input

The mapping kept each team's naming conventions connected to the same system.

Development_Integration

Engineering
Sync

The first release went to the design team. We kept product analysts, UX researchers, and leadership informed while designers began using the library and surfacing issues. Engineering stayed involved in the structure and component behavior.

After the MVP, we added essential components and refined existing ones. Documentation and governance became part of that work, alongside resolving the gaps found during rollout.

Storybook_Traction

🔍 Find Component...

Architecture

❯Introduction

❯Design Tokens

❯Changelog

Core_Components

Action_Button

TextInput

CheckBox

SurfaceCard

Action_Button

Active_Variable_Mapping

background: $color-brand-default;

❯_Sync_Terminal_v2.4

Live_Sync

[23:49:35]CMD:npm run tokens:build

[23:49:35]FETCH:$color-border-brand -> Red 80 (#B70E15)

[23:49:35]WARN:Deprecated variable detected: red-light-v2

[23:49:35]BUILD:Compiling 128 semantic variables...

[23:49:35]SUCCESS:Tokens injected into 16 workstreams

🔒traction.supernova.io/patterns/alerts

⚙

📖Traction_Docs

Foundations

IntroductionDesign TokensAccessibility

Patterns

AlertsForm ValidationNavigation

Status: StableModified: Feb 12, 2026

Alert
Patterns

Alerts provide contextual feedback messages for typical user actions with the help of status icons and colors.

👁 View_Code

✖

System ErrorYour connection was lost. Please retry.

✔The_Do's

The_Don'ts

Outcome · Post-Rollout

~50%

Ad-hoc inquiries

We counted requests during the first month after MVP launch and the first month after documentation release. The later month had roughly 50% fewer ad-hoc design requests.

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

After the core MVP stabilized, we expanded the documentation strategy beyond just designers and 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.

03Phase_Three

Scale &
Governance

“From ‘Policing’ to ‘Federated Contribution’”

As Traction reached 16+ workstreams, documentation and governance helped support the shared library and contributions from product teams.

Survey_Feedback

Survey Results & Feedback

The survey included 22 participants across design, development, and UX product analysis. The Traction experience results below come from six designers.

Understanding daily use

We asked people about the libraries and documentation they used, including Sketch, the legacy design system, Traction, and Supernova. The questions covered consistency, efficiency, contribution, and access to support.

What the responses showed

Consistency: Three of six designers rated Traction "Excellent" for keeping consistency. Five of six agreed that reusing its components sped up their workflow.

Asset discovery: Three of six rated finding the right assets "Good," one "Very Good," and two "Excellent." None rated it "Poor" or "Fair." The responses suggested room to improve discovery.

Contribution and efficiency: Two of six rated contributing to the library "Poor" or "Fair." Two also rated design efficiency "Fair." The responses pointed to gaps in contribution and day-to-day efficiency.

Documentation response: We restructured Supernova to follow the organization of the Figma library. The goal was to make components and their usage guidance easier to find through familiar categories across both tools.

83%Workflow agreement · 5 of 6

50%Consistency "Excellent" · 3 of 6

3.83/5

Avg overall experience

Traction

Sketch

Traction: 6 responses
Sketch: 3.25/5 · 4 responses

System Maturity · Year 2

The system earned its trust

How adoption, coverage, and governance held up across 16+ concurrent workstreams — and the numbers behind them.

All figures post-rollout

Reflection

What I carry forward

Change management is design work

Trust from eighteen designers mattered more than the token architecture.

Ship unified, not fast

Splitting into three Figma files — Tokens, Iconography, Typography — hit the sprint deadline, but cross-library mismatches made me wish I’d shipped unified.

Align the library and its documentation

Using consistent categories across Figma and Supernova connected the component library to its guidance.

A design system is a social contract

Every technical decision has a human cost worth accounting for.

Next case study

Traction Design System

TL;DR — The Outcome

Audit &Strategy

The Challenge:Concurrent Execution

Build

Coverage

Alignment

Migration

Timeline_Dynamics

StrategicObjectives

Unify the Tooling (Migration)

Architect the Foundation

Engineer for Scale (Tokenization)

Selling the System

Speed to Market

Consistency at Scale

Reduced Design Debt

Foundations:PrimitiveColor Scales

Foundations First

Semantic Tokens On Top

Foundations:Mathematical Typography

The Problem: “Eyeballed” Hierarchy

The Solution

1.125 Major Second Scale

Algorithmic Harmony

Responsive Tokens

Foundations:IconLibrary

Architecture &MVP

Building the MVP

Structured styles

Engineering alignment

Completing the states

TokenConfigurationStrategy

Mapping Figma names to code tokens.

EngineeringSync

AlertPatterns

Self-ServiceDocumentation

The Problem: Design as a Bottleneck

The Solution: Democratized Access via Supernova

Scale &Governance

Survey Results & Feedback

Understanding daily use

What the responses showed

The system earned its trust

What I carry forward

Change management is design work

Ship unified, not fast

Align the library and its documentation

A design system is a social contract

Product Card Redesign

Audit &Strategy

The Challenge:Concurrent Execution

Build

Coverage

Alignment

Migration

Timeline_Dynamics

StrategicObjectives

Unify the Tooling (Migration)

Architect the Foundation

Engineer for Scale (Tokenization)

Selling the System

Speed to Market

Consistency at Scale

Reduced Design Debt

Foundations:PrimitiveColor Scales

Foundations First

Semantic Tokens On Top

Foundations:Mathematical Typography

The Problem: “Eyeballed” Hierarchy

The Solution

1.125 Major Second Scale

Algorithmic Harmony

Responsive Tokens

Foundations:IconLibrary

Architecture &MVP

Building the MVP

Structured styles

Engineering alignment

Completing the states

Audit &
Strategy

The Challenge:
Concurrent Execution

Strategic
Objectives

Foundations:
Primitive
Color Scales

Foundations:
Mathematical Typography

Foundations:
Icon
Library

Architecture &
MVP

Token
Configuration
Strategy

Engineering
Sync

Alert
Patterns

Self-Service
Documentation

Scale &
Governance

Audit &
Strategy

The Challenge:
Concurrent Execution

Strategic
Objectives

Foundations:
Primitive
Color Scales

Foundations:
Mathematical Typography

Foundations:
Icon
Library

Architecture &
MVP

Token
Configuration
Strategy

Engineering
Sync

Alert
Patterns

Self-Service
Documentation

Scale &
Governance