Discount Tire · Design systems · 2022-2024

Traction.

Leading a design system
across 16+ workstreams.

I led the move from fragmented Sketch libraries to Traction: a reusable Figma library built with engineering in four weeks, then refined and expanded across 16+ workstreams.

Design meets engineering

Figma styleprimary/brand_redCode tokencolor.red.500

Project at a glanceDiscount Tire / Traction design system

My role: Design systems leadStrategy, architecture, naming & adoption
Core team: 3 designers · 1 front-end engineerDesign and engineering built the shared foundation together
Scope: Consumer, enterprise & internalShared styles, components and guidance across product teams

Tools across the project

Figma
Supernova
Storybook

4weeks

From audit to core library

Reusable styles and components; docs followed.

16+

Workstreams supported

Consumer, enterprise and internal tools.

~40%

Lower Figma library memory

Component properties and token refinement.

~50%

Fewer ad-hoc design requests

First month after docs vs. after MVP.

Why the system needed to change

Repeated decisions.
Inconsistent foundations.

Years of independent product work had left colors, type and components inconsistent. The move from Sketch to Figma was an opportunity to establish shared standards, rather than carry that fragmentation into a new tool.

Legacy Sketch symbols: 500+
Versions of brand red: 37
Competing body sizes: 13 / 15 / 17px

Scope and delivery

Four weeks to align the teams
and deliver the core library.

The next engineering roadmap needed a usable core. I scoped the MVP around reusable styles and components, brought engineering into the architecture decisions and deferred documentation until after release.

Delivery

Run the audit and build together.

Parallel work gave the team a usable core sooner. The tradeoff was a focused release, followed by refinements from real use.

Partnership

Agree on the structure early.

I involved engineering early and mapped naming conventions to fit how both teams worked.

Adoption

Plan beyond the first release.

After launch, we expanded essential components, refined states and developed documentation and contribution guidance.

Delivery strategy

Why work in parallel?

Compare the sequencing

SequentialConcurrent

Start4-week targetLater

Overlapping work, earlier feedback.

Click a phase to keep its details open. Sequencing is illustrative.

The chosen approach4weeksA usable core, ready for the team.

Delivery decision

Deliver the core in four weeks.

Review existing patterns while the core library takes shape. Feed gaps into the build as they emerge.Complete the inventory before the next handoff. Architecture and build wait for the audit.Align library structure and naming with engineering while components are being built.Resolve structure and naming after the audit. Component work starts after this handoff.Build essential components alongside the audit. Ship the four-week MVP, then refine gaps from real use.Build after audit and architecture are complete. The usable core arrives later in this comparison.Audit Sketch and build Figma together. Deliver the core in four weeks; refine gaps after release.Complete each phase before the next. More certainty at handoffs, but a later usable core.Audit Sketch and build Figma together. Deliver the core in four weeks; refine gaps after release.

What we built / Shared foundations

Replace individual choices
with a shared vocabulary.

A common palette, Lato type scale and icon families gave teams consistent starting points. Naming colors by their purpose made those foundations usable in an interface.

01 / Color values

From values to semantic roles.

Choose a foundation color to see how a semantic role defines its use.

Choose a primitiveBrand red#E6121ABrand black#121213Subtle gray#333336

Semantic role$color-text-brandAlias: Red 60

Role applied to textReady for the next step.

Shared values, applied through semantic roles.

$color-text-brand

Brand red → $color-text-brand

02 / Typography

A consistent type hierarchy.

1.125Major Second

Traction / Typography specificationLive specimen

Try your own text

Made for real work.

Lato · Heading L · 28px · Weight 700Desktop headings

View original specificationsTypography reference

Typography examples from the original case study
Role	Font	Size	Weight	Context
Heading XL	Lato	36px	900	4K monitors and large hero
Heading L	Lato	28px	700	Desktop section titles
Heading M	Lato	22px	700	Tablet headers
Body default	Lato	16px	400	Global body copy
Caption	Lato	12px	500	Associate iPad tools

03 / Iconography

Find by intent.

400+Custom icons

Traction / Iconography specificationLive examples

Search these examples by meaning

Actual size / 1×

Find a location

24px example in an interface

24px master · 2px strokeConstruction reference / 4×

Compare the size variants14px16px24px32px

Navigate / 24px selected

Interactive examples are reconstructed. The original CVM and WOM sheets show the project's icon drawings and optical adjustments.

Resolving the naming conflict

Two conventions.
One connected system.

Designers needed names they could browse in Figma; engineers needed names that fit the codebase. I mapped the two instead of asking either team to abandon its conventions.

Follow the red value below: a foundation supplies the color, a semantic role names its purpose, and a component uses it. The MVP implemented this structure through Figma styles.

Follow a value into the interface.

