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.

Local development requires Node.js 20 and npm.

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

Contributing

Start with CONTRIBUTING.md and choose the workflow that matches your change:

• Engineers change blocks, scripts, styles, tools, dependency pipelines, and edge code through GitHub.
• Authors change pages, metadata, and fragments through Document Authoring (DA). Content-only changes do not require a GitHub pull request.

CONTRIBUTING.md covers both workflows in depth. Its Find the owner of a change table routes each area to its guide under docs/.

Contributor guides

Guide	Use it when
Architecture	Tracing the page lifecycle, production request path, or code ownership boundaries
Content authoring	Editing or debugging pages, metadata, fragments, preview, and publish behavior
Blocks	Adding or changing an EDS block
Tests	Choosing the correct local or CI validation
Styles	Adding CSS, tokens, color schemes, responsive behavior, or motion
Dependencies	Changing vendored code, extracted implementation data, mappings, or generated outputs
Tools	Changing DA tools, Sidekick integrations, the scheduler, or the Algolia indexer

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. The indexer runs as a GitHub Action every 12 hours.

Glossary

Term	Meaning
AEM	Adobe Experience Manager, the platform that hosts authoring and Edge Delivery Services
DA	Document Authoring, where authors edit pages, metadata, and fragments
EDS	Edge Delivery Services, which combines authored content with repository code and serves preview and published pages
Block	A repository-owned component that decorates an authored table or generated block structure
Fragment	A separately authored document reused inside other pages, such as navigation
RSP	React Spectrum, the React implementation of the Spectrum design system
SWC	Spectrum Web Components, the web component implementation of the Spectrum design system
CEM	Custom Elements Manifest, the machine-readable source used to extract SWC component metadata
Sidekick	The AEM browser extension that provides preview, publish, and custom authoring actions

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

The core test command runs the Web Test Runner unit suite plus the Node-based extraction, indexer, and link-check unit suites:

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

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:

npx playwright install chromium
npm run test:a11y

How engineering and content merge

flowchart LR
    accTitle: How engineering and content merge in Spectrum Hub
    accDescr: Content authors create and edit pages, metadata, and fragments in Document Authoring, while developers build and review blocks, JavaScript, CSS, and tools in the GitHub repository. Document Authoring previews or publishes content to Edge Delivery Services, which also receives deployed site code from GitHub and combines the two. Edge Delivery Services serves the AEM preview origin at branch--spectrum-hub--adobe.aem.page, which fronts the preview site at preview.spectrum.adobe.com, and the AEM published origin at main--spectrum-hub--adobe.aem.live, which fronts the production site at spectrum.adobe.com.

    Authors["Content authors"]
    Developers["Developers"]
    GitHub["GitHub repository<br/>Blocks · JavaScript · CSS · Tools"]

    subgraph AEM["AEM"]
        DA["Document Authoring (DA)<br/>Pages · Metadata · Fragments"]
        EDS["Edge Delivery Services (EDS)<br/>Combines content and site code"]
        DA -->|"Preview or publish content"| EDS
    end

    Authors -->|"Create and edit content"| DA
    Developers -->|"Build and review code"| GitHub
    GitHub -->|"Deploy site code"| EDS

    EDS --> PreviewOrigin["AEM preview origin<br/>branch--spectrum-hub--adobe.aem.page"]
    PreviewOrigin --> PreviewSite["Preview site<br/>preview.spectrum.adobe.com"]

    EDS --> PublishedOrigin["AEM published origin<br/>main--spectrum-hub--adobe.aem.live"]
    PublishedOrigin --> ProductionSite["Production site<br/>spectrum.adobe.com"]

    classDef people fill:#f5f5f5,stroke:#666,color:#222;
    classDef content fill:#e9f4ff,stroke:#1473e6,color:#222;
    classDef code fill:#f2edff,stroke:#7a4ce0,color:#222;
    classDef delivery fill:#fff2df,stroke:#d06b00,color:#222;
    classDef preview fill:#e5f3ff,stroke:#1473e6,color:#222;
    classDef production fill:#e8f8ee,stroke:#268e53,color:#222;

    class Authors,Developers people;
    class DA content;
    class GitHub code;
    class EDS delivery;
    class PreviewOrigin,PreviewSite preview;
    class PublishedOrigin,ProductionSite production;

Loading

Authoring and development lifecycle

flowchart TD
    accTitle: Authoring and development lifecycle
    accDescr: Content edits made in Document Authoring go straight to preview. Code developed in GitHub is committed and reviewed in a pull request before reaching preview. Preview combines content and code, and a review step asks whether the content and experience look correct. Content problems return to Document Authoring and code problems return to GitHub, while an approved page is published and served live. Feedback and new requirements from the live experience flow back into both Document Authoring and GitHub.

    DA["Edit content in DA<br/>Pages · Metadata · Fragments"]
    GitHub["Develop code in GitHub<br/>Blocks · Styles · Scripts · Tools"]

    DA -->|"Content changes"| Preview
    GitHub --> PR["Commit and review<br/>Pull request"]
    PR -->|"Code changes"| Preview

    subgraph AEM["AEM Edge Delivery Services"]
        Preview["Preview the combined page<br/>Content + code"]
        Publish["Publish the approved page"]
        Live["Serve the live experience"]
    end

    Preview --> Review{"Content and experience<br/>look correct?"}

    Review -->|"Content needs changes"| DA
    Review -->|"Code needs changes"| GitHub
    Review -->|"Approved"| Publish

    Publish --> Live
    Live --> Feedback["Feedback and new requirements"]
    Feedback --> DA
    Feedback --> GitHub

    classDef content fill:#e9f4ff,stroke:#1473e6,color:#222;
    classDef code fill:#f2edff,stroke:#7a4ce0,color:#222;
    classDef delivery fill:#fff2df,stroke:#d06b00,color:#222;
    classDef decision fill:#fff8d6,stroke:#b8860b,color:#222;
    classDef feedback fill:#e8f8ee,stroke:#268e53,color:#222;

    class DA content;
    class GitHub,PR code;
    class Preview,Publish,Live delivery;
    class Review decision;
    class Feedback feedback;

Loading