---
version: alpha
name: Adobe
description: "Adobe red owns the logo; Spectrum blue does all the work."
colors:
  on-surface-variant: "#717171"
  on-surface: "#131313"
  surface: "#ffffff"
  outline: "#8f8f8f"
  error: "#d73220"
  primary: "#3b63fb"
  adobe-red: "#eb1000"
  blue-hover: "#274dea"
  blue-pressed: "#1d3ecf"
  black: "#000000"
  graphite: "#292929"
  disabled-gray: "#c6c6c6"
  subtle-fill: "#f3f3f3"
  nav-fill: "#f8f8f8"
  focus-ring: "#378ef0"
  ps-indigo: "#3a18ff"
  illustrator-orange: "#ff9a00"
  3d-ar-green: "#99e83f"
  premiere-violet: "#9999ff"
typography:
  super-hero:
    fontFamily: Adobe Clean Display Black
    fontSize: 56px
    fontWeight: 900
    lineHeight: 56px
    letterSpacing: -1.68px
  heading-1:
    fontFamily: Adobe Clean
    fontSize: 40px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: -1.68px
  heading-2:
    fontFamily: Adobe Clean
    fontSize: 32px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.96px
  heading-3:
    fontFamily: Adobe Clean
    fontSize: 24px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.48px
  heading-4:
    fontFamily: Adobe Clean
    fontSize: 20px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.48px
  heading-5:
    fontFamily: Adobe Clean
    fontSize: 18px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.2px
  heading-6:
    fontFamily: Adobe Clean
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: -0.2px
  body-md:
    fontFamily: Adobe Clean
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  label:
    fontFamily: Adobe Clean
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  caption:
    fontFamily: Adobe Clean
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
rounded:
  2xs: 2px
  xs-utility-icon: 4px
  sm-card: 8px
  md: 16px
  lg: 32px
  round-pill-button: 999px
spacing:
  3xs: 2px
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 48px
  4xl: 64px
  layout-sm: 80px
  layout-md: 96px
  layout-lg: 124px
  layout-xl: 160px
  layout-2xl: 240px
---
# Adobe — Style Reference
> Adobe red owns the logo; Spectrum blue does all the work.

**Theme:** mixed

Adobe's site runs on Spectrum 2 — a full, machine-generated token system (`--s2a-*`) with thirteen-step gray, blue, red, orange, yellow and green ramps, semantic aliases layered on top, and a strict 4px spacing spine. The signature tension is a two-color identity: Adobe red (`#eb1000`) is reserved almost entirely for the brand mark and brand surfaces, while the *interactive* color — links, primary CTAs, focus rings — is Spectrum blue (`#3b63fb`). Typographically it is Adobe Clean Display Black at weight 900, set enormous (56–80px) with aggressive negative tracking, over Adobe Clean for everything else. Layout alternates a cinematic dark hero (deep navy-to-black gradient, knockout white headline, white pill button) against an otherwise near-white Spectrum canvas. The mood is confident and corporate-crisp: heavy display type, rounded-full buttons, and product-brand accent colors (Ps indigo, Illustrator orange, 3D&AR green) that appear only inside their own app tiles.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Adobe Red | `#eb1000` | `--s2a-color-brand-adobe-red` | The identity color: logo, `background-brand`, `border-brand`, `content-brand`. Never a CTA fill — interactive is blue. |
| Spectrum Blue | `#3b63fb` | `--s2a-color-blue-900` | The real interactive color: primary CTA fill (`--feds-cta-primary-bg`), links, focus ring. |
| Blue Hover | `#274dea` | `--s2a-color-blue-1000` | CTA + link hover (`--feds-cta-primary-bg--hover`, `--feds-color-blue-link`). |
| Blue Pressed | `#1d3ecf` | `--s2a-color-blue-1100` | Deep link hover / pressed state. |
| White | `#ffffff` | `--s2a-color-gray-25` | Default page background; knockout text and the white pill CTA on the dark hero. |
| Black | `#000000` | `--s2a-color-gray-1000` | `background-inverse` / `knockout`: hero gradient base, product tiles, dark cards. |
| Ink Strong | `#131313` | `--s2a-color-gray-900` | `content-strong` — strong body text and headings on light. |
| Graphite | `#292929` | `--s2a-color-gray-800` | `border-default`; nav link text (`--feds-color-link`). |
| Mid Gray | `#717171` | `--s2a-color-gray-600` | Secondary text, muted labels. |
| Steel | `#8f8f8f` | `--s2a-color-gray-500` | Hairline dividers, tertiary UI. |
| Disabled Gray | `#c6c6c6` | `--s2a-color-gray-400` | `content-disabled` / `border-disabled`. |
| Subtle Fill | `#f3f3f3` | `--s2a-color-gray-75` | `background-subtle`, popup/tab-content fill (`--feds-background-popup`). |
| Nav Fill | `#f8f8f8` | `--s2a-color-gray-50` | `background-disabled`/`subtle`; global-nav background (`--feds-background-nav`). |
| Error Red | `#d73220` | `--s2a-color-red-900` | `utility-error` only — distinct from brand red so the logo color never signals failure. |
| Focus Ring | `#378ef0` | `--ot-privacy-cta-ring-color` | Focus/selection ring accent. |
| Ps Indigo | `#3a18ff` | `--s2a-color-brand-cc-ps` | Photoshop app-tile accent — used only inside its product tile. |
| Illustrator Orange | `#ff9a00` | `--s2a-color-brand-cc-il` | Illustrator app-tile accent. |
| 3D & AR Green | `#99e83f` | `--s2a-color-brand-cc-3dar` | Substance / 3D&AR app-tile accent. |
| Premiere Violet | `#9999ff` | `--s2a-color-brand-cc-ppafx` | Premiere Pro / After Effects app-tile accent. |

