---
version: alpha
name: Adobe
description: Adobe Spectrum — clean utility design system anchored by Adobe Clean typeface, a precise neutral gray scale, Adobe Red for alerts, accent blue for interactive elements, and measured 8px-base spacing with medium rounding.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f8f8f8"
  surface-elevated: "#ffffff"
  surface-pasteboard: "#e9e9e9"  # gray-100 — workspace pasteboard

  # Ink / text
  ink: "#131313"           # gray-900 — headings, labels
  ink-body: "#292929"      # gray-800 — body text, default content
  ink-secondary: "#505050" # gray-700 — secondary text, icons
  ink-tertiary: "#717171"  # gray-600 — placeholders, captions
  on-primary: "#ffffff"
  on-dark: "#ffffff"

  # Adobe brand
  adobe-red: "#eb1000"     # marketing red — homepage CTAs, logo; /* estimated: adobe.com brand color */
  primary: "#3b63fb"       # accent-background-color-default (Spectrum blue-900 light)
  primary-hover: "#274dea" # accent-background-color-hover (blue-1000 light)
  primary-container: "#e5f0fe" # was rgb(229,240,254) — Spectrum accent-subtle-background light

  # Interactive accent (Spectrum default: blue)
  on-primary-container: "#3b63fb"  # accent-content-color-default

  # Semantic
  error: "#d73220"         # negative-background-color-default / red-900 light
  error-hover: "#b72818"   # negative-background-color-hover / red-1000 light
  error-subtle: "#ffebe8"  # negative-subtle-background-color / red-200 light
  success: "#05834e"       # positive-background-color-default
  warning: "#fc7d00"       # notice-background-color-default (orange)
  info: "#3b63fb"          # accent-content-color-default

  # Neutral gray scale
  gray-50: "#f8f8f8"
  gray-75: "#f3f3f3"
  gray-100: "#e9e9e9"
  gray-200: "#e1e1e1"
  gray-300: "#dadada"
  gray-400: "#c6c6c6"
  gray-500: "#8f8f8f"
  gray-600: "#717171"
  gray-700: "#505050"
  gray-800: "#292929"
  gray-900: "#131313"

  # Borders
  border: "#dadada"        # gray-300 — default dividers and input borders
  border-strong: "#c6c6c6" # gray-400 — emphasis borders
  focus-ring: "#4b75ff"    # focus-indicator-color (accent-color-800)

  # Disabled
  disabled-bg: "#e9e9e9"   # disabled-background-color
  disabled-text: "#c6c6c6" # disabled-content-color

  # Shadow tint
  shadow-soft: "#000000"   # drop-shadow-color: rgba(0,0,0,0.12) — flattened to pure black, used at low opacity

typography:
  display-hero:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.5px
  display:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 45px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.3px
  heading-xl:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-section:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-small:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  detail:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.06em
  caption:
    fontFamily: "Adobe Clean, Adobe Clean Fallback, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  code:
    fontFamily: "Source Code Pro, SFMono-Regular, Consolas, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  3xl: 32px
  4xl: 40px
  5xl: 48px
  6xl: 64px
  7xl: 80px
  8xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 10px
  xl: 16px
  pill: 9999px

components:
  # Primary blue CTA (Spectrum accent)
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-focus:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  # Adobe Red CTA (marketing site primary action)
  button-red:
    backgroundColor: "{colors.adobe-red}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 16px
  button-red-hover:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"

  # Secondary / neutral
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 16px
  button-secondary-hover:
    backgroundColor: "{colors.gray-75}"
    textColor: "{colors.ink}"

  # Negative / destructive
  button-negative:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 16px
  button-negative-hover:
    backgroundColor: "{colors.error-hover}"
    textColor: "{colors.on-primary}"

  # Cards
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"

  # Inputs
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 7px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  # Badge / tag
  badge-neutral:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.ink-body}"
    typography: "{typography.detail}"
    rounded: "{rounded.sm}"
    padding: 3px 8px
  badge-accent:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.detail}"
    rounded: "{rounded.sm}"
    padding: 3px 8px
  badge-negative:
    backgroundColor: "{colors.error-subtle}"
    textColor: "{colors.error}"
    typography: "{typography.detail}"
    rounded: "{rounded.sm}"
    padding: 3px 8px

  # Navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    padding: 0px 24px
  nav-link:
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.primary}"

  # Code block
  code-block:
    backgroundColor: "{colors.surface-pasteboard}"
    textColor: "{colors.ink}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Adobe Design System

