the User — Portfolio
Strategy
Context
Validation
Outcome
Case Study — Design Systems
Bolt Design System:
eleven surfaces, one
source of truth.
Bolt’s product portfolio had grown across 11 disjointed surfaces, each
carrying its own interpretation of the brand. The User led the design and
rollout of a token-driven system — auditing 340+ components,
consolidating them into a governed library, and mirroring every token in
production code.
U
the User
Systems & UX Lead
·
Jan – Sep 2025
·
12 min read
Timeline
Jan – Sep 2025
Role
Systems & UX Lead
Scope
11 product surfaces
Team
2 designers · 4
engineers
Problem. The product infrastructure lacked a central design system, causing UI
inconsistencies. Third-party market systems restricted flexibility and ownership for
future product scaling.
Goal. Establish a proprietary, single source of truth to ensure enterprise-grade
consistency, streamline deployment, and maintain a minimal SaaS aesthetic across a
multi-product ecosystem.
◐
Color
Migrated
212
In review
86
Legacy
Feb
Mar
Apr
May
Jun
Tt
Typography
Bolt Q3 Payments Review
By the User
● Approved
4 min read
Objective: One editorial voice across eleven surfaces — Fraunces for
display, Manrope for interface, both wired to type tokens.
+
+
+
+
The Bolt
Design System
✦
AI Patterns
Bolt AI
Streaming states, confidence
displays, and human-in-the-loop
patterns — next on the roadmap.
⚲
Accessibility
Assignee
Voiceover
Assignee, not selected, menu item, (1 of
5)
ARIA names, focus order, and keyboard paths documented per component.
◈
Tokens
color.text.accent
color.text.danger
color.icon.success
color.border.subtle
≔
Navigation
F
Foundations
C
Components
P
Patterns
D
Data viz
Act I — Fragmentation. Bolt shipped fast and paid for it in variants. With no central
system, third-party UI kits filled the gap — restricting flexibility and diluting ownership
of the product’s own language.
Act II — Foundations. The User rebuilt from first principles: lightweight foundations,
semantic tokens, and strict component states — proprietary, minimal, and made to
scale across the ecosystem.
Act III — Adoption. Synced Figma and Storybook libraries made the system everyone’s.
By month nine, 94% of new screens were built from it — the default, not the exception.
01 — Research & Design Strategy
A small system, strictly focused.
The strategy prioritized lightweight foundations over exhaustive coverage — five focus
areas, each validated with the teams who would live in them.
01
Lightweight foundations
A minimal token vocabulary — color, type, space, radius —
small enough to memorize, strict enough to enforce.
02
Core interface principles
Clarity before decoration; every visual decision resolves to
a named token; passing contrast is the default.
03
Component states
Every primitive ships a full state matrix — default, hover,
focus-visible, disabled — specified with tokens, not hex.
04
Navigation structures
One model — global rail → surface tabs → local anchors —
replaced eleven ad-hoc patterns, tested for wayfinding.
05
Data visualization
A dedicated chart palette with sequential and categorical
ramps, built on the semantic color tier — so dashboards
across all eleven surfaces read as one product.
02 — Scalable & Modular
Atomic by construction.
The system follows atomic design principles: each layer references only the layer below
it, so new product requirements extend the system without breaking it — infinite
scalability with structural integrity.
atoms
Tokens
Color, type, space, radius
molecules
Elements
Buttons, inputs, badges
organisms
Patterns
Forms, modals, tables
templates
Surfaces
Dashboards, checkout,
admin
Fig. 1 — Atomic composition. The 340-component legacy inventory consolidated into 42 canonical components with no loss of capability.
03 — Collaborative by Design
The system is built collaboratively by design
and engineering teams using synced platforms
like Figma and Storybook. Shared audits and
workflows ensure everyone contributes to and
owns a single source of truth.
Figma libraries
⇄
tokens.json
⇄
Storybook
04 — Context & Opportunity
Design debt, made visible.
The User began with a full-surface inventory. The findings framed the business case:
duplicated effort, inconsistent brand expression, and accessibility exposure across
every flow. Rather than a report, the audit was presented as an interactive wall of
screenshots — leadership could see six teams shipping six versions of the same button.
340+
unique components in the legacy
inventory
11
0
shared tokens between design and
code
Six buttons, one intent
primary / cta
Continue
Continue
Continue
Continue
Continue →
CONTINUE
Fig. 2 — Six visually distinct “primary” buttons found in production — differing radius, casing, elevation, and hue. None referenced a shared style.
Contrast failures
Body text
2.1 : 1
FAIL
Placeholder
1.6 : 1
FAIL
Body text
15.9 : 1
AAA
Fig. 3 — 31% of audited text styles failed WCAG AA. Semantic color tokens later made passing contrast the default, not a per-screen decision.
05 — Component Anatomy
Primitives, specified to the pixel.
Each primitive ships as an auto-layout component with documented spacing, a full
interactive state matrix, and token references baked into every property.
Button / Primary
auto-layout · hug × hug
Continue
→
padding-y: space-3 (12)
padding-x: space-5 (20) · gap: space-2 (8)
Default
default
Hover
:hover
Focus
:focus-
visible
Disabled
disabled
Modal / Confirm
auto-layout · fixed 440 × hug
Remove teammate?
✕
This removes access to all 11 workspaces.
Their drafts stay with the team.
Cancel
Remove
header · 56h
body · space-5
footer · end-align
Destructive action pattern: danger token on the confirming action
only, focus trapped inside, Esc and scrim-click both cancel.
Documented alongside keyboard order and screen-reader labels.
Fig. 4 — Teardowns of core primitives with auto-layout specs and interactive states.
06 — Audit to Adoption
From 340 components to one library.
The User ran the rollout as five overlapping phases, pairing each design milestone with
an engineering counterpart so tokens landed in code the same sprint they landed in
Figma.
1
Inventory
Jan – Feb
Screenshot census of all 11 surfaces; 340+ components tagged and
clustered.
2
Consolidation
Feb – Apr
340 → 42 canonical components; deprecation map agreed with
each product lead.
3
Tokenization
Apr – Jun
Semantic token tiers defined; Figma variables wired to every
primitive.
4
Documentation
Jun – Jul
Usage guidance, do/don’t pairs, and accessibility notes per
component.
5
Code mirroring
Jul – Sep
Tokens exported to CSS variables; React library published; handoff
via a single spec URL.
figma.variable
accent.default
→
tokens.json
→
css
--bolt-accent-default
→
react
Fig. 5 — One token, one name, end to end: Figma variable → tokens.json → CSS custom property → React prop.
07 — Validation
Tested before it shipped.
The User ran moderated usability sessions with 12 designers and engineers across
three product teams — five tasks covering component discovery, token lookup, and
spec handoff. The result: 94% task success across all sessions.
Task success by scenario
Find the correct button variant
100%
Look up a semantic color token
92%
Assemble a settings form from primitives
92%
Trace a spec value to its code variable
83%
File a component change request
100%
“I stopped rebuilding buttons from screenshots. I search once
and it’s the right one.”
Product designer, Payments — session 7
“The spec and the code variable have the same name. Handoff is
basically a link now.”
Frontend engineer, Core — session 11
Failures clustered on token tracing — the User responded by embedding code names directly in
Figma variable descriptions, retested with 4 participants, and closed the gap.
08 — Working Model
Built collaboratively, governed strictly.
Component accessibility. Strict WCAG adherence at the token level: high-contrast
semantic pairs by default, proper ARIA labeling per component, and documented
keyboard navigation — focus order, trapping, and escape behavior.
Future roadmap. Continuous expansion toward advanced data visualization primitives
and UI optimization for AI/ML application interfaces — streaming states, confidence
displays, and human-in-the-loop patterns.
09 — Outcome
Nine months in, the system is the default —
not the exception.
Contributors
Contributor
MA
Muhammad Ahmad
Team Lead
MA
Mohtisham Ali
AH
Developer
Ali Haider
BU
Developer
Basit Obaid
AK
Developer
Abdullah Khalil
YI
Developer
Yousaf Ijaz
WA
Developer
Wasif Ali
68%
less time from concept to testable
prototype, measured across 3 sprint
cycles
11 → 1
sources of truth — one governed
library replacing eleven local style sets
94%
of new screens built entirely from
system components by month nine
Fig. 6 — Outcomes at month nine.
Bolt Design System · Jan – Sep 2025 · Systems & UX Lead
Next case study →
Contact the User