> The full 13-step gray/blue/red/orange/yellow/green ramps and the semantic aliases are reproduced verbatim in Quick Start; this table is the curated identity view.

## Tokens — Typography

### Adobe Clean Display Black — the headline face: display H1/H2, weight 900, enormous with heavy negative tracking · `--heading-font-family`
- **Substitute:** Arial Bold Adjusted, Trebuchet MS, sans-serif
- **Weights:** 900 (`--s2a-font-weight-adobe-clean-display-black`)
- **Sizes:** 80px (hero), 56px, 24px
- **Line height:** 40px → 92px (`--s2a-font-line-height-xl` … `-6xl`)
- **Letter spacing:** aggressive negative — `-3.84px` (super/H1) → `-1.44px` (H2) → `-0.96px` (H3)
- **Role:** Knockout white "Get work done. Faster." headlines and section leads; the loudest element on every screen.

### Adobe Clean — the workhorse: body, labels, eyebrows, nav, buttons · `--s2a-font-family-adobe-clean`
- **Substitute:** adobe-clean, Trebuchet MS, sans-serif
- **Weights:** 400 regular, 500 medium, 700 bold, 800 extrabold, 900 black
- **Sizes:** 12 / 14 / 16 / 18 / 20 / 24px
- **Line height:** 16px → 32px (`-2xs` … `-lg`)
- **Letter spacing:** ~0 for body (`--s2a-font-letter-spacing-6xl` = 0); eyebrows/labels/captions set in bold.
- **Role:** Everything that isn't a display headline — paragraph copy (400), CTA labels and eyebrows (700).