## Overview

Adobe's design system, Spectrum, is the quiet infrastructure of one of the world's largest creative software ecosystems. Unlike the expressive, idiosyncratic systems of consumer brands, Spectrum is explicitly a utility-first system — engineered for sustained productivity across Photoshop, Illustrator, Acrobat, and dozens of other applications where designers and knowledge workers spend hours each day. The canvas begins with pure white (`{colors.background}`) and a warm-neutral gray scale that runs in precise perceptual steps from `{colors.gray-50}` (off-white pasteboard) through `{colors.gray-900}` (near-black heading text). This restraint is intentional: the system is background infrastructure, designed to make content and creative work visible without competing with it.

The typeface that defines the system is Adobe Clean — a humanist sans-serif developed internally, with the warmth of Myriad Pro refined for screen legibility at UI densities. At heading sizes, it runs bold (weight 700) with slightly negative tracking; at body sizes, it runs regular (weight 400) with neutral tracking and a generous 1.5 line-height. Adobe Clean Serif exists as a companion for editorial contexts. Adobe's marketing site (`{colors.adobe-red}` CTAs on white, large boldweight Adobe Clean headlines) leans into the brand's creative authority, while the application layer (Spectrum blue `{colors.primary}` for interactive states) keeps the utility tone.

What distinguishes Spectrum technically is the separation of concerns: the brand red (`{colors.adobe-red}`) belongs to Adobe's marketing identity, not to interactive states within products. Inside products, Spectrum uses accent blue (`{colors.primary}`) as the interactive color, reserving the red (`{colors.error}`) strictly for negative/destructive feedback. Elevation is handled with minimal, pure-black drop shadows at low opacity — no color tinting, no multi-layer parallax. The result is a design system that feels professional and somewhat corporate, but earns its authority through relentless clarity.

**Key Characteristics:**
- Adobe Clean humanist sans-serif as the system typeface — warm precision, not cold neutrality
- Dual-red strategy: marketing brand red (`{colors.adobe-red}`) vs. Spectrum accent blue (`{colors.primary}`) for interactive states
- Strict gray scale in 12 perceptual steps from `{colors.gray-50}` through `{colors.gray-900}` — the true system backbone
- 8px grid with a `spacing-100`-aligned token scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px...)
- Medium rounding: `{rounded.md}` (8px) on buttons and inputs; `{rounded.lg}` (10px) on cards
- Semantic color segregation: blue = interactive, red = destructive/error, orange = notice, green = success
- Source Code Pro as the monospace companion for code, REPL, and technical labels
- Drop shadows are pure-black at ultra-low opacity — utilitarian, never branded
- `detail` token uses 0.06em letter-spacing and weight 700 — a deliberate uppercase-label treatment
- Multi-modal font system: Adobe Clean (UI), Adobe Clean Serif (editorial), Adobe Clean Han (CJK)

## Colors

### Primary Canvas
- **White** (`{colors.background}`): Default page background and elevated surface.
- **Pasteboard Gray** (`{colors.surface}`): Workspace surfaces, sidebar backgrounds, muted zones.

