Bolt Design System
Bolt began as a small component library created by a vendor team in 2021. When that team rolled off in 2023 the system was left unsupported by designers.
I volunteered to work on the system in my spare time. I read every book & article and listened to every talk I could on how to build a design system then set to work trying to get things in motion. Eventually I was resourced fulling to the design system team and have ben a leading contributor since.
Role
Information architecture
Visual design
UI design
Documentation
Tools
Figma
Storybook
Timeline
Jan 2024 - now
Status
Live
The Challenge
Revive an outdated component library, write documentation for its use for designers and developers, incorporate brand design, and more.
Challenges within the former system
The main issues with the old design system were:
• no ownership of the design system…almost completely volunteer-led from design
• incomplete documentation for how to apply styles to design work
• outdated visual design
• undefined processes for design escalation and developer handoff
Creating the foundation
This design system included a brand identity that influenced our design principles (what is our purpose) and voice & tone (what we say and how we say it).
It also included more granular details on our color palette, typography scale, iconography, and more. A huge win came when I revamped our color palette using LCH (Light, Chroma, Hue) color space principles. This allows for each color palette to scale seamlessly and accessibly.
After
Before
Adding structure with design tokens
A major understanding I came to working on the Bolt system is how much our development team relies on clear designs to decide what to code.
I spent a lot of time talking with engineers to understand their workflows and terminology to create a common language between development and design.
That language became our design token library.
Rebuilding UI and refreshing visual design
Most Bolt components needed both a structural redesign and a visual design refresh.
Many were not originally built with auto-layouts or with proper responsiveness. Visually things looked sound but everything broke in use. The visual design was also in need of a modern update.
After
Before
Documenting what's important
Design tokens were a new topic for me and my team at the beginning of this work. As I learned I wrote documentation to help the team get the hang of them.
This infographic, for example, was quick to make but serves as a learning tool that can be revisited again and again.
Planning nice-to-haves 🪄
There are things missing from the design system that we haven’t had the resources to build.
Some of them are:
• Motion design—using open source assets like Lottie or tools like Jitter
• Sound design—using either open source or paid sound libraries
• Dark mode—using Figma Variables
Launched and actively in use
Design systems are by definition always in progress because they are living organisms. The new version of Bolt Design System was launched in May 2024 with the major foundations completed—typography, color, icons, shadows, spacing & sizing, and grids. This update marked a huge investment into the stability and future of the system. Since then much more progress has been made that is reflected in the fdx Commerce Platform.