Explore a layer

FoundationsSemanticComponents

Values → roles → components.Select a floating layer or use the controls above.

Apply the same primitive to

Button fillHeadline

Illustrative live preview

Made for real work.

Shared styles. Consistent intent.

Same primitive, applied to the button.

ValueRoleComponent

Project naming reference

Figma color styleprimary/brand_red

Engineering primitivecolor.red.500

From the library to implementation

Agree on behavior.
Carry it into code.

Figma components connected to Storybook so design and engineering could review the same variants and states. Change a shared control below to see both representations update together.

One component, two connected references

A shared component reference.

Connected examples

Shared variant

PrimarySecondary

FigmaComponent reference

VariantPrimaryStaterestLabelView options

StorybookComponent story

Illustrative story args

variant: "primary"
state: "rest"
color: "red"
icon: true

Original red-primary mapping

button/primary/red/defaultbutton.primary.background.default

Shared reviewVariantsIntended statesToken usage

Reconstructed Figma and Storybook previews share controls with the component playground.

Shared standards
across different products.

Original product patterns and icon libraries from Figma. Open each artifact to inspect it at full resolution.

Original Figma artifact

Product listing patterns

Product listing patterns, 1 of 3

Supporting adoption after the MVP

Make the guidance
part of the library.

We developed documentation for designers, engineers and product teams, covering usage, implementation and contributions. Ad-hoc design requests fell by about 50%, comparing the first month after documentation with the first month after MVP launch.

Find guidance for

DesignEngineeringProduct

TractionShared guidance

Library structure / Foundations

Choose by intent

Use the Text, Icon, Border and Brand groups for production work. The shared naming structure connects the design styles to their code references.

Familiar categories

Navigation concept illustrating the shared structure and audience-specific guidance.

What the survey showed

Designers saw the value.
The feedback guided our next steps.

Five of six designers said reuse sped up their work. All six rated support for accessible design and token use Good or better; five rated consistency Good or better.

5/6

agreed reusing components sped up their workflow.

Reuse / agreement question

3Strongly agree2Agree1Neutral

Designer experience

Six responses · Mean /5 · Good or better /6

Designer experience: all ratings, mean score and number who rated each area Good or better. Six responses per question.
Area	Poor	Fair	Good	Very Good	Excellent	Mean /5	Good or better
Consistency	0	1	1	1	3	4.00	5/6
Accessible design	0	0	2	1	3	4.17	6/6
Token use	0	0	3	1	2	3.83	6/6
Asset discovery	0	0	3	1	2	3.83	6/6
Contribution	1	1	1	0	3	3.50	4/6
Requesting changes	0	1	1	2	2	3.83	5/6
Overall experience	0	1	1	2	2	3.83	5/6
Design efficiency	0	2	2	1	1	3.17	4/6

Six designer responses per question. Self-reported ratings; not timed delivery data.

What we took forward

Keep the foundations.
Improve the path to using them.

Reuse and the shared foundations were working. Contribution and discovery feedback helped identify where guidance needed to be clearer.

We reorganized Supernova to mirror Figma and clarified contribution guidance, building on the value designers already saw in the library.

Supporting 16+ workstreams

Let teams extend.
Keep the library coherent.

Product teams proposed additions for their needs. The core team reviewed quality, token alignment and accessibility before those additions entered the shared library. A clear path let teams contribute while keeping shared standards intact.

Contribution model

From product need to shared pattern.

Try a product context

ConsumerEnterpriseInternal tools

Start with a product need.

Describe the use case and check existing patterns before proposing an addition.

Proposed useVehicle selector

Find tires for your vehicle

Help a customer find tires that fit.

Core review checks

Quality
Token alignment
Accessibility

Illustrative workflow and vehicle-selector example.

What I carry forward

A design system needs
ongoing ownership.

I would carry forward three priorities: agree on how teams work together, scope the first release carefully and improve the system through real use.

Traction.

Leading a design systemacross 16+ workstreams.

From audit to core library

Workstreams supported

Lower Figma library memory

Fewer ad-hoc design requests

Repeated decisions.Inconsistent foundations.

Four weeks to align the teamsand deliver the core library.

Run the audit and build together.

Agree on the structure early.

Plan beyond the first release.

Why work in parallel?

Find the recurring needs.Agree on the shared structure.Deliver a usable core.Deliver the core in four weeks.Complete each phase in sequence.Deliver the core in four weeks.

Replace individual choiceswith a shared vocabulary.

From values to semantic roles.

Two conventions.One connected system.

Agree on behavior.Carry it into code.

Shared standardsacross different products.

Component coveragewas only the starting point.

Release the core

Refine the behavior

Support ongoing adoption

Define the behavior of every state.

Make the guidancepart of the library.