BACK
Bolt
Work
About
Writing
Contact
Case Study · Design Systems
Bolt Design
System
Unifying eleven disjointed product surfaces into a single, token-driven system — cutting design debt, accelerating handoff, and giving every team one source of truth.
Button / Primary
Deploy
Cancel
Search components…
Dark mode
Auto-layout enabled
Radius
Elevation
Motion
Tokens
Timeline
Jan – Sep 2025
Lead Designer
Aria Solberg
Role
Systems & UX Lead
Platform
Web · iOS · Android
In a nutshell
Bolt was built to end a quiet crisis: eleven product teams shipping eleven subtly different versions of the same button, modal, and form — each one a small tax on trust, velocity, and quality.
Over nine months we audited more than 340 unique components, distilled them into a token-driven foundation, and rebuilt the core primitives with documented anatomy, interaction states, and a code-mirrored handoff. The result is a living system adopted across every surface — where a change to a token ripples instantly to production, and designers spend their time on problems worth solving instead of re-drawing dividers.
Table of contents
How the system came together
01
Context & opportunity
Where the debt lived
02
Design tokens & foundation
One source of truth
03
Component anatomy
Structure & states
04
Audit to adoption
Mood-boards & migration
05
Developer handoff
Design ↔ code
06
Testing & feedback
Micro-interactions
07
Outcome
What changed
01
Context & opportunity areas
Where the design debt was hiding
The Good
Strong product-market fit and fast-moving teams. There was real appetite for consistency — designers were already copying each other's frames, just without a shared origin.
The Bad
Four color systems, three type scales, and no shared spacing logic. Every new feature started by re-deciding decisions that should have been settled once.
The Ugly
340+ near-duplicate components in Figma, 6 button variants that looked identical but behaved differently, and accessibility regressions shipping unnoticed.
Legacy audit · button sprawl
Primary
primary-2
CTA
Btn/Blue
Action
button_main
Submit
GO
Confirm
primary_v3
Save
Eleven names, one intention. No team could tell which button was canonical, so everyone made a twelfth.
342
Unique components
6
Button variants
4
Color systems
58
Contrast failures
02
Design tokens & foundation
Decisions, made once
Type scale
Fraunces · Manrope
Display
56 / 60
Heading
32 / 40
Title
20 / 28
Body
16 / 24
Caption
13 / 18
Spacing · 4px base
space-1
4
space-2
8
space-3
12
space-4
16
space-6
24
space-8
32
Color variables
--brand-600
#4f46e5
--brand-500
#6366f1
--ink-900
#16161a
--ink-500
#71717a
--success
#10b981
--warning
#f59e0b
--danger
#ef4444
--surface
#fafafa
tokens.css
/* Semantic tokens map primitives to intent */
:root {
--color-action: var(--brand-600);
--color-action-hover: var(--brand-500);
--radius-control: 8px;
--shadow-overlay: 0 12px 32px -16px rgb(16 16 26 / .12);
}
03
Component anatomy · deep dive
Structure, spacing, and every state
Button · interaction states
Publish changes
default
hover
focus
disabled
Modal · anatomy
Invite teammate
name@company.com
Cancel
Send
padding · 16px
· header 56px
· radius 12px
· gap 8px
· shadow-overlay
Side panel
Slide-over · 4 breakpoints
Dropdown
Nested · keyboard-safe
Navigation
Rail → drawer workflow
Toast
Queue · auto-dismiss
04
Approach · audit to adoption
From scattered audit to shared vision
AUDIT / inventory
MOODBOARD / tone
Aa
Fraunces
EXPLORATION / variants
ADOPTION / rollout
Web app
100%
Admin
92%
Mobile
74%
Marketing
61%
Scroll →
The canvas became the shared brain of the org — audit, tone, exploration, and rollout tracked in one continuous space anyone could open.
06
Testing & feedback
Micro-interactions, validated by the people who use them
We ran three rounds of moderated testing and shipped an in-Figma comment loop. Every interaction state — hover, focus, empty, error — was reviewed against real tasks before it entered the library.
3
testing rounds
27
participants
94%
task success
P
Priya · PM
The focus ring is so much clearer now — QA stopped filing a11y tickets.
M
Marcus · Eng
Migrated the settings page in 40 min. Props just… matched.
L
Lena · Design
Love the toast queueing micro-interaction. Feels alive.
07
Outcome & reflection
A system that gets out of the way
Bolt turned consistency from a debate into a default. Teams stopped re-deciding spacing and started shipping. The biggest lesson wasn't technical — it was that a design system is a product with users, and adoption is a design problem in itself. We won by making the right thing the easy thing: mirrored props, live tokens, and documentation that lived where people already worked.
68%
less time to first prototype
11 → 1
sources of truth
0
contrast failures at launch
94%
component adoption in 6 mo
Previous
Horizon Analytics
Next
Ferry Wayfinding App
Aria Solberg — Product Design
© 2025 · Bolt Case Study