Adobe Spectrum 2

---
name: adobe-spectrum-2
description: Apply the Adobe Spectrum 2 visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Adobe Spectrum 2, mentions Spectrum 2, Adobe Spectrum, S2, or describes pill-shaped buttons, vivid #3b63fb accent blue, warm gray neutral ramp — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Adobe Spectrum 2 Design System

Adobe's refreshed cross-app design system: warmer neutrals, a vivid #3b63fb accent blue, pill-shaped buttons, 8–10px corner radii, Adobe Clean typography, and a precise light/dark token pipeline (spectrum-design-data) that keeps Photoshop-class pro tools and consumer apps like Adobe Express on one visual language.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Adobe Spectrum 2.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Spectrum 2, Adobe Spectrum, S2, Adobe design system), or describes its traits: pill-shaped buttons; vivid #3b63fb accent blue; warm gray neutral ramp; bold 700-weight headings; token-driven light/dark theming; quiet flat surfaces with rare soft shadows.

## Design tokens

### Color palette

- background-base-color — gray-25 (token rgb(255,255,255) converted to hex): `#ffffff` (--color-bg)
- background-layer-1-color — gray-50 pasteboard layer (rgb converted): `#f8f8f8` (--color-surface)
- neutral-content-color-default — gray-800 (rgb converted): `#292929` (--color-text)
- neutral-subdued-content-color-default — gray-700 (rgb converted): `#505050` (--color-text-muted)
- accent-color-900 / blue-900 — buttons, selection (rgb(59,99,251) converted): `#3b63fb` (--color-accent)
- accent-color-1000 / blue-1000 — pressed state (rgb converted): `#274dea` (--color-accent-down)
- focus-indicator-color — blue-800 (rgb converted): `#4b75ff` (--color-focus)
- gray-300 — divider and quiet component borders (rgb converted): `#dadada` (--color-border)
- negative-color-900 / red-900 (rgb converted): `#d73220` (--color-error)
- positive-color-900 / green-900 (rgb converted): `#05834e` (--color-success)
- notice-color-900 / orange-900 — warnings (rgb converted): `#c24e00` (--color-notice)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- background-base-color dark — gray-25 dark set (rgb converted): `#111111` (--color-bg)
- background-layer-1-color dark — gray-50 dark (rgb converted): `#1b1b1b` (--color-surface)
- neutral-content-color-default dark — gray-800 dark (rgb converted): `#dbdbdb` (--color-text)
- neutral-subdued-content-color-default dark — gray-700 dark (rgb converted): `#afafaf` (--color-text-muted)
- accent-color-900 dark — blue-900 dark set (rgb converted): `#5681ff` (--color-accent)
- accent-color-1000 dark (rgb converted): `#6995fe` (--color-accent-down)
- focus-indicator-color dark — blue-800 dark (rgb converted): `#4069fd` (--color-focus)
- gray-300 dark (rgb converted): `#393939` (--color-border)
- negative-color-900 dark (rgb converted): `#fc432e` (--color-error)
- positive-color-900 dark (rgb converted): `#099d59` (--color-success)
- notice-color-900 dark (rgb converted): `#e06400` (--color-notice)

### Typography

- Display / headings: Source Sans 3 (fallback: -apple-system, Segoe UI, Helvetica, Arial, sans-serif) (ideal: Adobe Clean Display, premium — use Source Sans 3 as the free substitute)
- Body: Source Sans 3 (fallback: -apple-system, Segoe UI, Helvetica, Arial, sans-serif) (ideal: Adobe Clean, premium — use Source Sans 3 as the free substitute)
- Mono / data: Source Code Pro (fallback: Menlo, Consolas, monospace)
- Type scale: 1.125 ratio, base 14px — computed steps: 14px / 16px / 18px / 20px / 22px / 25px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.3, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 16, 24, 32, 48, 64 — Productive pro-app density on a 4px base (spacing-50 through spacing-800); Spectrum 2 loosened S1 slightly — components got taller tap targets for shared desktop/touch use.
- Border radius: sm 4px, md 8px, lg 10px, full 999px — corner-radius-100 4px, medium 8px, large 10px from the token set; buttons, action bars, and badges are fully rounded pills in S2.
- Border treatment: 1px solid #dadada — Quiet 1px gray-300 borders on inputs and dividers; fields thicken to a 2px accent or negative border on focus/error. Layers separate by background tone more than by line.

### Shadows

- emphasized: `0 1px 6px rgba(0, 0, 0, 0.12)` — drop-shadow-emphasized — cards and popover resting state (dark theme uses 0.36 alpha)
- elevated: `0 2px 8px rgba(0, 0, 0, 0.16)` — drop-shadow-elevated — menus, dialogs, hover lift
- dragged: `0 6px 16px rgba(0, 0, 0, 0.2)` — drop-shadow-dragged — items being dragged