### Adobe Clean Serif — supporting italic/serif accent · `adobe-clean-serif`
- **Substitute:** Georgia, serif
- **Weights:** 400 (normal + italic), 700 (normal + italic)
- **Role:** Loaded but secondary — editorial/quotation accents; not part of the core UI scale.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Super / Hero | 56px (`3.5rem`) | 56px | `-1.68px` | `--s2a-typography-font-size-super` |
| Heading 1 | 40px (`2.5rem`) | 40px | `-1.68px` | `--s2a-typography-font-size-heading-1` |
| Heading 2 | 32px (`2rem`) | 32px | `-0.96px` | `--s2a-typography-font-size-heading-2` |
| Heading 3 | 24px (`1.5rem`) | 24px | `-0.48px` | `--s2a-typography-font-size-heading-3` |
| Heading 4 | 20px (`1.25rem`) | 20px | `-0.48px` | `--s2a-typography-font-size-heading-4` |
| Heading 5 | 18px (`1.125rem`) | 20px | `-0.2px` | `--s2a-typography-font-size-heading-5` |
| Heading 6 | 16px (`1rem`) | 18px | `-0.2px` | `--s2a-typography-font-size-heading-6` |
| Body md | 16px (`1rem`) | 20px | `0` | `--s2a-typography-font-size-body-md` |
| Label | 14px (`0.875rem`) | 18px | `0` | `--s2a-typography-font-size-label` |
| Caption | 12px (`0.75rem`) | 16px | `0` | `--s2a-typography-font-size-caption` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 2px | `--s2a-spacing-2` |
| 2xs | 4px | `--s2a-spacing-4` |
| xs | 8px | `--s2a-spacing-8` |
| sm | 12px | `--s2a-spacing-12` |
| md | 16px | `--s2a-spacing-16` |
| lg | 24px | `--s2a-spacing-24` |
| xl | 32px | `--s2a-spacing-32` |
| 2xl | 40px | `--s2a-spacing-40` |
| 3xl | 48px | `--s2a-spacing-48` |
| 4xl | 64px | `--s2a-spacing-64` |
| layout-sm | 80px | `--s2a-layout-sm` |
| layout-md | 96px | `--s2a-layout-md` |
| layout-lg | 124px | `--s2a-layout-lg` |
| layout-xl | 160px | `--s2a-layout-xl` |
| layout-2xl | 240px | `--s2a-layout-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| None | `0` (`--s2a-border-radius-none`) |
| 2xs | `2px` |
| xs / utility icon | `4px` (`--feds-radius-utilityIcon`) |
| sm / card | `8px` (`--s2a-border-radius-sm`) |
| md | `16px` (`--s2a-border-radius-md`) |
| lg | `32px` (`--s2a-border-radius-lg`) |
| round / pill button | `999px` (`--s2a-border-radius-round`) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Level 1 | `0 1px 6px 0 rgba(0,0,0,0.12)` | `--s2a-shadow-level-1-*` |
| Level 2 | `0 2px 8px 0 rgba(0,0,0,0.16)` | `--s2a-shadow-level-2-*` |
| Level 3 | `0 4px 12px 0 rgba(0,0,0,0.16)` | `--s2a-shadow-level-3-*` |
| Level 4 | `0 6px 16px 0 rgba(0,0,0,0.16)` | `--s2a-shadow-level-4-*` |
| Hero card hairline | `rgba(255,255,255,0.11) 0 0 0 1px inset` | inset border on dark surfaces |

### Layout
- **Page max-width:** 1920px default / 2560px fluid (`--grid-max-width-default` / `-fluid`); nav caps at 1440px
- **Section gap:** viewport vertical padding scales `16px → 80px` (`--s2a-viewport-vertical-padding-2xs … -xl`)
- **Card padding:** 12px 12px 16px (dark product tiles)
- **Element gap:** 8px grid gutter (`--grid-gutter`), 6-column grid, 24px margins

## Components

### Primary Button (Pill CTA)
**Role:** The main call to action — "Free trial" in the hero.
On the dark hero, a white knockout pill: `background #ffffff`, `color #000000`, `border 1–2px #ffffff`, `radius 999px`, padding `0 24px` (or `6px 16px 8px`), Adobe Clean 14px/700. In light UI the primary fill switches to Spectrum blue `#3b63fb`, hover `#274dea`.

### Secondary Button (Ghost Pill)
**Role:** Lower-emphasis action beside the primary.
Transparent fill, `color #ffffff`, `border #ffffff`, `radius 999px` — same pill geometry as primary but outline-only on dark.

### Product Tile
**Role:** The dark app cards along the hero base ("Creativity and design", "PDF and document essentials").
`background #000000`, `color #ffffff`, `radius 8px`, padding `12px 12px 16px`, a small brand-colored app glyph top-left (Ps `#3a18ff`, Il `#ff9a00`, 3D&AR `#99e83f`), 14px/700 label with a `›` chevron. The active tile gets a white `1px` border.

### Global Navigation
**Role:** Persistent top bar — Products, Use Cases, Solutions, Learn & Support, Plans.
Background `#f8f8f8` (`--feds-background-nav`), link text `#292929` (`--feds-color-link`), hover fill `#e9e9e9`, blue links `#274dea`. On the dark hero the nav is transparent with white knockout links. Caps at 1440px; Adobe wordmark in red `#eb1000` (or white-knockout SVG on dark).

