spectrum-design-data

Note: for Spectrum 2 token data has been graduated to the main branch. If you need access to the S1 data, use the s1-legacy branch and v12.x.x packages on NPM.

The Spectrum token visualizer shows the token data for S1. For Spectrum 2 data, use opensource.adobe.com/spectrum-design-data/s2-visualizer/.

Spectrum Tokens Monorepo

This repo uses:

• pnpm for package management
• moon to manage task running
• Changesets for automated versioning and releasing
• Prettier for code formatting/linting
• commitlint and Convetional Commits to standardize commit messages
• husky to automate formatting of committed files and linting of commit messages

Packages in this monorepo:

Core Packages

• Spectrum Tokens design tokens for Spectrum, Adobe's design system.
• Spectrum Component Schemas JSON schemas for validating Spectrum component APIs and properties.

Design Data

• Spectrum Design Data the canonical Spectrum dataset — tokens, components, fields, mode-sets, guidelines, and registry data. This is the primary data package consumed by the SDK and tooling.
• Design Data Specification normative spec artifacts: human-readable spec (spec/), JSON Schemas, validation rule catalog (rules/rules.yaml), and conformance fixtures.
• Token Names sidecar taxonomy name objects for @adobe/spectrum-tokens, decoupled so taxonomy changes don't bump the token package. Private; delivery format TBD.
• Design System Registry (deprecated — registry data has moved to packages/design-data/registry/. Use @adobe/spectrum-design-data instead.)

Documentation & Visualization

• Spectrum Token Visualizer Tool a visualizer for inspecting S1 tokens. Published as a static site.
• Spectrum Token Visualizer Tool S2 a version of the visualizer that shows the Spectrum 2 data. Published as a static site.
• Spectrum S2 Tokens Viewer an enhanced token viewer with component usage analysis for Spectrum 2 tokens.
• Spectrum Tokens Docs a static site to show the component options API and other token data.
• Release Timeline Visualization interactive charts showing release frequency and development activity patterns. Published as a static site.
• Spectrum 2 Documentation comprehensive component guides and design principles from s2.spectrum.corp.adobe.com.

Development Tools

• Component Options Editor Figma plugin for authoring and editing Spectrum component option schemas with visual UI and JSON validation.
• Spectrum Token Diff Generator a library and cli tool that reports changes made between two schema/releases/branches.
• Optimized Diff Engine high-performance diff algorithm for large token datasets.
• Release Analyzer tool for analyzing release history and generating data for change frequency visualization.
• Token Changeset Generator automates creation of changeset files from token diff analysis.
• Spectrum Design Data MCP Model Context Protocol server providing AI assistants with structured access to Spectrum design system data.
• Design Data Agent MCP agent-facing MCP server (distinct from the general MCP above) for AI agent authoring sessions.
• Design Data Skill packaged Claude Code agent skill for consuming Spectrum design data from agent sessions.
• S2 Docs MCP MCP server providing AI assistants with access to Spectrum 2 component documentation and design guidelines.

SDK & TUI

• design-data unified CLI and interactive TUI — validate, resolve, diff, query, and migrate tokens from the command line; run bare (design-data) to launch the interactive TUI (command palette, cascade resolver, validator, four-screen authoring wizard). The TUI library lives in sdk/tui/.

Setup monorepo locally

1. Install pnpm using this guide.
2. Install dependencies

   pnpm i
   

Build all packages locally

Run build script

pnpm moon run :build

Run all tests locally

pnpm moon run :test