### Ink / Text
- **Heading Black** (`{colors.ink}`): Spectrum's primary heading and label color — near-black warm gray at `gray-900`.
- **Body Dark** (`{colors.ink-body}`): Standard body text at `gray-800` — slightly lighter than heading black for reading contrast.
- **Secondary** (`{colors.ink-secondary}`): `gray-700` for secondary labels, form labels, icon strokes.
- **Tertiary** (`{colors.ink-tertiary}`): `gray-600` for placeholders, captions, and disabled descriptions.

### Brand Accent
- **Adobe Red** (`{colors.adobe-red}`): The signature marketing brand color — appears on adobe.com homepage CTAs, the Creative Cloud brand bar, and product logos. Not used for interactive states inside products.
- **Spectrum Blue** (`{colors.primary}`): Interactive default — button backgrounds, active state borders, focus rings, link colors, selected state highlights. This is Spectrum's `accent-background-color-default`.
- **Blue Hover** (`{colors.primary-hover}`): Slightly deeper blue for hover and pressed states.
- **Accent Container** (`{colors.primary-container}`): Soft blue tint for accent chip backgrounds, selected tag surfaces.

### Semantic
- **Error Red** (`{colors.error}`): Destructive button backgrounds, form validation error borders and text. Spectrum's `negative-background-color-default`.
- **Error Hover** (`{colors.error-hover}`): Darker state for error buttons.
- **Error Subtle** (`{colors.error-subtle}`): Toast and badge backgrounds for error messages.
- **Success Green** (`{colors.success}`): Success state backgrounds and icons.
- **Warning Orange** (`{colors.warning}`): Notice and warning state backgrounds.

### Neutral Gray Scale
The gray scale runs 12 semantic steps:
- `{colors.gray-50}` — `{colors.gray-75}` — `{colors.gray-100}`: Near-white surfaces, disabled backgrounds
- `{colors.gray-200}` — `{colors.gray-300}` — `{colors.gray-400}`: Borders, dividers, subtle chrome
- `{colors.gray-500}` — `{colors.gray-600}`: Icons at rest, placeholder text
- `{colors.gray-700}` — `{colors.gray-800}`: Secondary text, body text
- `{colors.gray-900}`: Primary headings, high-emphasis labels

### Borders & Focus
- **Default Border** (`{colors.border}`): `gray-300` for input outlines, card borders, dividers.
- **Strong Border** (`{colors.border-strong}`): `gray-400` for emphasis borders and stepper lines.
- **Focus Ring** (`{colors.focus-ring}`): Spectrum accent blue for all keyboard focus indicators — `2px solid`, 2px offset.

## Typography

### Font Family
- **Primary**: `Adobe Clean`, with fallbacks: `Adobe Clean Fallback, system-ui, -apple-system, sans-serif`
- **Serif (editorial)**: `Adobe Clean Serif`, with fallbacks: `Georgia, serif`
- **CJK**: `Adobe Clean Han` for Chinese, Japanese, Korean content
- **Monospace**: `Source Code Pro`, with fallbacks: `SFMono-Regular, Consolas, monospace`
- **OpenType Features**: `"kern"` enabled globally. `detail` token uses `letter-spacing: 0.06em` (small-caps label treatment).

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 60px bold — major marketing headlines, product hero banners |
| `display` | 45px bold — section heroes, feature headers |
| `heading-xl` | 36px bold — major content headings |
| `heading-section` | 28px bold — feature section titles, modal headings |
| `heading-sub` | 22px bold — sub-section headings, sidebar titles |
| `heading-small` | 18px bold — card headings, minor section heads |
| `body-large` | 20px regular — intro paragraphs, feature descriptions |
| `body` | 16px regular — standard reading text, form labels |
| `body-small` | 14px regular — fine-print, helper text, tooltips |
| `button-ui` | 16px bold — all button labels |
| `detail` | 12px bold + 0.06em tracking — uppercase overline labels, category tags |
| `caption` | 12px regular — image captions, chart labels |
| `code` | 14px Source Code Pro — code blocks, command output |

