---
version: alpha
name: Nike
description: "Monochrome discipline, broken only by a Futura shout and one volt flash."
colors:
  on-surface-variant: "#9E9EA0"
  on-surface: "#111111"
  surface: "#FFFFFF"
  error: "#D30005"
  primary: "#FF5000"
  gray-50: "#FAFAFA"
  gray-100: "#F5F5F5"
  gray-200: "#E5E5E5"
  gray-300: "#CACACB"
  gray-500: "#707072"
  gray-900: "#1F1F21"
  snkrs-red: "#EE0005"
  volt-green: "#83F13B"
  link-blue: "#1151FF"
typography:
  body-4-legal:
    fontFamily: Helvetica Now Text
    fontSize: 0.625rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  caption:
    fontFamily: Helvetica Now Text
    fontSize: 0.75rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-small:
    fontFamily: Helvetica Now Text
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Helvetica Now Text
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  title-4:
    fontFamily: Helvetica Now Text
    fontSize: 1.25rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  title-3:
    fontFamily: Helvetica Now Text
    fontSize: 1.5rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  title-1:
    fontFamily: Helvetica Now Text
    fontSize: 2.5rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display-1:
    fontFamily: Helvetica Now Display
    fontSize: 3rem
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
  oversize-3:
    fontFamily: Helvetica Now Text
    fontSize: 3.75rem
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  oversize-2:
    fontFamily: Helvetica Now Text
    fontSize: 4.75rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  oversize-1:
    fontFamily: Helvetica Now Text
    fontSize: 6rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  brand-display-1:
    fontFamily: Helvetica Now Display
    fontSize: 3rem
    fontWeight: 500
    lineHeight: 9
    letterSpacing: 0em
rounded:
  button: 30px
  input-search-field: 24px
  card-media: 0px
  small-controls: 4px
  fully-rounded: 9999px
spacing:
  xs: 4px
  s: 8px
  m: 12px
  l: 24px
  xl: 36px
  xxl: 60px
  xxxl: 84px
  xxxxl: 120px
---
# Nike — Style Reference
> Monochrome discipline, broken only by a Futura shout and one volt flash.

**Theme:** light

Nike runs on near-total restraint: a white canvas, `#111111` ink, and a ten-step neutral gray ramp do almost all the work, so the moment color appears it reads as a decision, not decoration. The signature move is scale — condensed **Nike Futura ND** set in all-caps at a `.9` line-height and sizes that climb past 11rem, stacked over a full-bleed cinematic sport photo until the type becomes the layout. Buttons are fully-pill (`30px`) black-on-white or white-on-black, never bordered when solid; there is no gentle in-between. Chromatic accents — Nike orange `#FF5000`, SNKRS red `#EE0005`, the volt-green promo flash, link blue `#1151FF` — are rationed to badges, launches, and system states, each drawn from a disciplined 10-tint ramp rather than invented per page. The result is an athletic system that feels loud through composition and confidence, not through palette.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Black | `#111111` | `--color-black` | Primary ink, all body/heading text, solid-primary button fill, the Swoosh. The whole identity rests here. |
| White | `#FFFFFF` | `--color-white` | Page canvas, text-on-image, inverse-button fill. The default surface — treated as a color, not an absence. |
| Gray 50 | `#FAFAFA` | `--color-gray-50` | Faintest wash — the near-white utility bar behind the top nav. |
| Gray 100 | `#F5F5F5` | `--color-gray-100` | Secondary surface: search field, pill/chip fill, icon-button ground, loading/skeleton. |
| Gray 200 | `#E5E5E5` | `--color-gray-200` | Hover fill, disabled fill, tertiary border/hairline. |
| Gray 300 | `#CACACB` | `--color-gray-300` | Secondary borders and the resting stroke on ghost/disabled controls. |
| Gray 400 | `#9E9EA0` | `--color-gray-400` | Disabled text; inverse secondary text on dark. |
| Gray 500 | `#707072` | `--color-gray-500` | Secondary text — the "Find a Store / Help / Join Us" utility links and captions. Primary-button hover fill. |
| Gray 900 | `#1F1F21` | `--color-gray-900` | Primary inverse background — the near-black used behind light content, softer than pure `#111111`. |
| Nike Orange | `#FF5000` | `--color-brand-orange` | Brand accent = badge/label credit (`text-badge`). Editorial pop only — never a CTA fill. |
| SNKRS Red | `#EE0005` | `--color-brand-snkrs-red` | Reserved for SNKRS launch moments. Do not use as a generic accent. |
| Critical Red | `#D30005` | `--color-critical` | System error / critical state text and borders only. |
| Volt Green | `#83F13B` | `--color-green-200` | The neon promo-bar flash (drawn from the green ramp) — sale banners, "DAYONE"-style codes on black. Hype signal, not chrome. |
| Link Blue | `#1151FF` | `--color-blue-500` | Text links, info state, focus ring. The only sanctioned interactive hue. |
| Brand Orange Gradient | `linear-gradient(113.7deg, #FF0015 3.64%, #fe5000 50.92%, #FF6A00 97.26%)` | `--color-gradient-brand-orange` | Reserved brand gradient for hero/expressive moments. Rare by design. |

