OSS Tanbou
Sign in with GitHub

Spectrum CSS

View on GitHubProject website

implement Adobe Spectrum with design tokens and independently versioned CSS components

OSS scale score Not calculatedOSS health 100
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
1,290
Primary language
CSS
License
Apache-2.0
Repository last updated
Oct 4, 2026
On this page

Overview

Spectrum CSS is the standard CSS implementation of Adobe's Spectrum design language. It exposes design tokens as CSS custom properties and publishes buttons, page styles, typography, and other components as separate npm packages.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Key features

Install only the independently versioned component packages you need

Buttons, page styles, typography, and other modules ship as separate @spectrum-css/* packages with their own versions and peer dependencies.

Sources: [1][6][5]

Switch themes and scales through design tokens and CSS custom properties

@spectrum-css/tokens exposes Spectrum design data as CSS variables used by component styles for visual language, color theme, and scale contexts.

Sources: [1][4]

Use a framework-agnostic CSS layer

Spectrum CSS is CSS-only and can sit beneath React, Web Components, or other application stacks without requiring a particular JavaScript framework.

Sources: [1]

Best fit

Fits teams that need consistent Spectrum styling across multiple frontend stacks

Shared tokens and component CSS can align applications with Adobe Spectrum while allowing each frontend to choose its own interaction layer.

Sources: [1]

Before adoption

Interaction is limited to what pure CSS can express

The README states that Spectrum CSS is CSS-only. More complex interactive components need application logic, Spectrum Web Components, React Spectrum, or another behavior layer.

Sources: [1]

There is no single repo version, and monorepo development requires Node 20.20 or later

Packages are independently versioned. The current root development package requires Node.js >=20.20.0, while the tokens/page/button packages do not declare their own engines field.

Sources: [3][4][6][5]

Official sources

  1. [1]Spectrum CSS README(2026-10-05)
  2. [2]Spectrum CSS quick start(2026-10-05)
  3. [3]Spectrum CSS monorepo package metadata(2026-10-05)
  4. [4]@spectrum-css/tokens package metadata(2026-10-05)
  5. [5]@spectrum-css/page package metadata(2026-10-05)
  6. [6]@spectrum-css/button package metadata(2026-10-05)
  7. [7]Spectrum CSS Apache-2.0 license(2026-10-05)
Supplemental curator note

Spectrum CSS does not have one repository-wide product version; component packages are versioned independently. Current main reports tokens 16.0.2, page 9.2.0, and button 14.2.0. Interaction beyond pure CSS belongs in application logic, Spectrum Web Components, or React Spectrum.

Try it in 3 steps

  1. 1

    Install a minimal Spectrum CSS component set

    Pin compatible current versions of the tokens, page, and button packages.

    demo=$(mktemp -d "${TMPDIR:-/tmp}/spectrum-css.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @spectrum-css/tokens@16.0.2 @spectrum-css/page@9.2.0 @spectrum-css/button@14.2.0
  2. 2

    Create HTML that loads tokens and button CSS

    Follow the documented quick-start pattern with tokens, page context, and a button component.

    printf "%s\n" '<!doctype html>' '<html class="spectrum spectrum--light spectrum--medium">' '<head><link rel="stylesheet" href="./node_modules/@spectrum-css/tokens/dist/css/index.css"><link rel="stylesheet" href="./node_modules/@spectrum-css/page/dist/index.css"><link rel="stylesheet" href="./node_modules/@spectrum-css/button/dist/index.css"></head>' '<body><button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"><span class="spectrum-Button-label">Button</span></button></body></html>' > index.html
  3. 3

    Verify token variables and button classes are present

    Confirm distributed artifacts contain Spectrum design-token variables and the button variant class.

    grep -q -- "--spectrum-" node_modules/@spectrum-css/tokens/dist/css/index.css && grep -q "spectrum-Button--accent" node_modules/@spectrum-css/button/dist/index.css
Check the official README

Growth

Growth trends · Last 30 days

1,290 Stars

Trend data is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • css
  • design-system
Stars
1,290
Forks
214
Watchers
46
Open issues
19
Owner type
Organization
Primary language
CSS
License
Apache-2.0
Repository last updated
Oct 4, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.

After reading this page, do you know what to do next?