### Hero Section
**Role:** The cinematic opener — dark gradient over lifestyle photography.
Deep navy-to-black gradient, knockout white eyebrow ("Acrobat", 16–20px), Adobe Clean Display Black headline at 80px/900 with `-1.68px` tracking, 16px white body copy, white pill CTA. Right side carries a product screenshot at native scale.

### Link
**Role:** Inline text navigation.
Default `#274dea` (`--feds-color-blue-link`), hover `#1d3ecf`; on dark surfaces white `#ffffff`. Body links inherit 16px/400 Adobe Clean.

### Tabs
**Role:** Sectioned content switcher.
Text `#686868` (`--tabs-text-color`), active text `#2c2c2c`, active indicator blue `#1473e6`, background `#f1f1f1`, active background `#fff`, 8px rounded corners. Mobile stacked variant flips to `#242424` on white.

### Card (Content)
**Role:** Neutral editorial/feature card.
Light: white surface, 16px radius, Level-1/2 shadow. Dark: `#000000` fill, `#ffffff` text, 8px radius, inset white hairline (`rgba(255,255,255,0.11) 0 0 0 1px`).

### Modal
**Role:** Overlay dialogs.
Focus accent `#109cde` (`--modal-focus-color`), close-icon accent `#707070`, max-height `calc((100vh - 6px) - 2em)`, curtain scrim over content.

### Eyebrow / Label
**Role:** Small kicker above a headline (e.g. "Acrobat").
Adobe Clean bold (`--s2a-font-weight-eyebrow` = 700) at 16px, `content-eyebrow` = `rgba(0,0,0,0.64)` on light or white on dark; tracking near zero.

### Footer
**Role:** Global site footer.
Background `#fafafa` (`--feds-background-footer`), 32px gutter, featured-product border `#999`, muted link text — the quiet counterweight to the loud hero.

## Do's and Don'ts

### Do
- Reserve Adobe red `#eb1000` for the logo and brand surfaces (`background-brand`, `content-brand`, `border-brand`).
- Make blue `#3b63fb` the single interactive color — CTAs, links, focus rings — with hover `#274dea` and press `#1d3ecf`.
- Set display headlines in Adobe Clean Display Black 900 at 56–80px with heavy negative tracking (`-1.68px` to `-3.84px`).
- Use rounded-full `999px` pills for all buttons; keep cards at `8px`.
- Snap every measurement to the 4px spine; use the `--s2a-layout-*` steps (80/96/124/160/240px) for section rhythm.
- Keep product-brand accent colors (Ps/Il/3D&AR/Premiere) inside their own app tiles only.

### Don't
- Don't use Adobe red as a button/CTA fill — that role belongs to blue. Red as an action reads as an error.
- Don't use the error red `#d73220` for anything but utility/error states.
- Don't set body copy in the Display Black face — Adobe Clean (400/700) carries all non-headline text.
- Don't add radii off the ramp (`0/2/4/8/16/32/999`); no `12px`-and-a-half improvisation on buttons.
- Don't let product accent colors leak into global nav, CTAs, or body — the identity stays red + blue + neutral.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` (`--s2a-color-gray-25`) | Default light page background. |
| 1 | Subtle | `#f8f8f8` (`--s2a-color-gray-50`) | Nav, disabled, subtle sections. |
| 2 | Popup / Tabs | `#f3f3f3` (`--s2a-color-gray-75`) | Menus, popups, tab-content fill. |
| 3 | Footer | `#fafafa` (`--feds-background-footer`) | Global footer band. |
| — | Inverse / Hero | `#000000` (`--s2a-color-gray-1000`) | Dark hero base, product tiles, knockout cards. |
| — | Brand | `#eb1000` (`--s2a-color-brand-adobe-red`) | Brand-colored surfaces and promos. |

## Elevation