## Tokens — Typography

### Nike Futura ND — the brand voice · `--font-brand-display`
The condensed, all-caps display face behind headlines like "NEVER IF, SIMPLY WHEN." Set extremely tight (`line-height: .9`) so multi-line headlines lock into a solid mass. This is the one typographic gesture that says "Nike" before you read a word.
- **Substitute:** Helvetica Now Text Medium, Helvetica, Arial, sans-serif (the declared stack fallbacks)
- **Weights:** Regular (400) — weight comes from the face's condensed density, not a bold axis
- **Sizes:** `1.25rem` → `7.5rem` (brand-display-5 through the largest display step)
- **Line height:** `.9`–`1.1`
- **Letter spacing:** None added — the face is drawn tight; rely on it
- **Role:** Marquee headlines, hero statements, campaign wordmarks. Always uppercase.

### Helvetica Now Display (Bold / XBold / Medium) — structural headings · `--font-display`
The workhorse display grotesk for titles and oversize numerals where Futura would be too editorial. XBold carries the largest "oversize" steps; Medium (500) carries titles.
- **Substitute:** Helvetica, Arial, sans-serif
- **Weights:** 500 (Medium), Bold, XBold
- **Sizes:** `1.25rem` (title-4) → `9.375rem` (oversize-1 at wide breakpoints)
- **Line height:** `1`–`1.2`
- **Letter spacing:** Normal
- **Role:** Section titles, product headings, big price/stat display.

### Helvetica Now Text (+ Medium) — body & UI · `--font-body`
Every paragraph, label, nav item, and button. Regular (400) for prose, Medium (500) for emphasis/`-strong` and controls.
- **Substitute:** Helvetica, Arial, sans-serif
- **Weights:** 400 (Regular), 500 (Medium)
- **Sizes:** `.625rem` → `1.25rem` (body-4 → body-1)
- **Line height:** `1.5`
- **Letter spacing:** Normal
- **Role:** Body copy, nav, captions, buttons, form fields.