### Principles
- **Utility-first weight strategy**: Headings use weight 700, body uses weight 400 — a clean two-weight system that avoids the "medium" weights common in consumer brands.
- **Humanist warmth**: Adobe Clean has calligraphic roots (derived from Myriad Pro), giving it warmth at text sizes that purely geometric sans-serifs lack.
- **Detail as labels**: The `detail` token (12px bold, 0.06em tracking) functions as the system's small-cap label — used for category overlines, panel section headers, workflow stage labels.
- **Line-height discipline**: Headings at 1.3 (tight), body at 1.5 (generous) — Spectrum's explicit `line-height-100` and `line-height-200` tokens.
- **CJK as first-class**: Adobe Clean Han for CJK content, with a separate `cjk-line-height` of 1.7 — acknowledging that CJK text requires significantly more vertical space.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: **8px**.

The scale doubles at key intervals (8, 16, 32, 64) with intermediate steps (12, 24, 40, 48, 80) for precise component-level control. This matches Spectrum's `spacing-100` through `spacing-1000` token series directly. The system is generous in page-level spacing (sections breathe at 64–96px) and precise inside components (7px padding on inputs is a deliberate non-8px alignment for optical balance at the medium component size).

### Grid & Container
- Max content width: 1280px
- Standard marketing layout: centered single-column for hero, 3-column for feature grids
- Application shell: fixed left sidebar (nav/tools) + flexible content area
- Footer: multi-column grouped links on `{colors.surface-pasteboard}` background
- Responsive at standard breakpoints: mobile 375px, tablet 768px, desktop 1024px, wide 1440px

### Whitespace Philosophy
- **Functional density**: Unlike consumer brands that use whitespace for luxury signaling, Spectrum uses whitespace for scanability and task efficiency. Interface chrome is compact; reading text is generous.
- **8px rhythm**: All component padding and grid gaps snap to the 8px grid, creating a quiet visual regularity across the entire system.
- **Section altitude**: Marketing pages use 80–96px top/bottom section padding; application panels use 16–24px.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page backgrounds, inline elements, most UI |
| Subtle (Level 1) | `0 1px 4px rgba(0,0,0,0.12)` | Cards, panels, minimal lift |
| Card (Level 2) | `0 1px 4px rgba(0,0,0,0.16)` | Standard elevated cards, dropdowns |
| Elevated (Level 3) | `0 2px 8px rgba(0,0,0,0.20)` | Popovers, tooltips, context menus |
| Dragged (Level 4) | `0 4px 12px rgba(0,0,0,0.20)` | Drag handles, floating panels |
| Focus Ring | `2px solid {colors.focus-ring}`, 2px offset | All keyboard-focusable elements |

**Shadow Philosophy**: Spectrum's shadows are strictly neutral — pure black (`{colors.shadow-soft}`) at low opacity (12–20%). No color tinting. No parallax multi-layer effects. The approach says: shadows are functional (they separate layers), not expressive (they don't reinforce a brand palette). This is the utilitarian opposite of Stripe's blue-tinted elevation. The focus ring, by contrast, is explicitly branded — accent blue at 2px, creating a consistent interactive signal.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Separators, inline rules, full-bleed images |
| `sm` | 4px | Small badges, chips, inline tags |
| `md` | 8px | Buttons, inputs, small cards — the workhorse |
| `lg` | 10px | Standard content cards, dialogs, panels |
| `xl` | 16px | Large featured cards, hero cards |
| `pill` | 9999px | Toggle chips, category pills, tag clouds |

Spectrum occupies the 4–16px range — neither sharp nor soft. Medium rounding communicates professional reliability without the consumer-grade friendliness of 20px+ systems. The pill shape appears for toggle/filter controls but not for primary action buttons.

## Components