Depth is conveyed three ways, in order of preference. On light UI, a four-step ambient shadow ramp (Level 1–4: `y 1→6px`, `blur 6→16px`, black at 12–16%) lifts cards and menus. On dark surfaces — the hero and product tiles — shadows vanish and separation comes instead from a `1px` inset white hairline at 11% opacity (`rgba(255,255,255,0.11) 0 0 0 1px inset`) plus the luminance jump from near-black tile to lighter photography. Borders (`border-default` `#292929`, `border-subtle` `#dadada`) do the rest. There is no heavy drop-shadow drama; elevation is restrained and mostly luminance-driven.

## Imagery

Photography-led and cinematic: real people at work in warm, shallow-depth-of-field environments (a hand on a laptop keyboard, a coffee mug catching light), always under a dark gradient scrim so knockout white type stays legible. Product UI is shown at native fidelity — actual Acrobat/Creative Cloud screenshots composited into the scene rather than stylized mockups. App identity is carried by small, flat, brightly-colored product glyphs (Ps indigo, Il orange, 3D&AR green, Premiere violet) that appear only inside their tiles. No illustration or 3D abstraction in the core marketing frame — the aesthetic is premium-editorial photography plus literal product truth.

## Layout

Full-bleed cinematic hero over contained content. The hero is edge-to-edge dark gradient with a left-aligned text column (eyebrow → giant headline → body → pill CTA) and a right-side product screenshot; a horizontal row of dark product tiles anchors the base. Below the fold the page returns to a near-white Spectrum canvas on a 6-column grid (`--grid-columns: 6`), 8px gutters, 24px margins, capped at 1920px (2560px fluid). Section rhythm uses the `--s2a-layout-*` steps (80–240px). Global nav is persistent at the top (max 1440px), transparent-over-hero then solid `#f8f8f8` on scroll.

## Typography Voice

Two registers, sharply separated. The **display register** is Adobe Clean Display Black — one weight (900), set huge (56–80px) with punishing negative tracking that pulls letters into a dense, confident wall ("Get work done. Faster."). Line height rides tight against the cap height so multi-line headlines stack like slabs. The **utility register** is Adobe Clean at 400/700, near-zero tracking, 16–20px line heights — quiet, neutral, engineered for scanning. The move that makes it work: the tracking curve is proportional to size — `-3.84px` at super scale relaxing to `0` at body — so the big type reads as sculpted and the small type reads as calm. Eyebrows and CTA labels borrow the bold (700) weight to bridge the two registers without introducing a third face.

## Agent Prompt Guide

## Quick Color Reference
- background: `#ffffff` / text: `#131313` (strong) · `#000000` (default) / surface: `#f8f8f8` · `#f3f3f3` / border: `#292929` (default) · `#dadada` (subtle) / accent (brand): `#eb1000` / primary action: `#3b63fb` (hover `#274dea`) — on dark hero the CTA is a white `#ffffff` pill

## Example Component Prompts
1. **Hero CTA (pill)**: A rounded-full button, `border-radius: 999px`, white `#ffffff` fill, black `#000000` text, Adobe Clean 14px/700, padding `0 24px`, no shadow — sitting on a dark navy-to-black gradient hero.
2. **Primary action (light UI)**: A `999px` pill button filled Spectrum blue `#3b63fb`, white text, hover `#274dea`, Adobe Clean 14px bold, padding `6px 16px 8px`.
3. **Product tile**: A `#000000` card, `border-radius: 8px`, padding `12px 12px 16px`, a small flat brand-colored app glyph top-left (e.g. `#3a18ff`), white 14px/700 label with a `›` chevron; active state adds a `1px #ffffff` border.
4. **Display headline**: Adobe Clean Display Black 900 at 80px, letter-spacing `-1.68px`, line-height ~1.0, knockout white on a dark scrim over lifestyle photography.
5. **Global nav bar**: Background `#f8f8f8`, Adobe Clean links `#292929` with hover fill `#e9e9e9`, blue links `#274dea`, red `#eb1000` Adobe wordmark, capped at 1440px width.