### Palatino LT Pro Light — editorial "conversation" · `--font-conversation`
A light serif reserved for long-form editorial / storytelling passages ("conversation" scale). The only serif in the system — a deliberate tonal shift into essay mode.
- **Substitute:** Helvetica, Arial, sans-serif
- **Weights:** 300 (Light)
- **Sizes:** `1rem` → `3.75rem`
- **Line height:** `1.1`–`1.5`
- **Letter spacing:** Normal
- **Role:** Editorial features, quotes, brand storytelling — never UI.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Body 4 / legal | `.625rem` (10px) | 1.5 | normal | `--text-body-4` |
| Caption | `.75rem` (12px) | 1.5 | normal | `--text-body-3` |
| Body small | `.875rem` (14px) | 1.5 | normal | `--text-body-2` |
| Body | `1rem` (16px) | 1.5 | normal | `--text-body-1` |
| Title 4 | `1.25rem` (20px) | 1.2 | normal | `--text-title-4` |
| Title 3 | `1.5rem` (24px) | 1.2 | normal | `--text-title-3` |
| Title 1 | `2.5rem` (40px) | 1.2 | normal | `--text-title-1` |
| Display 1 | `3rem` (48px) | 1.2 | normal | `--text-display-1` |
| Oversize 3 | `3.75rem` (60px) | 1.1–1.2 | normal | `--text-oversize-3` |
| Oversize 2 | `4.75rem` (76px) | 1–1.1 | normal | `--text-oversize-2` |
| Oversize 1 | `6rem`–`9.375rem` | 1–1.1 | normal | `--text-oversize-1` |
| Brand Display 1 | `3rem`→`7.5rem` | .9–1.1 | none | `--text-brand-display-1` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (generous exterior gutters, big touch targets)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | `4px` | `--spacing-xs` |
| s | `8px` | `--spacing-s` |
| m | `12px` | `--spacing-m` |
| l | `24px` | `--spacing-l` |
| xl | `36px` | `--spacing-xl` |
| xxl | `60px` | `--spacing-xxl` |
| xxxl | `84px` | `--spacing-xxxl` |
| xxxxl | `120px` | `--spacing-xxxxl` |

### Border Radius
| Element | Value |
|---------|-------|
| Button (pill) | `30px` |
| Input / search field | `24px` |
| Card / media | `0px` (hard edges) |
| Small controls | `4px` / `8px` / `12px` |
| Icon button / avatar | `50%` |
| Fully rounded | `9999px` |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Shadow 100 | `0px 4px 8px 0px rgba(17, 17, 17, 0.06), 0px 0px 24px 4px rgba(17, 17, 17, 0.03)` | `--shadow-100` |
| Sticky nav lift | `rgba(17, 17, 17, 0.08) 0px -2px 6px 0px` | `--shadow-nav` |

### Layout
- **Page max-width:** Full-bleed hero; content grids use 16px gutters with 24px (small) → 48px (large) exterior gutters
- **Section gap:** `60px`–`120px`
- **Card padding:** Minimal — imagery is edge-to-edge; text sits below with `0`/`20px` inset
- **Element gap:** `8px`–`24px`

## Components

### Primary Button
**Role:** The main commit action — "Shop", "Add to Bag".
Solid black fill `#111111`, white text `#FFFFFF`, no border, fully pill `30px`, padding `12px 24px`, Helvetica Now Text Medium `16px/500`. Hover shifts fill to gray-500 `#707072`. On dark surfaces it inverts to white fill / black text. No shadow — the shape carries it.

### Secondary Button
**Role:** Alternate action beside the primary — "Watch".
Gray-100 fill `#F5F5F5`, black text `#111111`, no border, pill `30px`, padding `6px 16px`–`12px 24px`. A quieter sibling; still pill, still borderless.

### Ghost / Outline Button
**Role:** Tertiary action on plain surfaces.
Transparent fill, `1.5px` (`border-width-m`) gray-300 `#CACACB` stroke, black text, pill `30px`. Border darkens to `#111111` on hover.

### Icon Button
**Role:** Compact circular action — cart, favorite, carousel prev/next/pause.
`50%` radius. Primary = black fill / white glyph; secondary = gray-100 `#F5F5F5` fill (→ gray-300 `#CACACB` on hover). Icon sizes `16` / `24` / `48px`.

### Search Field
**Role:** Header search input.
Gray-100 fill `#F5F5F5`, no visible border, `24px` radius, black text `#111111`, `16px` Helvetica Now Text, leading search glyph. Field height ~`56px`.

### Top Utility Bar
**Role:** Slim account/store strip above the main nav.
Gray-50 `#FAFAFA` ground, right-aligned links in gray-500 `#707072` at `14px`, pipe-separated ("Find a Store | Help | Join Us | Sign In"). Recedes by design.

### Primary Navigation
**Role:** Category bar — Men, Women, Kids, Jordan, NikeSKIMS, Back to School, Sale.
White ground, Swoosh logo left, centered nav links in `#111111` Medium `16px`, search + favorite + cart icons right. Sticky, with a faint upward lift shadow when pinned.

