Adobe · Design system breakdown
Creative-tool design system with serious accessibility chops.
A community-authored style reference in Markdown — colors, type, spacing, and an AI-ready prompt. Unofficial; not affiliated with Adobe.
Adobe consolidated multiple internal design languages into Spectrum starting in 2018. It is the design system behind Creative Cloud and Adobe's web properties, with React Aria as its accessibility foundation.
Adobe design system org owns the spec. React Spectrum (the implementation) is open source and built on top of React Aria, which Adobe also maintains as a stand-alone library.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
spectrum-global-color-gray-50
Lightest neutral
spectrum-global-color-blue-500
Primary brand action
spectrum-alias-text-color
Theme-aware text
spectrum-global-dimension-size-200
Default spacing step
spectrum-animation-duration-200
Standard transition
spectrum-alias-border-radius-regular
Default radius
Exactly what ships in spectrum-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# Spectrum — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Adobe. "Spectrum" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Spectrum **Owner:** Adobe **Official documentation:** https://spectrum.adobe.com/ --- ## Summary Creative-tool design system with serious accessibility chops. ## Origin Adobe consolidated multiple internal design languages into Spectrum starting in 2018. It is the design system behind Creative Cloud and Adobe's web properties, with React Aria as its accessibility foundation. ## Governance Adobe design system org owns the spec. React Spectrum (the implementation) is open source and built on top of React Aria, which Adobe also maintains as a stand-alone library. ## Known for - React Aria — the accessibility primitives library is arguably more influential than Spectrum itself; many other systems (including shadcn-adjacent ones) build on it. - Density and scale handling — Spectrum supports multiple densities and platform scales out of the box. - International, RTL, and locale-aware patterns are first-class. ## Underrated - Spectrum's icon scale system (multiple sizes that are not naive scale-ups) is a useful reference. - The dialog and overlay primitives are some of the most accessible publicly available. ## Watch out for - Spectrum's visual identity is creative-tool-flavored; for enterprise SaaS or marketing, expect retheming. - React Spectrum has a learning curve — the slot-based composition style is excellent but unfamiliar to teams used to traditional component libraries. ## Design tokens (illustrative) Representative token values, restated as facts for reference. Names and values are illustrative — refer to the official tokens reference for the canonical, current set. | Token | Value | Role | | --- | --- | --- | | `spectrum-global-color-gray-50` | `#fafafa` | Lightest neutral | | `spectrum-global-color-blue-500` | `#2680eb` | Primary brand action | | `spectrum-alias-text-color` | `Adaptive` | Theme-aware text | | `spectrum-global-dimension-size-200` | `16px` | Default spacing step | | `spectrum-animation-duration-200` | `160ms` | Standard transition | | `spectrum-alias-border-radius-regular` | `4px` | Default radius | ## Style brief The identity-bearing decisions, at a glance: - **Brand / primary action:** `#2680eb` (Primary brand action) - **Body text:** `Adaptive` (Theme-aware text) - **Corner radius:** `4px` (Default radius) - **Base spacing:** `16px` (Default spacing step) ## Components worth studying - **TableView** — Virtualized, sortable, multi-select grid with full keyboard support. - **ComboBox** — Searchable select with async loading and accessible keyboard model. - **Toast** — Stacked transient notifications with priority handling. ## When to choose Spectrum Even if you don't adopt Spectrum, study React Aria. It is the most important contribution Adobe has made to the open design system ecosystem and is the substrate behind a growing share of accessible component libraries. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Spectrum by Adobe — Creative-tool design system with serious accessibility chops. Use a primary action colour near #2680eb, corner radius around 4px, and a restrained, consistent scale. Lean into what it's known for: React Aria — the accessibility primitives library is arguably more influential than Spectrum itself; many other systems (including shadcn-adjacent ones) build on it. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Spectrum docs](https://spectrum.adobe.com/) - [React Spectrum](https://react-spectrum.adobe.com/) - [React Aria](https://react-spectrum.adobe.com/react-aria/) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/spectrum) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Even if you don't adopt Spectrum, study React Aria. It is the most important contribution Adobe has made to the open design system ecosystem and is the substrate behind a growing share of accessible component libraries.
