Cascade — design system for a 60-product portfolio
Multi-brand design system covering 60+ products, four sub-brands, and three platform surfaces (web, iOS, internal tools).
- Token architecture
- Component library (React + SwiftUI)
- Figma library + variables
- Token export pipeline
- Documentation site
What they needed to solve.
Cascade's portfolio had 11 different button components, 9 colour systems, and zero shared icon library. Onboarding a new designer took 4 weeks. Engineering velocity was tanking under the weight of cross-product inconsistency.
How we approached it.
A token-first design system with semantic naming, four brand themes layered on shared primitives, and a React + iOS implementation that ships with theme automation. Figma + code stay in sync via a custom token-export pipeline.
Design decisions.
- AaInter — primary
- AaSource Serif Pro — long-form
- AaJetBrains Mono — code
Three-tier tokens (primitive → semantic → component). Four brand themes layered without duplication.
- Token export pipeline (Figma → JSON → CSS / SwiftUI)
- Automated visual regression in CI
- Theme-aware Storybook with 600+ stories
What changed.
11 button variants, 9 colour systems, scattered icons, no shared docs, slow design onboarding.
Single component library, themed via tokens, Figma-in-sync, regression-protected, fast onboarding.