### Promo / Marquee Bar
**Role:** Sale announcement strip.
Full-width black `#111111` ground with volt-green text (green ramp, e.g. `#83F13B`) — offer left, promo code right, centered Swoosh. Maximum contrast, zero subtlety.

### Hero Statement Block
**Role:** The campaign centerpiece.
Full-bleed photo/video; overlaid Nike Futura ND all-caps headline in white `#FFFFFF` at `48px`→`7.5rem`, `line-height: .9`; small supporting line in Helvetica Now Text below; a black pill + a gray pill CTA pair at bottom-left.

### Carousel Controls
**Role:** Advance the hero slideshow.
Bottom-right cluster of circular (`50%`) gray-100 icon buttons — pause, previous, next — plus a small dot pager. Understated so the imagery leads.

### Badge / Label
**Role:** Editorial credit or status tag ("Just In", "Member").
Nike orange text `#FF5000` (`text-badge`) or a system tint (red/green/blue). Small `12px` uppercase. Color-coded, never a filled CTA.

### Form Input (standard)
**Role:** Account/checkout field.
`56px` field height inside an `86px` container, gray-100 fill or underline, `24px` radius, blue-500 `#1151FF` focus ring with a soft focus shadow. Error state uses critical red `#D30005`.

## Do's and Don'ts

### Do
- Let type be the layout — set Nike Futura ND in all-caps at `line-height: .9` and let big headlines carry the composition.
- Keep buttons pill (`30px`) and solid: black-on-white or white-on-black. Use gray-100 `#F5F5F5` for the secondary.
- Ration color. Orange `#FF5000` is badge credit, red `#EE0005` is SNKRS, volt-green is promo hype, blue `#1151FF` is links/system — never repurpose them.
- Go full-bleed with imagery and hard edges (`0px` radius on cards/media); reserve rounding for pills and circles.
- Use the gray ramp for hierarchy: `#707072` secondary text, `#F5F5F5` fills, `#E5E5E5` hairlines.

### Don't
- Don't add borders to solid buttons, or give cards drop shadows — depth here is contrast and scale, not elevation.
- Don't tint the black — text is `#111111`, inverse surfaces are `#1F1F21`; no navy, no warm black.
- Don't set headlines in a soft or rounded face, and don't loosen the `.9` display leading.
- Don't turn accents into CTAs — a red or orange fill on a "Buy" button breaks the system.
- Don't reach for the serif (Palatino) anywhere in UI; it belongs to editorial "conversation" text only.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Default page background. |
| 0 | Utility wash | `#FAFAFA` | Faint top-bar / subtle zoning. |
| 1 | Secondary | `#F5F5F5` | Cards, chips, inputs, icon-button grounds. |
| 2 | Hover / disabled | `#E5E5E5` | Interactive fill and hairlines. |
| — | Inverse | `#1F1F21` | Near-black content sections. |
| — | Always dark | `#111111` | Promo bars, hero scrims, footer. |

## Elevation
Depth is almost never a shadow. Nike separates layers with luminance steps (`#FFFFFF` → `#FAFAFA` → `#F5F5F5` → `#E5E5E5`) and hard edges. The one real shadow (`shadow-100`: two stacked low-alpha `rgba(17,17,17,…)` blurs) is used sparingly for modals/overlays, and a faint upward `rgba(17,17,17,0.08)` lift marks the sticky nav. Everything else stands on contrast and scale.

## Imagery
Photography-first and cinematic. Full-bleed athlete/product imagery — filmic color, natural grain, real motion — occupies the hero and carries emotional weight; the Swoosh and Futura headline sit *on* it in white. Product shots are clean, edge-to-edge, on white or gray-100. No illustration, no gradients-as-decoration, no icon soup — the brand's imagery *is* the design. Video is a first-class citizen (autoplay hero, "Watch" CTA).

## Layout
Full-bleed above the fold, contained content grids below. Structure: slim utility bar → white sticky category nav (Swoosh left, links center, actions right) → optional black promo marquee → full-viewport hero with bottom-left headline + CTA pair and bottom-right carousel controls → stacked full-width editorial/product sections separated by generous `60`–`120px` vertical rhythm. Grid uses 16px gutters inside 24–48px exterior gutters. Everything is bold, aligned, and unafraid of empty space around the type.