### Layout

- Max content width: 1280px
- App-frame layouts: rail or side navigation, dense toolbars, and panels rather than marketing grids
- 8px baseline grid; panel padding steps 16/24px
- Responsive scale switches between 'medium' (desktop) and 'large' (touch) component sizes globally
- Content areas sit on base white with layer-1 pasteboard gray behind canvases

### Effects

- Layered light/dark/wireframe token sets generated from one source (spectrum-design-data)
- staticColor black/white component variants for placement over artwork and imagery

### Motion

- Easing: cubic-bezier(0.45, 0, 0.4, 1); durations 130ms / 190ms / 300ms
- Short, spatial micro-motions ~130–300ms; ease-in-out character
- Selection and hover states change instantly; only overlays and drawers travel
- Reduced-motion users get opacity-only transitions

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f8f8f8;
  --color-text: #292929;
  --color-text-muted: #505050;
  --color-accent: #3b63fb;
  --color-accent-down: #274dea;
  --color-focus: #4b75ff;
  --color-border: #dadada;
  --color-error: #d73220;
  --color-success: #05834e;
  --color-notice: #c24e00;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-full: 999px;
  --shadow-emphasized: 0 1px 6px rgba(0, 0, 0, 0.12);
  --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.16);
  --shadow-dragged: 0 6px 16px rgba(0, 0, 0, 0.2);
  --border-default: 1px solid #dadada;
  --font-display: "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Source Code Pro", Menlo, Consolas, monospace;
  --text-base: 14px;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.45, 0, 0.4, 1);
  --duration-fast: 130ms;
  --duration-base: 190ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Code+Pro:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Left rail or collapsible side nav on layer-1 gray, selected item carries a filled highlight and bold label; top bar holds app switcher and avatar
- **Hero:** Product marketing uses white space, 700-weight Adobe Clean Display headlines, and a single blue pill CTA; in-app 'heroes' are empty states with an illustration and one action
- **Card:** White (or gray-75 layer) card, 8–10px radius, optional 1px gray-300 border, drop-shadow-emphasized only when interactive; asset cards show a checkable selection ring in accent blue
- **Button (primary):** Pill (999px) fill in accent blue-900 #3b63fb, bold white label, 32px default height; hover darkens toward blue-1000, focus adds a 2px offset focus-indicator ring
- **Button (secondary):** Pill outline: 2px gray border with gray-800 bold label, or quiet ghost variant with no border until hover
- **Form fields:** Label above, 4px gap; input 32px tall with 8px radius and 1px gray-300 border on white; focus swaps to 2px blue focus indicator; help/error text 12px below in gray-700 or red-900

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The Spectrum 2 pill button: fully rounded, bold-labeled, filled with accent blue-900 #3b63fb (or black/white 'staticColor' variants over imagery) — a deliberate softening of Spectrum 1's rectangles. Spend boldness here; keep everything else quiet.

## Do

- Consume tokens from @adobe/spectrum-tokens rather than copying values — light/dark/wireframe stay in sync
- Round action components fully (pills) but keep containers at 8–10px — the contrast of curvatures is the S2 look
- Use bold weights for headings and button labels; Spectrum 2 is typographically heavier than S1
- Reserve accent blue for interactive elements; keep canvases neutral so creative content dominates

## Don't

- Don't reuse Spectrum 1 values (#1473e6 blue, 4px-only corners, square buttons) — S2 moved to #3b63fb and pill geometry
- Don't ship Adobe Clean on non-Adobe properties; it is licensed to Adobe — substitute Source Sans 3 (Adobe's own open face)
- Don't stack heavy shadows; elevation beyond 'elevated' is reserved for drag states
- Don't recolor the neutral gray ramp — warm grays are part of the S2 identity

## Accessibility notes

- Spectrum tokens ship as contrast-verified light/dark pairs (e.g. accent blue-900 on white ≈ 4.8:1; dark-set values are re-tuned, not inverted) — keep pairs intact when theming
- The 2px focus-indicator-color ring with 2px offset is a hard requirement on all interactive components
- All rgb()/rgba() token values were converted to hex for this record; conversions are exact

## Reference sites

- Spectrum website: https://spectrum.adobe.com
- Spectrum design data (tokens): https://opensource.adobe.com/spectrum-design-data/
- @adobe/spectrum-tokens: https://github.com/adobe/spectrum-design-data

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip adobe-spectrum-2.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/adobe-spectrum-2.json

Settings → Capabilities → Skills → Upload skill → adobe-spectrum-2.zip