Muse Group Design System
Design System Architect · Muse Group · 2024 – Present
Designed and built a cross-platform design system at Muse Group — the company behind Ultimate Guitar (30M MAU), MuseScore (100M yearly visitors), Audacity, and other world-leading music products serving 400M+ users globally. Covered token architecture, component primitives, documentation, governance, and measurable adoption across the entire product portfolio.
Problem
- Inconsistent UI across Muse Group's product portfolio — Ultimate Guitar, MuseScore, Audacity, MuseHub, and others — spanning web and mobile platforms, with duplicated component implementations maintained by separate teams.
- No shared token system — theming changes required manual updates across codebases, taking weeks per rollout.
- Accessibility and visual quality varied between products, with no shared standards or automated enforcement.
- New feature development was slowed by the need to rebuild common UI patterns from scratch for each product.
Constraints
- Multiple products with different tech stacks and release cycles, collectively serving 400M+ users across web, iOS, Android, and desktop (Windows, macOS, Linux)
- Existing codebases with significant legacy UI patterns that couldn't be replaced all at once
- Teams with varying levels of design system familiarity and different workflow expectations
- Need to support both web (React) and mobile platforms from a shared foundation
- Scale demands: Ultimate Guitar alone handles 30M monthly active users; any component regression is immediately visible at massive scale
Role & Ownership
- Designed the token architecture (DTCG specification): Figma Variables → JSON → CSS/TypeScript/iOS/Android pipeline
- Defined component architecture: headless core primitives with product-specific composition layers
- Built quality gates in CI: Storybook as source of truth, visual regression tests, Playwright interaction tests, axe accessibility checks, performance budgets
- Established governance model: SemVer versioning, Changesets, RFC/ADR decision records, deprecation policy
- Created the dev portal and knowledge base: MDX cookbook, component selection guidance, semantic search, usage analytics
- Introduced AI agentic workflows across the DS lifecycle: automated component building and updating, Chromatic visual regression testing, unit test generation, component validation, and product UI generation from DS primitives — alongside a DS RAG assistant for engineers/designers and AI-powered PR linting
Options Considered
Incremental migration vs full rewrite
Chose incremental migration — wrapped existing components where possible and introduced new primitives alongside legacy patterns to avoid blocking product delivery.
Centralized ownership vs distributed contribution
Centralized architecture and governance with distributed contribution model — product teams can extend components through composition layers while core primitives remain centrally maintained.
Headless core vs fully styled components
Headless core with product-specific styling layers — allows each product to maintain visual identity while sharing interaction patterns, accessibility, and API contracts.
Outcomes
- 95% token coverage across frontend; theming rollout reduced from weeks to hours
- 70% reduction in visual and accessibility regressions by making tests CI release blockers
- Unified React web components, reducing bundle size and maintenance overhead
- Design system adoption increased 30% quarter-over-quarter through dev portal, starter kits, and training programs
- Component reusability improved 40% through systematic architecture (during DS Engineer phase)
- New feature development time reduced 30% (during DS Engineer phase)
Lessons Learned
- A design system succeeds as a product, not just a library — adoption requires documentation, onboarding, and measurable feedback loops, not just good components.
- Quality gates in CI are more effective than manual review for preventing regressions at scale.
- Token architecture decisions compound — getting the DTCG pipeline right early saved significant rework across platforms later.