## Similar Brands
- **Salesforce (Lightning Design System)** — another enterprise design-token system built on a broad semantic ramp with one disciplined brand/interactive split.
- **Atlassian** — Spectrum-adjacent: a big neutral gray ramp, blue as the interactive color, and heavy display headlines over product UI.
- **Microsoft (Fluent)** — corporate-crisp, token-driven, photography-plus-product-screenshot marketing with restrained elevation.
- **Google Material** — kindred machine-generated tonal ramp philosophy and role-based semantic aliasing over raw color steps.
- **Figma** — bright per-product accent glyphs on a neutral, near-white canvas with rounded, friendly geometry.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Brand */
  --s2a-color-brand-adobe-red: #eb1000;
  --s2a-color-brand-cc-3dar: #99e83f;
  --s2a-color-brand-cc-il: #ff9a00;
  --s2a-color-brand-cc-ppafx: #9999ff;
  --s2a-color-brand-cc-ps: #3a18ff;

  /* Gray ramp */
  --s2a-color-gray-25: #ffffff;
  --s2a-color-gray-50: #f8f8f8;
  --s2a-color-gray-75: #f3f3f3;
  --s2a-color-gray-100: #e9e9e9;
  --s2a-color-gray-200: #e1e1e1;
  --s2a-color-gray-300: #dadada;
  --s2a-color-gray-400: #c6c6c6;
  --s2a-color-gray-500: #8f8f8f;
  --s2a-color-gray-600: #717171;
  --s2a-color-gray-700: #505050;
  --s2a-color-gray-800: #292929;
  --s2a-color-gray-900: #131313;
  --s2a-color-gray-1000: #000000;

  /* Blue ramp (interactive) */
  --s2a-color-blue-100: #f5f9ff;
  --s2a-color-blue-200: #e5f0fe;
  --s2a-color-blue-300: #cbe2fe;
  --s2a-color-blue-400: #accffd;
  --s2a-color-blue-500: #8eb9fc;
  --s2a-color-blue-600: #729efd;
  --s2a-color-blue-700: #5d89ff;
  --s2a-color-blue-800: #4b75ff;
  --s2a-color-blue-900: #3b63fb;
  --s2a-color-blue-1000: #274dea;
  --s2a-color-blue-1100: #1d3ecf;
  --s2a-color-blue-1200: #1532ad;
  --s2a-color-blue-1300: #10288c;
  --s2a-color-blue-1400: #0c1f69;
  --s2a-color-blue-1500: #0e1843;
  --s2a-color-blue-1600: #070b1e;

  /* Red ramp (utility/error) */
  --s2a-color-red-100: #fff6f5;
  --s2a-color-red-200: #ffebe8;
  --s2a-color-red-300: #ffd6d1;
  --s2a-color-red-400: #ffbcb4;
  --s2a-color-red-500: #ff9d91;
  --s2a-color-red-600: #ff7665;
  --s2a-color-red-700: #ff513d;
  --s2a-color-red-800: #f03823;
  --s2a-color-red-900: #d73220;
  --s2a-color-red-1000: #b72818;
  --s2a-color-red-1100: #9c2113;
  --s2a-color-red-1200: #811b0e;
  --s2a-color-red-1300: #68150a;
  --s2a-color-red-1400: #501006;
  --s2a-color-red-1500: #3b0b04;
  --s2a-color-red-1600: #1d0502;

  /* Orange ramp */
  --s2a-color-orange-100: #fff6e7;
  --s2a-color-orange-500: #ffa213;
  --s2a-color-orange-600: #fc7d00;
  --s2a-color-orange-900: #c24e00;
  --s2a-color-orange-1600: #190800;

  /* Yellow ramp */
  --s2a-color-yellow-100: #fff8cc;
  --s2a-color-yellow-300: #ffde2c;
  --s2a-color-yellow-500: #e6af00;
  --s2a-color-yellow-900: #9e6600;
  --s2a-color-yellow-1600: #120b00;

  /* Green ramp */
  --s2a-color-green-100: #edfcf1;
  --s2a-color-green-500: #2bd17d;
  --s2a-color-green-600: #12b867;
  --s2a-color-green-900: #05834e;
  --s2a-color-green-1600: #000f0c;

  /* Semantic aliases */
  --s2a-color-background-brand: var(--s2a-color-brand-adobe-red);
  --s2a-color-background-default: var(--s2a-color-gray-25);
  --s2a-color-background-subtle: var(--s2a-color-gray-50);
  --s2a-color-background-inverse: var(--s2a-color-gray-1000);
  --s2a-color-background-knockout: var(--s2a-color-gray-1000);
  --s2a-color-border-brand: var(--s2a-color-brand-adobe-red);
  --s2a-color-border-default: var(--s2a-color-gray-800);
  --s2a-color-border-subtle: var(--s2a-color-gray-300);
  --s2a-color-border-disabled: var(--s2a-color-gray-400);
  --s2a-color-content-default: var(--s2a-color-gray-1000);
  --s2a-color-content-strong: var(--s2a-color-gray-900);
  --s2a-color-content-subtle: rgb(0 0 0 / 64%);
  --s2a-color-content-brand: var(--s2a-color-brand-adobe-red);
  --s2a-color-content-knockout: var(--s2a-color-gray-25);
  --s2a-color-content-disabled: var(--s2a-color-gray-400);
  --s2a-color-content-utility-error: var(--s2a-color-red-900);
  --s2a-color-focus-ring-default: var(--s2a-color-blue-900);
  --feds-cta-primary-bg: #3b63fb;
  --feds-cta-primary-bg--hover: #274dea;
  --feds-color-adobeBrand: #eb1000;
  --feds-color-blue-link: #274dea;
  --feds-color-link--hover: #1d3ecf;
  --feds-background-nav: #f8f8f8;
  --feds-background-popup: #f3f3f3;
  --feds-background-footer: #fafafa;

  /* Typography — Families */
  --body-font-family: var(--s2a-font-family-default), adobe-clean, "Trebuchet MS", sans-serif;
  --s2a-font-family-adobe-clean: "Adobe Clean";
  --s2a-font-family-adobe-clean-display: "Adobe Clean Display";
  --heading-font-family: "Adobe Clean Display Black", var(--s2a-font-family-adobe-clean-display), adobe-clean-display, "Arial Bold Adjusted", sans-serif;

  /* Typography — Weights */
  --s2a-font-weight-adobe-clean-regular: 400;
  --s2a-font-weight-adobe-clean-medium: 500;
  --s2a-font-weight-adobe-clean-bold: 700;
  --s2a-font-weight-adobe-clean-extrabold: 800;
  --s2a-font-weight-adobe-clean-black: 900;
  --s2a-font-weight-heading: 900;

  /* Typography — Scale (rem) */
  --s2a-font-size-12: 0.75rem;
  --s2a-font-size-14: 0.875rem;
  --s2a-font-size-16: 1rem;
  --s2a-font-size-18: 1.125rem;
  --s2a-font-size-20: 1.25rem;
  --s2a-font-size-24: 1.5rem;
  --s2a-font-size-32: 2rem;
  --s2a-font-size-40: 2.5rem;
  --s2a-font-size-56: 3.5rem;
  --s2a-font-size-80: 5rem;

  /* Typography — Letter spacing */
  --s2a-font-letter-spacing-0: 0;
  --s2a-font-letter-spacing-neg-0_2: -0.2px;
  --s2a-font-letter-spacing-neg-0_48: -0.48px;
  --s2a-font-letter-spacing-neg-0_96: -0.96px;
  --s2a-font-letter-spacing-neg-1_44: -1.44px;
  --s2a-font-letter-spacing-neg-1_68: -1.68px;
  --s2a-font-letter-spacing-neg-3_84: -3.84px;

  /* Spacing (4px spine) */
  --s2a-spacing-2: 2px;
  --s2a-spacing-4: 4px;
  --s2a-spacing-8: 8px;
  --s2a-spacing-12: 12px;
  --s2a-spacing-16: 16px;
  --s2a-spacing-20: 20px;
  --s2a-spacing-24: 24px;
  --s2a-spacing-32: 32px;
  --s2a-spacing-40: 40px;
  --s2a-spacing-48: 48px;
  --s2a-spacing-64: 64px;
  --s2a-layout-sm: 80px;
  --s2a-layout-md: 96px;
  --s2a-layout-lg: 124px;
  --s2a-layout-xl: 160px;
  --s2a-layout-2xl: 240px;

  /* Border radius */
  --s2a-border-radius-0: 0;
  --s2a-border-radius-2: 2px;
  --s2a-border-radius-4: 4px;
  --s2a-border-radius-8: 8px;
  --s2a-border-radius-12: 12px;
  --s2a-border-radius-16: 16px;
  --s2a-border-radius-24: 24px;
  --s2a-border-radius-32: 32px;
  --s2a-border-radius-999: 999px;

  /* Shadows */
  --s2a-shadow-level-1: 0 1px 6px 0 rgb(0 0 0 / 12%);
  --s2a-shadow-level-2: 0 2px 8px 0 rgb(0 0 0 / 16%);
  --s2a-shadow-level-3: 0 4px 12px 0 rgb(0 0 0 / 16%);
  --s2a-shadow-level-4: 0 6px 16px 0 rgb(0 0 0 / 16%);
  --s2a-shadow-hero-hairline: rgb(255 255 255 / 11%) 0 0 0 1px inset;

  /* Grid */
  --grid-columns: 6;
  --grid-gutter: 8px;
  --grid-margin-width: 24px;
  --grid-max-width-default: 1920px;
  --grid-max-width-fluid: 2560px;
}
```

### Tailwind v4
```css
@theme {
  /* Brand */
  --color-adobe-red: #eb1000;
  --color-cc-ps: #3a18ff;
  --color-cc-il: #ff9a00;
  --color-cc-3dar: #99e83f;
  --color-cc-ppafx: #9999ff;

  /* Gray ramp */
  --color-gray-25: #ffffff;
  --color-gray-50: #f8f8f8;
  --color-gray-75: #f3f3f3;
  --color-gray-100: #e9e9e9;
  --color-gray-200: #e1e1e1;
  --color-gray-300: #dadada;
  --color-gray-400: #c6c6c6;
  --color-gray-500: #8f8f8f;
  --color-gray-600: #717171;
  --color-gray-700: #505050;
  --color-gray-800: #292929;
  --color-gray-900: #131313;
  --color-gray-1000: #000000;

  /* Blue (interactive) */
  --color-blue-500: #8eb9fc;
  --color-blue-700: #5d89ff;
  --color-blue-800: #4b75ff;
  --color-blue-900: #3b63fb;
  --color-blue-1000: #274dea;
  --color-blue-1100: #1d3ecf;
  --color-blue-1200: #1532ad;
  --color-blue-1300: #10288c;

  /* Red (utility/error) */
  --color-red-800: #f03823;
  --color-red-900: #d73220;
  --color-red-1000: #b72818;

  /* Accent ramps (product/editorial) */
  --color-orange-500: #ffa213;
  --color-orange-600: #fc7d00;
  --color-yellow-300: #ffde2c;
  --color-green-500: #2bd17d;
  --color-green-600: #12b867;

  /* Semantic */
  --color-background: #ffffff;
  --color-background-subtle: #f8f8f8;
  --color-background-inverse: #000000;
  --color-content-strong: #131313;
  --color-border-default: #292929;
  --color-border-subtle: #dadada;
  --color-cta-primary: #3b63fb;
  --color-cta-primary-hover: #274dea;
  --color-focus-ring: #378ef0;

  /* Fonts */
  --font-heading: "Adobe Clean Display Black", "Adobe Clean Display", "Arial Bold Adjusted", sans-serif;
  --font-body: "Adobe Clean", adobe-clean, "Trebuchet MS", sans-serif;

  /* Font sizes */
  --text-caption: 0.75rem;
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-h5: 1.125rem;
  --text-h4: 1.25rem;
  --text-h3: 1.5rem;
  --text-h2: 2rem;
  --text-h1: 2.5rem;
  --text-super: 3.5rem;
  --text-hero: 5rem;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Letter spacing */
  --tracking-hero: -1.68px;
  --tracking-h2: -0.96px;
  --tracking-h3: -0.48px;
  --tracking-h5: -0.2px;
  --tracking-body: 0;

  /* Spacing */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-layout-sm: 80px;
  --spacing-layout-md: 96px;
  --spacing-layout-lg: 124px;
  --spacing-layout-xl: 160px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-round: 999px;

  /* Shadows */
  --shadow-level-1: 0 1px 6px 0 rgb(0 0 0 / 12%);
  --shadow-level-2: 0 2px 8px 0 rgb(0 0 0 / 16%);
  --shadow-level-3: 0 4px 12px 0 rgb(0 0 0 / 16%);
  --shadow-level-4: 0 6px 16px 0 rgb(0 0 0 / 16%);
}
```