The complete component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Button Variants
- **`button-primary`** — Spectrum accent blue (`{colors.primary}`) solid CTA, white text, 8px radius. Used in application UIs for primary interactive actions.
- **`button-red`** — Adobe brand red (`{colors.adobe-red}`) solid CTA, white text. Appears on adobe.com marketing pages for primary "Start free trial" and "Buy now" actions.
- **`button-secondary`** — White background, dark text, border `1px solid {colors.border}`. Standard secondary option.
- **`button-negative`** — Error red (`{colors.error}`) for destructive actions — "Delete", "Remove", "Cancel subscription".

### Cards
- **`card`** — White surface, `1px solid {colors.border}` border, 10px radius, 1px 4px drop shadow. Standard content card.
- Cards on `{colors.surface}` (gray-50) background lift to white to maintain contrast.

### Inputs
- **`input`** — White surface, `1px solid {colors.border}` border, 8px radius, 7px top/bottom padding. On focus, border shifts to `{colors.focus-ring}` with 2px ring. Error state uses `{colors.error}` border.

### Badges
- **`badge-neutral`** — Light gray chip for neutral status labels.
- **`badge-accent`** — Blue-tinted chip for selected/active states.
- **`badge-negative`** — Red-tinted chip for error status, count badges for alerts.

### Navigation
Spectrum navigation comes in two contexts: the public marketing site uses a white sticky nav with Adobe logo left, nav links center, red CTA right; inside applications, a persistent side rail with icon + label items anchors wayfinding. Both use `{typography.body}` for labels, `{colors.ink-body}` at rest, `{colors.primary}` on active.

### Code
- **`code-block`** — Source Code Pro on `{colors.surface-pasteboard}` (gray-100), 8px radius, 16px padding. Used for API examples, command-line instructions, code documentation.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (Spectrum blue) for interactive states inside products — buttons, links, active states, focus rings
- Use `{colors.adobe-red}` on marketing surfaces where the brand's creative authority needs to anchor the CTA
- Use `{colors.error}` exclusively for destructive feedback (form errors, negative actions) — never as a general brand red inside product UI
- Use Adobe Clean at weight 700 for all headings — the weight jump from body 400 to heading 700 is Spectrum's hierarchy engine
- Use the `detail` token (12px bold, 0.06em) for overline labels and panel section headers — it is the system's uppercase-label substitute
- Reference the 12-step gray scale for text: `{colors.ink}` for headings, `{colors.ink-body}` for body, `{colors.ink-secondary}` for secondary labels
- Apply `2px solid {colors.focus-ring}` at 2px offset on all keyboard-focusable elements — focus rings are mandatory
- Use `{rounded.md}` (8px) for interactive controls (buttons, inputs) and `{rounded.lg}` (10px) for containers (cards, panels)

### Don't
- Don't use `{colors.adobe-red}` as an interactive hover/active state inside application UIs — it belongs to marketing, not Spectrum
- Don't use any font weight between 400 and 700 — Spectrum's two-weight model (regular + bold) is intentional
- Don't use color-tinted shadows — all elevation uses pure black at low opacity
- Don't apply pill radius (`{rounded.pill}`) to primary action buttons — only toggle/chip controls use it
- Don't use `{colors.warning}` (orange) for general CTAs — it is strictly a notice/warning semantic
- Don't reduce body line-height below 1.5 — Adobe Clean at 400 weight needs the room to breathe
- Don't use positive letter-spacing on body or heading text — only the `detail` token carries tracking (0.06em for small-caps labels)
- Don't skip the gray-scale progression — jump from `{colors.ink}` (heading) to `{colors.ink-body}` (body) to `{colors.ink-secondary}` (secondary) rather than picking arbitrary hex values

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column, navigation collapses to hamburger, reduced heading sizes |
| Tablet | 768–1024px | 2-column grids, condensed navigation, touch-optimized targets |
| Desktop | 1024–1280px | Full layout, 3-column feature grids, side-rail visible |
| Large Desktop | >1280px | Centered content at 1280px max-width with outer margin |

