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

Noteworthy details

This project pulls together the very best across the world of Spectrum developer tooling:

1. https://github.com/adobe/spectrum-design-data - Used to join the world of Spectrum w/ semantic HTML generated by a CMS.
2. https://github.com/adobe/react-spectrum - Used for playgrounds and developer documentation.
3. https://github.com/adobe/spectrum-web-components - Used for advanced interactions within the site as well as playgrounds and developer documentation.

Spectrum Web Components & React Spectrum

This project runs a daily GitHub Action to extract property changes from the respective implementations.