Spectrum Hub

A unified view into the world of Spectrum, Adobe's design language.

Mission

Our mission is to deepen Spectrum’s adoption through a multi‑platform website experience that goes beyond documentation. Showing the breadth of our multi-platform system through engaging, educating and inspiring moments. Delivering a future focused, scalable website able to adapt to the evolution of AI.

Developing

Spectrum Hub is built on AEM Edge Delivery Services. Getting started takes a matter of seconds.

1. Clone this project to your computer.
2. Install the AEM CLI using your terminal: sudo npm install -g @adobe/aem-cli
3. Start the AEM CLI: aem up in the cloned folder.
4. Open the cloned folder in your favorite code editor and build something amazing.
5. Recommended: Install common npm packages like linting and testing: npm i.

Testing

Tests run in the browser using Web Test Runner. After installing dependencies with npm i, run the full test suite:

npm test

To re-run tests automatically as you edit:

npm run test:watch

To watch a single file:

npm run test:file:watch -- test/scripts/scripts.test.js

Integrations

Spectrum Design Data

Spectrum Design Data is used to join the world of Spectrum with semantic HTML generated by AEM Edge Delivery Services.

Spectrum Web Components & React Spectrum

Spectrum Web Components and React Spectrum have a daily GitHub Action that runs and feeds component statuses, available properties and sandbox implementations.

Algolia Search

Semantic search and AI capabilities are provided by Algolia. Given the private nature of some of the content, this mechanism also runs as a GitHub Action on a two hour basis.

Accessibility considerations

Spectrum Hub is committed to meeting WCAG 2.2 AA compliance. As a result, all content and features should be tested against these criteria.

Prefers Reduced Motion

Spectrum Hub supports the prefers-reduced-motion media query. All animations and transitions should be tested with the setting enabled on a user OS level.

Current implementations with this codebase

• Sitenav
  • when prefers-reduced-motion is true, the sitenav will not animate its width changes.
• Header
  • when prefers-reduced-motion is true, the skip link will not animate the slide transitions.
• Pages
  • when prefers-reduced-motion is true, any jump/anchor links will fallback to native browser behavior.
  • when prefers-reduced-motion is true, the page will not animate its navigation view transition.
• Cards
  • when prefers-reduced-motion is true, cards will not animate their scale changes on hover.

Testing

Automated accessibility testing (axe-core WCAG 2.2 AA scans and accessibility-tree checks) is covered in test/a11y/README.md. prefers-reduced-motion behavior itself should be verified manually by enabling the setting at the OS level.

To run Playwright/Axe automated accessibility tests:

npm run test:a11y