## Typography Voice
Nike runs two type registers against a neutral spine. **Register one is the shout:** Nike Futura ND, uppercase, condensed, `line-height: .9`, sized until it fills the frame — headlines become architecture. **Register two is the whisper:** Helvetica Now Text at `1rem/1.5` for calm, legible UI and body copy. A third, rarer register — Palatino LT Pro Light "conversation" — drops into serif for long-form storytelling, signaling "read slowly." The signature move is the collision of extremes: a `7.5rem` condensed all-caps statement one scroll away from `10px` legal text, both in the same near-monochrome palette. Tight display leading + roomy body leading is the whole rhythm.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF` / text: `#111111` / surface: `#F5F5F5` / border: `#CACACB` (secondary) or `#E5E5E5` (tertiary) / accent: `#FF5000` (badge only) / primary action: `#111111` (black pill, white text — there is no colored CTA)

## Example Component Prompts
1. **Primary CTA button**: Pill button, `border-radius: 30px`, solid `#111111` background, `#FFFFFF` text, Helvetica Now Text Medium `16px/500`, padding `12px 24px`, no border, no shadow; hover background `#707072`.
2. **Full-bleed hero**: Full-viewport background photo with a dark scrim at bottom; overlay an uppercase Nike Futura ND headline in `#FFFFFF` at `clamp(3rem, 9vw, 7.5rem)` with `line-height: .9`; a `16px` Helvetica Now Text supporting line under it; then a black primary pill and a `#F5F5F5` secondary pill side by side, bottom-left.
3. **Sale promo marquee**: Full-width bar, background `#111111`, centered white Swoosh, offer text left and promo code right in volt-green `#83F13B`, uppercase `14px` Helvetica Now Text Medium.
4. **Header search field**: Input with `#F5F5F5` fill, no border, `border-radius: 24px`, leading search icon, `#111111` text at `16px`, `#1151FF` focus ring, height ~`56px`.
5. **Product card**: Square edge-to-edge image (`border-radius: 0`, background `#F5F5F5`), title in `#111111` Helvetica Now Text Medium `16px` below, price in `16px` Regular, optional orange `#FF5000` "Just In" badge label — no card border, no shadow.

