Sequoia – Specialized Design System
Overview
Sequoia is the unified design system for Specialized Bicycle Components, created by consolidating three legacy design systems into a single, scalable foundation. Previously, multiple design systems supported different platforms, resulting in inconsistencies across engineering, design, and rider-facing applications.
Sequoia was built to unify the brand, streamline product development, and create a shared language across design and engineering.
The goal – establish one cohesive, scalable design system that improves cross-team efficiency, ensures brand consistency, and accelerates product delivery across web and mobile platforms.
Problem
The previous legacy design system(s) created divsions amongst teams and scaling issues for future development. High level areas of concern:
- Three independent Figma libraries with overlapping components
- Inconsistent naming conventions, structure, and interaction patterns
- Design-to-code mismatches across platforms
- Redundant components built multiple times by different teams
- No centralized governance or contribution model
- High lift to roll out brand updates across surfaces
As the platform ecosystem has expanded and evolved (app, e-commerce, and b2b), inconsistencies compounded and slowed delivery.
Solution
A structured consolidation and rebuild effort grounded in audit, standardization, and governance.
Comprehensive audit
- Inventory of all components, tokens, and patterns across legacy systems
- Usage analysis to identify redundancies and edge-case components
- Gap analysis between design files and coded implementations
Foundation standardization
- Defined global design tokens (color, type scale, spacing, elevation, etc.)
- Aligned tokens with engineering variables for parity
- Established a responsive grid and layout system across breakpoints
- Built accessibility standards directly into base components
Component rationalization
- Merged duplicate components into scalable, variant-based systems
- Reduced unnecessary component permutations
- Standardized interaction states (hover, focus, active, error, loading)
- Created consistent naming and file structure conventions
Design-Engineering alignment
- Partnered with engineering to ensure 1:1 parity between Figma and code
- Implemented shared documentation for component APIs and usage
- Introduced a release and versioning process
Governance & adoption
- Defined contribution workflow and review criteria
- Documented usage guidelines and migration paths
- Led internal rollout sessions to drive adoption across teams
Outcome
- Reduced duplicated components and design debt
- Increased consistency across web and mobile surfaces
- Improved speed of feature rollout and cross-platform updates
- Created a scalable foundation capable of supporting future product expansion
Sequoia transformed a fragmented set of libraries into a cohesive, operational system – enabling teams to design and ship with clarity and efficiency.