### Touch Targets
- All interactive controls meet a minimum 32px height (Spectrum's "medium" component size)
- Mobile target floor is 44px (iOS HIG compliance)
- Icon-only buttons wrap in a 40px touch target
- Spectrum's spacing scale includes mobile overrides for accordion and component padding (e.g., medium accordion bottom-text spacing: 9px mobile vs. 5px desktop)

### Collapsing Strategy
- Marketing hero: 60px display → 36px on tablet → 28px on mobile, weight 700 maintained
- Navigation: horizontal links → hamburger drawer on mobile
- Feature grids: 3-column → 2-column → single-column stacked
- Application sidebars: icon-only collapsed mode on tablet, full-width overlay on mobile
- Section spacing: 96px → 64px → 40px across breakpoints

### Image Behavior
- Product screenshots and app UI previews maintain their drop shadows at all sizes
- Hero images scale fluidly; aspect ratio preserved via CSS `aspect-ratio`
- Card images clip to the card's `{rounded.lg}` border radius
- Illustration assets use SVG throughout for crisp rendering at all densities

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Heading text: `{colors.ink}`
- Body text: `{colors.ink-body}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Interactive CTA (product): `{colors.primary}`
- Brand CTA (marketing): `{colors.adobe-red}`
- Error: `{colors.error}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero section on white background. Headline at 60px Adobe Clean weight 700, line-height 1.2, letter-spacing -0.5px, color `{colors.ink}`. Subtitle at 20px weight 400, line-height 1.5, color `{colors.ink-body}`. Adobe Red CTA button (`{colors.adobe-red}` background, white text, 8px radius, 7px 16px padding, weight 700) and secondary ghost button (white bg, `1px solid {colors.border}`, `{colors.ink-body}` text)."
- "Design a content card on white: `1px solid {colors.border}` border, 10px radius, `0 1px 4px rgba(0,0,0,0.12)` shadow. Title at 22px Adobe Clean weight 700, color `{colors.ink}`. Body at 16px weight 400, line-height 1.5, color `{colors.ink-body}`. 24px padding."
- "Build a form input: white background, `1px solid {colors.border}` border, 8px radius, 7px 12px padding. Adobe Clean 16px weight 400, color `{colors.ink-body}`. On focus: border `2px solid {colors.focus-ring}`. Error state: border `1px solid {colors.error}`, helper text in `{colors.error}` at 14px below."
- "Create an application side navigation rail: `{colors.surface}` background, 64px wide collapsed (icon-only). Items use Adobe Clean 14px weight 400, `{colors.ink-secondary}` at rest, `{colors.primary}` and `{colors.primary-container}` background on active. Dividers `1px solid {colors.border}`."
- "Design a status badge system: neutral (`{colors.gray-100}` bg, `{colors.ink-body}` text), accent (`{colors.primary-container}` bg, `{colors.primary}` text), error (`{colors.error-subtle}` bg, `{colors.error}` text). All badges: 4px radius, 3px 8px padding, Adobe Clean 12px weight 700, letter-spacing 0.06em."

### Iteration Guide
1. Start with `{colors.background}` canvas and the 12-step gray scale for all text and border decisions
2. Interactive elements use `{colors.primary}` (Spectrum blue) — not the marketing red, which is brand-only
3. Every focusable element needs `2px solid {colors.focus-ring}` at 2px offset — non-negotiable
4. Typography uses exactly two weights: 400 for body/labels, 700 for headings/buttons
5. Border-radius lives in the 4–16px range: 8px controls, 10px containers — no pills on primary actions
6. Shadows are pure-black at 12–20% opacity — no color tinting, no multi-layer stacking
7. The `detail` token (12px, 700, 0.06em) is the overline/label voice — use for panel headers and category labels
8. Adobe Clean Serif appears only for editorial/longform contexts; all UI defaults to Adobe Clean sans

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Adobe. Brand names and trademarks belong to their respective owners.