Spectrum

# 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/
**Visual character:** Adobe Clean everywhere, calibrated grays for judging color-critical work, and one measured blue — a system built to disappear behind creative tools.

---

## Summary

Creative-tool design system with serious accessibility chops.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Values reflect classic Spectrum; Spectrum 2 introduces a refreshed palette and shapes._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Accent / Blue 900 | `#2680eb` | `--spectrum-blue-900` | Primary accent and CTAs (classic Spectrum) |
| Gray 50 Background | `#ffffff` | `--spectrum-gray-50` | Default background (light) |
| Gray 75 Surface | `#fafafa` | `--spectrum-gray-75` | Alternate surface |
| Gray 800 Text | `#292929` | `--spectrum-gray-800` | Primary text |
| Gray 500 Border | `#b3b3b3` | `--spectrum-gray-500` | Component borders |
| Red 900 Negative | `#e34850` | `--spectrum-red-900` | Errors and destructive actions |
| Green 900 Positive | `#2d9d78` | `--spectrum-green-900` | Success states |
| Orange 900 Notice | `#e68619` | `--spectrum-orange-900` | Warnings |

## Typography

- **Display:** Adobe Clean — weights 300, 400, 700 — `'adobe-clean', 'Source Sans Pro', -apple-system, sans-serif`
- **Body:** Adobe Clean — weights 400, 700 — `'adobe-clean', 'Source Sans Pro', -apple-system, sans-serif`
- **Mono:** Source Code Pro — weights 400 — `'source-code-pro', Monaco, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xxl | `36px` | `46px` |
| heading-l | `22px` | `28px` |
| heading-m | `18px` | `23px` |
| body-m | `14px` | `21px` |
| body-s | `12px` | `18px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `40px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| regular | `4px` |
| medium | `8px` |
| full | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| dropshadow | `0 1px 4px rgba(0,0,0,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| quick | `130ms` |
| default | `190ms ease-in-out` |

## Quick start (CSS)

```css
/* Spectrum — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://spectrum.adobe.com/ */

:root {
  /* Color */
  --spectrum-blue-900: #2680eb; /* Primary accent and CTAs (classic Spectrum) */
  --spectrum-gray-50: #ffffff; /* Default background (light) */
  --spectrum-gray-75: #fafafa; /* Alternate surface */
  --spectrum-gray-800: #292929; /* Primary text */
  --spectrum-gray-500: #b3b3b3; /* Component borders */
  --spectrum-red-900: #e34850; /* Errors and destructive actions */
  --spectrum-green-900: #2d9d78; /* Success states */
  --spectrum-orange-900: #e68619; /* Warnings */

  /* Typography */
  --font-display: 'adobe-clean', 'Source Sans Pro', -apple-system, sans-serif;
  --font-body: 'adobe-clean', 'Source Sans Pro', -apple-system, sans-serif;
  --font-mono: 'source-code-pro', Monaco, monospace;

  /* Type scale */
  --text-heading-xxl: 36px /* line-height 46px */;
  --text-heading-l: 22px /* line-height 28px */;
  --text-heading-m: 18px /* line-height 23px */;
  --text-body-m: 14px /* line-height 21px */;
  --text-body-s: 12px /* line-height 18px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Radius */
  --radius-regular: 4px;
  --radius-medium: 8px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-dropshadow: 0 1px 4px rgba(0,0,0,0.15);

  /* Motion */
  --motion-quick: 130ms;
  --motion-default: 190ms ease-in-out;
}
```

## 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.

## 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. Character: Adobe Clean everywhere, calibrated grays for judging color-critical work, and one measured blue — a system built to disappear behind creative tools. Use a primary colour near #2680eb, the typeface "Adobe Clean" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. 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._