## Similar Brands
- **Off-White / Virgil Abloh's graphic language** — kindred faith in oversized helvetica/condensed caps and hard-edged, high-contrast monochrome as the whole design.
- **The North Face** — athletic monochrome with rationed accent color and full-bleed sport photography.
- **Aesop** — different palette, same discipline: near-monochrome restraint where a single deliberate element does all the talking.
- **Spotify (editorial covers)** — bold condensed type set at frame-filling scale over photography as a core layout device.
- **Supreme** — extreme reductionism (one accent, box logo, no chrome) turned into brand power through confidence, not complexity.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — core */
  --color-black: #111111;
  --color-white: #FFFFFF;

  /* Colors — gray ramp */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #CACACB;
  --color-gray-400: #9E9EA0;
  --color-gray-500: #707072;
  --color-gray-600: #4B4B4D;
  --color-gray-700: #39393B;
  --color-gray-800: #28282A;
  --color-gray-900: #1F1F21;

  /* Colors — red ramp (SNKRS / critical) */
  --color-red-50: #FFE5E5;
  --color-red-100: #FFC3C4;
  --color-red-200: #FFABAD;
  --color-red-300: #FF7975;
  --color-red-400: #FF4E4A;
  --color-red-500: #EE0005;
  --color-red-600: #D30005;
  --color-red-700: #A70E00;
  --color-red-800: #780700;
  --color-red-900: #530300;

  /* Colors — orange ramp (Nike brand accent) */
  --color-orange-50: #FFE2D6;
  --color-orange-100: #FFC5AD;
  --color-orange-200: #FFA584;
  --color-orange-300: #FF8255;
  --color-orange-400: #FF5000;
  --color-orange-500: #D33918;
  --color-orange-600: #9F290F;
  --color-orange-700: #7E200D;
  --color-orange-800: #5D180C;
  --color-orange-900: #3E1009;

  /* Colors — yellow ramp */
  --color-yellow-50: #FEF087;
  --color-yellow-100: #FEEA55;
  --color-yellow-200: #FEDF35;
  --color-yellow-300: #FFD11B;
  --color-yellow-400: #FDC400;
  --color-yellow-500: #FCA600;
  --color-yellow-600: #F08E0A;
  --color-yellow-700: #E57A09;
  --color-yellow-800: #CD6006;
  --color-yellow-900: #99470A;

  /* Colors — green ramp (volt / promo) */
  --color-green-50: #DFFFB9;
  --color-green-100: #BDFB72;
  --color-green-200: #83F13B;
  --color-green-300: #5FE63F;
  --color-green-400: #3CCD49;
  --color-green-500: #1EAA52;
  --color-green-600: #007D48;
  --color-green-700: #00643E;
  --color-green-800: #005034;
  --color-green-900: #003C2A;

  /* Colors — teal ramp */
  --color-teal-50: #D4FFFB;
  --color-teal-100: #9CFFF7;
  --color-teal-200: #69EEE7;
  --color-teal-300: #31CBCB;
  --color-teal-400: #1CB2B6;
  --color-teal-500: #008E98;
  --color-teal-600: #0A7281;
  --color-teal-700: #005C68;
  --color-teal-800: #004856;
  --color-teal-900: #043441;

  /* Colors — blue ramp (links / info / focus) */
  --color-blue-50: #D6EEFF;
  --color-blue-100: #B9E2FF;
  --color-blue-200: #87CEFF;
  --color-blue-300: #4CABFF;
  --color-blue-400: #1190FF;
  --color-blue-500: #1151FF;
  --color-blue-600: #0034E3;
  --color-blue-700: #061DBB;
  --color-blue-800: #02068E;
  --color-blue-900: #020664;

  /* Colors — purple ramp */
  --color-purple-50: #E4E1FC;
  --color-purple-100: #D6D1FF;
  --color-purple-200: #BEAFFD;
  --color-purple-300: #A082FF;
  --color-purple-400: #8755FF;
  --color-purple-500: #6E0FF6;
  --color-purple-600: #5400CC;
  --color-purple-700: #4400A9;
  --color-purple-800: #300080;
  --color-purple-900: #1C0060;

  /* Colors — pink ramp */
  --color-pink-50: #FFE1F3;
  --color-pink-100: #FFCDEA;
  --color-pink-200: #FFB0DD;
  --color-pink-300: #FE90CC;
  --color-pink-400: #FC5DBB;
  --color-pink-500: #ED1AA0;
  --color-pink-600: #D00B84;
  --color-pink-700: #A50767;
  --color-pink-800: #770349;
  --color-pink-900: #4C012D;

  /* Colors — opacity tokens */
  --color-opacity-white-1: #FFFFFF1F;
  --color-opacity-black-1: #1111111F;
  --color-opacity-black-2: #1111115C;
  --color-opacity-black-3: #111111CD;

  /* Colors — brand & semantic */
  --color-brand-orange: #FF5000;         /* orange-400 */
  --color-brand-snkrs-red: #EE0005;      /* red-500 */
  --color-gradient-brand-orange: linear-gradient(113.7deg, #FF0015 3.64%, #fe5000 50.92%, #FF6A00 97.26%);
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F5F5F5;
  --color-background-accent: #111111;
  --color-background-inverse: #1F1F21;
  --color-text-primary: #111111;
  --color-text-secondary: #707072;
  --color-text-link: #1151FF;
  --color-text-badge: #FF5000;
  --color-border-primary: #707072;
  --color-border-secondary: #CACACB;
  --color-border-tertiary: #E5E5E5;
  --color-border-active: #111111;
  --color-focus-ring: #1151FF;
  --color-critical: #D30005;
  --color-success: #007D48;

  /* Typography — Families */
  --font-brand-display: 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
  --font-display: 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Now Text', Helvetica, Arial, sans-serif;
  --font-body-strong: 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
  --font-conversation: 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;

  /* Typography — Scale */
  --text-body-4: 0.625rem;   /* 10px */
  --text-body-3: 0.75rem;    /* 12px */
  --text-body-2: 0.875rem;   /* 14px */
  --text-body-1: 1rem;       /* 16px */
  --text-title-4: 1.25rem;   /* 20px */
  --text-title-3: 1.5rem;    /* 24px */
  --text-title-1: 2.5rem;    /* 40px */
  --text-display-1: 3rem;    /* 48px */
  --text-oversize-3: 3.75rem;
  --text-oversize-2: 4.75rem;
  --text-oversize-1: 6rem;   /* up to 9.375rem at wide breakpoints */
  --text-brand-display: 3rem; /* scales to 7.5rem */
  --leading-display: 0.9;
  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.5;

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 24px;
  --spacing-xl: 36px;
  --spacing-xxl: 60px;
  --spacing-xxxl: 84px;
  --spacing-xxxxl: 120px;
  --spacing-grid-gutter: 16px;
  --spacing-grid-exterior-gutter-s: 24px;
  --spacing-grid-exterior-gutter-l: 48px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 24px;
  --radius-input: 24px;
  --radius-button: 30px;
  --radius-rounded: 9999px;
  --radius-circle: 50%;

  /* Borders */
  --border-width-s: 1px;
  --border-width-m: 1.5px;
  --border-width-l: 2px;

  /* Shadows */
  --shadow-100: 0px 4px 8px 0px rgba(17, 17, 17, 0.06), 0px 0px 24px 4px rgba(17, 17, 17, 0.03);
  --shadow-nav: rgba(17, 17, 17, 0.08) 0px -2px 6px 0px;

  /* Motion */
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 250ms;
  --motion-easing-functional: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-expressive: cubic-bezier(0.6, 0, 0.1, 1);

  /* Breakpoints */
  --breakpoint-s: 600px;
  --breakpoint-m: 960px;
  --breakpoint-l: 1440px;
  --breakpoint-xl: 1920px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — core */
  --color-black: #111111;
  --color-white: #FFFFFF;

  /* Colors — gray */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #CACACB;
  --color-gray-400: #9E9EA0;
  --color-gray-500: #707072;
  --color-gray-600: #4B4B4D;
  --color-gray-700: #39393B;
  --color-gray-800: #28282A;
  --color-gray-900: #1F1F21;

  /* Colors — red */
  --color-red-50: #FFE5E5;
  --color-red-100: #FFC3C4;
  --color-red-200: #FFABAD;
  --color-red-300: #FF7975;
  --color-red-400: #FF4E4A;
  --color-red-500: #EE0005;
  --color-red-600: #D30005;
  --color-red-700: #A70E00;
  --color-red-800: #780700;
  --color-red-900: #530300;

  /* Colors — orange */
  --color-orange-50: #FFE2D6;
  --color-orange-100: #FFC5AD;
  --color-orange-200: #FFA584;
  --color-orange-300: #FF8255;
  --color-orange-400: #FF5000;
  --color-orange-500: #D33918;
  --color-orange-600: #9F290F;
  --color-orange-700: #7E200D;
  --color-orange-800: #5D180C;
  --color-orange-900: #3E1009;

  /* Colors — yellow */
  --color-yellow-50: #FEF087;
  --color-yellow-100: #FEEA55;
  --color-yellow-200: #FEDF35;
  --color-yellow-300: #FFD11B;
  --color-yellow-400: #FDC400;
  --color-yellow-500: #FCA600;
  --color-yellow-600: #F08E0A;
  --color-yellow-700: #E57A09;
  --color-yellow-800: #CD6006;
  --color-yellow-900: #99470A;

  /* Colors — green (volt / promo) */
  --color-green-50: #DFFFB9;
  --color-green-100: #BDFB72;
  --color-green-200: #83F13B;
  --color-green-300: #5FE63F;
  --color-green-400: #3CCD49;
  --color-green-500: #1EAA52;
  --color-green-600: #007D48;
  --color-green-700: #00643E;
  --color-green-800: #005034;
  --color-green-900: #003C2A;

  /* Colors — teal */
  --color-teal-50: #D4FFFB;
  --color-teal-100: #9CFFF7;
  --color-teal-200: #69EEE7;
  --color-teal-300: #31CBCB;
  --color-teal-400: #1CB2B6;
  --color-teal-500: #008E98;
  --color-teal-600: #0A7281;
  --color-teal-700: #005C68;
  --color-teal-800: #004856;
  --color-teal-900: #043441;

  /* Colors — blue (links / info) */
  --color-blue-50: #D6EEFF;
  --color-blue-100: #B9E2FF;
  --color-blue-200: #87CEFF;
  --color-blue-300: #4CABFF;
  --color-blue-400: #1190FF;
  --color-blue-500: #1151FF;
  --color-blue-600: #0034E3;
  --color-blue-700: #061DBB;
  --color-blue-800: #02068E;
  --color-blue-900: #020664;

  /* Colors — purple */
  --color-purple-50: #E4E1FC;
  --color-purple-100: #D6D1FF;
  --color-purple-200: #BEAFFD;
  --color-purple-300: #A082FF;
  --color-purple-400: #8755FF;
  --color-purple-500: #6E0FF6;
  --color-purple-600: #5400CC;
  --color-purple-700: #4400A9;
  --color-purple-800: #300080;
  --color-purple-900: #1C0060;

  /* Colors — pink */
  --color-pink-50: #FFE1F3;
  --color-pink-100: #FFCDEA;
  --color-pink-200: #FFB0DD;
  --color-pink-300: #FE90CC;
  --color-pink-400: #FC5DBB;
  --color-pink-500: #ED1AA0;
  --color-pink-600: #D00B84;
  --color-pink-700: #A50767;
  --color-pink-800: #770349;
  --color-pink-900: #4C012D;

  /* Colors — opacity */
  --color-opacity-white-1: #FFFFFF1F;
  --color-opacity-black-1: #1111111F;
  --color-opacity-black-2: #1111115C;
  --color-opacity-black-3: #111111CD;

  /* Semantic */
  --color-brand-orange: #FF5000;
  --color-brand-snkrs-red: #EE0005;
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F5F5F5;
  --color-background-accent: #111111;
  --color-background-inverse: #1F1F21;
  --color-text-primary: #111111;
  --color-text-secondary: #707072;
  --color-text-link: #1151FF;
  --color-text-badge: #FF5000;
  --color-border-primary: #707072;
  --color-border-secondary: #CACACB;
  --color-border-tertiary: #E5E5E5;
  --color-critical: #D30005;
  --color-success: #007D48;

  /* Typography */
  --font-brand-display: 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
  --font-display: 'Helvetica Now Display XBold', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Now Text', Helvetica, Arial, sans-serif;
  --font-body-strong: 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
  --font-conversation: 'Palatino LT Pro Light', Helvetica, Arial, sans-serif;

  --text-body-4: 0.625rem;
  --text-body-3: 0.75rem;
  --text-body-2: 0.875rem;
  --text-body-1: 1rem;
  --text-title-4: 1.25rem;
  --text-title-3: 1.5rem;
  --text-title-1: 2.5rem;
  --text-display-1: 3rem;
  --text-oversize-3: 3.75rem;
  --text-oversize-2: 4.75rem;
  --text-oversize-1: 6rem;
  --text-brand-display: 7.5rem;

  --leading-display: 0.9;
  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 24px;
  --spacing-xl: 36px;
  --spacing-xxl: 60px;
  --spacing-xxxl: 84px;
  --spacing-xxxxl: 120px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 24px;
  --radius-input: 24px;
  --radius-button: 30px;
  --radius-rounded: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-100: 0px 4px 8px 0px rgba(17, 17, 17, 0.06), 0px 0px 24px 4px rgba(17, 17, 17, 0.03);
  --shadow-nav: rgba(17, 17, 17, 0.08) 0px -2px 6px 0px;

  /* Motion */
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 250ms;
  --motion-easing-functional: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-expressive: cubic-bezier(0.6, 0, 0.1, 1);
}
```