Meet Spectrum, Adobe’s Design System

Key Insights

• •

  Spectrum supports over 130 Adobe products across three business units and multiple platforms, requiring a highly scalable and flexible design system.

• •

  The design team does not implement components directly; implementation is handled by separate engineering teams, necessitating strong cross-team collaboration.

• •

  Spectrum evolved from occasional quarterly versions to individual component versioning, improving change tracking and prioritization by implementation teams.

• •

  A transparent design checklist tracks component quality and health with open issues linked to Jira tickets to prioritize fixes and improvements.

• •

  Spectrum Contributions is a sister site hosting 110+ work-in-progress components, increasing visibility and community feedback outside the core team.

• •

  A design token repository serves as a single source of truth for all component attributes like color and sizing, ensuring consistency and ease of updates.

• •

  Nate Baldwin highlights naming as the hardest ongoing challenge due to multiple platforms and diverse teams; content strategist Jess Satel assists in establishing a clear terminology.

• •

  Spectrum balances consistency and respect for platform-specific UI conventions by either skinning native components or documenting deviations explicitly.

• •

  Accessibility and color theming are managed by defining target contrast ratios first, then generating compliant colors via the custom tool Leonardo.

• •

  The Spectrum team fosters community via multiple engagement channels including Spectrum Guild quarterly meetings, town halls, office hours, and Slack, improving documentation and prioritization.

Notable Quotes