---
version: alpha
name: "Nordstrom"
website: "https://www.nordstrom.com"
description: >-
  An upper-tier American department-store marketing site that runs Brandon Text at 60/700 over an editorial photograph and almost nothing else — the chrome is near-black ink on white, the only chromatic moment is a small clearance-red badge, and product grids let the merchandise photography supply every other color in the page. The system inverts the e-commerce convention of red-pill CTAs by paring nav, product cards, and primary actions down to black-on-white pill buttons against an off-black ink (Nordstrom Gray scale-90), with the brand wordmark itself set in a custom condensed serif rather than the body grotesk.

seo:
  title: "Nordstrom Design System for React — Brandon Text, near-black ink, 18 components"
  metaDescription: "Nordstrom's marketing system as a DESIGN.md file. Editorial fashion photography over a white canvas, Brandon Text 60/700 displays, near-black ink chrome, and a single critical-red accent. For React, Next.js, and AI tools."
  highlights:
    - "Editorial photography over chrome — the hero is a city-skyline travel shoot at 60/700 with the call-to-action sitting on the image itself, no overlay panel, no gradient scrim"
    - "Near-black ink, never pure black — the entire chrome runs on Nordstrom Gray scale-90 #191a1b at frequency 4541, with #000000 reserved for the brand wordmark fill"
    - "Critical red as semantic, not brand — #d82508 appears only on price reductions and form-error states, never as a CTA fill or brand accent"
    - "Brandon Text monoculture — one Mark Simonson grotesk does display, body, button, nav, and label across 11 size steps with no second family"
    - "Zero-radius product cards — the four-up product grid uses 0px corners on every tile so the merchandise photography reads as catalog plates rather than rounded chips"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Nordstrom's homepage is the closest thing in mass-market American retail to a print-magazine cover. A single 1376px-wide fashion photograph — currently a couple shot against a foggy harbor skyline — fills the above-fold band, and on top of it sits a 60px Brandon Text headline ("Pack Your Best Travel Looks") in pure white. There is no overlay panel, no scrim gradient, no soft-fade behind the text. The image carries the typography directly, and a small white-outline pill CTA sits beneath. Where Target and Walmart paint the hero with a saturated brand color and stack offer tiles into a grid, Nordstrom treats the hero as one editorial photograph and lets the merchandise speak for itself.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 13 color tokens drawn from the 105 CSS custom properties Nordstrom exposes on `:root` (under the `--ndls-` prefix — the Nordstrom Design Language System), organized into a near-black ink core, a small structural neutral ladder, and a single critical-red token reserved for sale prices and form errors. Brandon Text is the only typeface family — 11 sizes from 12px caption to 60px hero display, weighted at 400 for body and 700 for display, nav, and small labels. The system declares no secondary serif, no monospace voice, and no display family beyond Brandon Text itself. 18 components cover the editorial hero, the black pill CTA, the product-grid plate, the disclosure-only secondary button, the search input, and the bottom-rule nav.

    Feed this file to Claude or Cursor and it will reproduce Nordstrom's specific moves: editorial photography under display type with no overlay chrome, near-black ink (`#191a1b`) instead of pure black, zero-radius product tiles in a 4-up grid, and a strict separation between brand-red (absent) and critical-red (sale price + error). The token references resolve cleanly without invention — `{colors.ink}` for the workhorse text, `{colors.critical}` for sale-price red, `{typography.display-xl}` for the hero. Treat it as a reference: the move worth borrowing is the discipline of letting the photograph do the chromatic work, which only holds when the photography budget is in place.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.nordstrom.com"
      title: "Nordstrom — official site"
      description: "Nordstrom's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Nordstrom's primary brand color?"
      answer: "Nordstrom's marketing chrome runs on near-black ink (#191a1b), wired into the CSS as --ndls-color-scale-gray-alpha-90 and used 4541 times across the captured page — 2140 as text and 2153 as border. Pure black (#000000) is reserved for the Nordstrom wordmark itself and a handful of brand-primary surfaces. The site has no chromatic brand voltage; the only saturated color is a critical red (#d82508, --ndls-color-foreground-critical) reserved for clearance pricing and form-error states. The chromatic work is done by the editorial photography in the hero and product grid, not by brand chrome — an inversion of the red-and-yellow voltage that Target and Walmart use to claim shelf space."
    - id: "typography"
      title: "What typeface does Nordstrom use, and what should I use as a substitute?"
      answer: "The marketing site is set almost entirely in Brandon Text — a Mark Simonson grotesk shipped via custom WOFF with Arial as the fallback. The hero displays sit at 60px in weight 700 with a 68px line height; product titles run at 28px / 700; the body text and nav labels share 16px (400 for body, 700 for nav links and section headings); product-card metadata sits at 12-14px / 700. There is no separate display family and no secondary monospace voice — Brandon Text covers 11 size steps from 12px to 60px. The closest open-source substitute is Source Sans 3 at the same weights, or Mukta if you need a tighter line-height match at the 60px display tier. The Nordstrom wordmark itself uses a separate condensed serif that is not part of the marketing system."
    - id: "no-brand-color"
      title: "Why does Nordstrom not have a brand color?"
      answer: "Nordstrom is one of the few large department-store brands whose marketing chrome is monochrome by choice. The site has no Macy's-style brand red, no Saks-black-with-saturation accent, no chromatic header band — the entire navigation, footer, and button system runs on near-black ink over white. The decision pushes every chromatic decision into the editorial photography (skyline shots, designer features, product close-ups) and the merchandise itself. Sale red (#d82508) appears only on price-reduction badges; it is a semantic flag, not a brand voltage. The discipline matches the in-store experience, where the chrome is painted white and the clothes carry the color."
    - id: "rounded-style"
      title: "What is Nordstrom's corner-radius philosophy?"
      answer: "The radius scale is small-step plus pill. 2px appears 161 times across the captured page on inputs and small chips, 4px 104 times on secondary surfaces, and 8px 41 times on larger cards. The pill treatment (500px or 9999px) carries the primary CTA and the search-bar field. Most notably, the product-card grid uses 0px corners on every tile — Nordstrom treats catalog plates as full-bleed rectangles, refusing the rounded-chip convention that Target and Walmart both apply. The result reads as catalog-page geometry rather than software-component geometry."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React fashion-retail site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Nordstrom's specific moves: editorial hero photography under 60/700 display type, near-black ink instead of pure black, zero-radius product tiles, and the strict separation between sale-price red and the (absent) brand red. The tokens resolve cleanly without invention. You can also reference them directly in Tailwind or CSS-variable form. The one move worth borrowing only if you have the photography budget is the no-overlay hero — every other upper-tier fashion retailer has tried it and most have abandoned it because their stock photography cannot carry the typographic weight."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#191a1b"
  canvas: "#ffffff"
  brand: "#000000"
  critical: "#d82508"
  critical-dark: "#b80009"
  subtle: "#647175"
  surface-subtle: "#efefef"
  hairline: "#dce3e6"
  border-default: "#838d91"
  border-disabled: "#c1c1c1"
  selected: "#157e64"
  link: "#0000ee"
  accent-lime: "#b2d494"

typography:
  display-xl:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 68px
    letterSpacing: 0
  display-md:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: 0
  heading-lg:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 31.92px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-bold:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-sm:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  caption-md:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 18.2px
    letterSpacing: 0
  caption-sm:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: 0
  input-md:
    fontFamily: "\"Brandon Text\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16.1px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "8px"
  pill: "500px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"

components:
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "0"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: transparent
    textColor: "{colors.subtle}"
    typography: "{typography.body-sm}"
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.pill}"
    padding: "12px 24px"
    height: "40px"
    border: "0"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.pill}"
    padding: "12px 24px"
    height: "40px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.none}"
    padding: "12px 32px"
    height: "64px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.none}"
    padding: "0px 0px 3px"
    height: "25px"
  card-product:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-md}"
    rounded: "{rounded.none}"
    padding: "0"
    borderColor: "{colors.hairline}"
  card-editorial:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.none}"
    padding: "32px"
  badge-clearance:
    backgroundColor: transparent
    textColor: "{colors.critical}"
    typography: "{typography.caption-md}"
    rounded: "{rounded.xs}"
    padding: "2px 4px"
    borderColor: "{colors.critical}"
  price-original:
    backgroundColor: transparent
    textColor: "{colors.subtle}"
    typography: "{typography.caption-md}"
  price-sale:
    backgroundColor: transparent
    textColor: "{colors.critical}"
    typography: "{typography.caption-md}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.input-md}"
    rounded: "{rounded.none}"
    padding: "0px 10px 1px"
    height: "40px"
    borderColor: "{colors.border-default}"
  search-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.input-md}"
    rounded: "{rounded.pill}"
    padding: "0px 16px"
    height: "40px"
    borderColor: "{colors.border-default}"
  link-inline:
    backgroundColor: transparent
    textColor: "{colors.link}"
    typography: "{typography.body-lg}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "48px 32px"
    borderColor: "{colors.hairline}"
---

## Overview

Nordstrom's marketing site does something almost no other large department-store brand attempts. **Photograph as chrome.** The above-fold hero is a single 1376px-wide editorial fashion photograph — currently a couple shot against a foggy harbor skyline — with a 60px Brandon Text headline sitting directly on the image in pure white, no scrim, no overlay panel. Where Macy's paints a red header band and overlays a sale-pricing tile, where Saks adds a black-on-cream brand bar, and where Target and Walmart construct grids of saturated offer chips, Nordstrom commits to one photograph as the entire above-fold experience and lets the typography rest on the image directly.

The chromatic restraint reinforces the move. The system has no brand voltage at all — the chrome runs on near-black ink (`{colors.ink}` — #191a1b) wired into CSS as `--ndls-color-scale-gray-alpha-90` and used 4541 times across the captured page (2140 as text, 2153 as border). The only saturated color is critical red (`{colors.critical}` — #d82508), and the captured render uses it exclusively for clearance-pricing badges and form-error states. Pure `#000000` is reserved for the Nordstrom wordmark fill itself, not for body chrome. The system's only other chromatic surface is a small "Designer Clearance Up to 40% Off" editorial card — and even that pulls its color from a grayscale photograph, not from a brand palette. This is the inverse of the saturated-canvas strategy at Target (a single bullseye red throughout) or the navy-and-yellow voltage at Walmart: Nordstrom holds the chrome silent so the merchandise photography can do the chromatic work.

Typography is Brandon Text monoculture — a Mark Simonson grotesk shipped via custom WOFF with Arial as the fallback. Display sits at 60px / 700; section headings at 28px / 700; body at 16px / 400; small labels at 12-14px / 700. The system declares no secondary serif, no monospace voice, and no second display family. The Nordstrom wordmark itself is set in a separate condensed serif but that face is not used anywhere else in the page chrome. Display weight is consistent at 700 across every tier above 16px — the brand commits to bold display authority where Cloudflare and Stripe lean on a lighter editorial 500.

**Key Characteristics:**
- Near-black ink (`{colors.ink}` — #191a1b) carries the entire chrome at 4541 occurrences; pure `#000000` is reserved for the wordmark fill only.
- No brand voltage. The only saturated tone is `{colors.critical}` (#d82508) at frequency 166, used as text and border only — never as a CTA fill.
- Brandon Text monoculture across 11 size steps from 12px caption to 60px display, with weight 400 for body and 700 for everything else.
- Zero-radius product cards (`{rounded.none}`) in the 4-up product grid — Nordstrom refuses the rounded-chip convention that Target and Walmart both apply.
- Black pill CTA — `{component.button-primary}` is `{colors.ink}` fill with `{rounded.pill}` (500px) corners; the secondary variant inverts to white-with-ink-outline at the same pill geometry.
- Editorial photography in every band: hero couple shot, MANGO x Hailey Bieber feature, designer-card row, summer-edit campaign — the page reads as a magazine layout rather than a category landing page.
- Surface palette of two: `{colors.canvas}` (#ffffff) for the body floor and `{colors.surface-subtle}` (#efefef) for the editorial-card backgrounds. There is no third elevated tone.
- Hairlines do the elevation work: `{colors.hairline}` (#dce3e6) at frequency 106 and `{colors.border-default}` (#838d91) carry every card boundary; the system has essentially no shadow tier.

## Colors

### Ink

- **Nordstrom Ink** (`{colors.ink}` — #191a1b): frequency 4541. Used as text (2140), border (2153), background (82). The workhorse chrome color — nav labels, body text, button fills, footer text, hairlines. Wired as `--ndls-color-scale-gray-alpha-90`, `--ndls-color-overlay-product-image`, and `--ndls-color-scale-gray-alpha-60`. Slightly warm — the 1-point shift toward green/yellow keeps it from reading as digital black.
- **Brand Primary** (`{colors.brand}` — #000000): frequency 20 — used as background (14), text (2), border (2). Reserved for the Nordstrom wordmark fill and a small handful of brand-primary surface treatments. Wired as `--ndls-color-brand-primary` and `--ndls-color-brand-nordstrom-primary`. Distinct from the `{colors.ink}` chrome tone above.

### Canvas

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 209. The body floor and the dominant background for cards, hero text fills, button-secondary fills. Pure white — Nordstrom does not soften it to a warm cream the way Cloudflare or Aesop do.
- **Surface Subtle** (`{colors.surface-subtle}` — #efefef): frequency 151, all as background. The grey card surface used for editorial inserts ("Designer Clearance Starts Now"), summary chips, and the footer band sections. Wired as `--ndls-color-background-subtle`.

### Critical

- **Critical** (`{colors.critical}` — #d82508): frequency 166. Used as text (83) and border (83), zero as background. The strictly-semantic red — clearance-pricing badges, form-error outlines, "Final Sale" tags. Wired as `--ndls-color-foreground-critical` and `--ndls-color-scale-red-60`. Notable for its absence as a background fill — Nordstrom does not paint with red.
- **Critical Dark** (`{colors.critical-dark}` — #b80009): frequency 2. The pressed/hover variant on critical states, wired as `--ndls-color-brand-holiday-red`. Reserved for seasonal holiday treatments not currently rendered.

### Neutrals

- **Subtle** (`{colors.subtle}` — #647175): frequency 134. Used as text (67) and border (67). Secondary metadata, "View All" disclosure links, original-price strikethroughs, product-card subtitles. Wired as `--ndls-color-scale-gray-60` and `--ndls-color-foreground-subtle`.
- **Hairline** (`{colors.hairline}` — #dce3e6): frequency 106. Used as text (53) and border (53). The default card-divider tone — between product tiles, around editorial cards, beneath the nav. Wired as `--ndls-color-border-disabled` and `--ndls-color-scale-gray-20`.
- **Border Default** (`{colors.border-default}` — #838d91): frequency 1. The input-field outline. Wired as `--ndls-color-border-default`. Heavier than the hairline so the form field reads as tappable.
- **Border Disabled** (`{colors.border-disabled}` — #c1c1c1): frequency 3. Used on disabled-control outlines and the carousel track rail.

### Accent

- **Selected** (`{colors.selected}` — #157e64): frequency 4. The selected-state foreground — checkbox active, filter selected, accent dot. Wired as `--ndls-color-foreground-selected`. The only green in the system.
- **Link** (`{colors.link}` — #0000ee): frequency 2. The default browser link color, surfaced for the legacy "Customer Service" inline link in the international-shipping band. Not a brand token — a fallback.
- **Accent Lime** (`{colors.accent-lime}` — #b2d494): frequency 1. A small pastel inserted as a category-chip background in the editorial inventory; reserved use only.

## Typography

### Font Family

The system runs **Brandon Text** for every typographic surface — a Mark Simonson grotesk shipped as a custom WOFF with the fallback stack walking to `Arial, sans-serif`. There is no secondary serif, no monospace voice, and no separate display family. The Nordstrom wordmark itself uses a separate condensed serif that is held outside the marketing token system.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 60px | 700 | 68px | Hero h3 ("Pack Your Best Travel Looks"), editorial-campaign display |
| `{typography.display-md}` | 32px | 700 | 40px | Smaller editorial display, "Designer Clearance Starts Now" header |
| `{typography.heading-lg}` | 28px | 700 | 36px | Section title ("MANGO Featuring Hailey Bieber") |
| `{typography.heading-md}` | 24px | 700 | 31.92px | h2 ("Top Picks for You", "The Summer Edit") |
| `{typography.body-lg}` | 16px | 400 | 24px | Default running text, body paragraphs, longform copy |
| `{typography.body-bold}` | 16px | 700 | 24px | Nav links, button labels, "View All" actions |
| `{typography.body-sm}` | 14px | 400 | 20px | Secondary metadata, product subtitles |
| `{typography.label-sm}` | 14px | 700 | 20px | Filter chips, category tabs, footer headings |
| `{typography.caption-md}` | 13px | 700 | 18.2px | Product titles, price strings, clearance badges |
| `{typography.caption-sm}` | 12px | 700 | 18px | Product brand label above title, fine print |
| `{typography.input-md}` | 14px | 400 | 16.1px | Search input, address-search, form field text |

### Principles

Display tops at 700 across every tier. The hero at 60/700 is the loudest typographic moment in the system, but every section heading from 24px upward also sits at 700 — there is no lighter editorial moment in the manner of Cloudflare's weight-500 display. Body and form input run at 400; everything else (nav, buttons, captions, labels, small product titles) sits at 700. The weight contrast is binary: 400 for read-it-once prose, 700 for everything tappable or scannable. No 500/600 middle tier exists.

### Note on Font Substitutes

Brandon Text is licensed. The closest open-source substitute is **Source Sans 3** at the same weights — the x-height and counter widths transfer cleanly at 16-24px. For the 60px display tier where Brandon Text's tighter cap height matters more, **Mukta** at weight 700 with a -0.01em letter-spacing match comes closer. The Nordstrom wordmark serif has no easy match; if you need a condensed serif for a marketing wordmark, **Playfair Display Condensed** is the safer reference.

## Layout

### Spacing System

- **Base unit:** 4px. Frequency 167 in the captured page.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px.
- **Hero padding:** `0` — the editorial photograph extends full-bleed to the viewport edge, with the headline floating in the centered safe zone.
- **Card internal padding:** `{spacing.xs}` (4px) on product tiles, `{spacing.xl}` (32px) on editorial cards.
- **Section vertical rhythm:** ~64px between major bands. Tighter than Target (~96px) or Cloudflare (~96px) — the page packs more inventory above the fold.

### Grid & Container

- **Max content width:** ~1376px on the hero photograph, ~1280px on the product grids.
- **Hero block:** full-bleed editorial photograph with the centered headline + CTA stack.
- **Product grid:** 4-column at desktop with 4px gaps between tiles ("Top Picks for You" runs 4 across).
- **Editorial inserts:** 1- and 2-column campaign cards with a 50/50 split panel for the MANGO x Hailey Bieber feature.
- **"New & Now" band:** 4-up grid of designer-feature cards with text-over-color treatments below the imagery.

### Rhythm

The page alternates between **editorial photograph** bands and **catalog inventory** bands. The hero is one photograph; the next band is a 4-up product grid; the third is another editorial card ("Designer Clearance Starts Now"); the fourth is a full-bleed campaign photograph (MANGO); the fifth returns to a 4-up tile grid. The cadence mirrors a print magazine — photograph, inventory, photograph, inventory — rather than the offer-stacked grid that mass-market retailers favor.

## Elevation

The system has essentially **no shadow tier**. The captured page renders elevation through hairline borders and tonal contrast: `{colors.hairline}` (#dce3e6) carries 106 occurrences as dividers and card outlines, `{colors.border-default}` (#838d91) carries the heavier form-input outline.

- **Flat (no shadow):** body, hero, product grid, editorial cards, footer — 99% of surfaces.
- **Hairline outlines:** `{colors.hairline}` on product-card boundaries, `{colors.border-default}` on text inputs; the form field outlines are thicker than the card outlines so they read as tappable.
- **Tonal lift:** `{colors.surface-subtle}` (#efefef) cards on the `{colors.canvas}` (#ffffff) body — the 5-point lightness gap reads as a soft elevation without requiring a drawn shadow.

## Shapes

The radius scale is **mixed-step plus pill**, but the dominant move is `{rounded.none}` on the product grid:

- `{rounded.none}` 0px — every product card in the 4-up grid; every editorial-card surface; the hero photograph; the section dividers. The dominant catalog-plate treatment.
- `{rounded.xs}` 2px (frequency 161) — small chips, badges, the inline clearance flag.
- `{rounded.sm}` 4px (frequency 104) — secondary surfaces, dropdown popovers, filter chip surrounds.
- `{rounded.md}` 8px (frequency 41) — larger card surfaces, modal corners.
- `{rounded.pill}` 500px / `{rounded.full}` 9999px — the primary CTA, the secondary CTA, and the search-input field. The only fully-rounded surfaces in the system.

The decision to keep product cards at 0px is the system's most distinctive shape move. Target uses 8px on every offer chip; Walmart uses 8px on its tile grid; Nordstrom commits to catalog-plate geometry and lets the photographs read as printed rectangles.

## Components

**`hero-section`** — Full-bleed editorial photograph, 0px padding, no border-radius. Holds a 60px Brandon Text headline in `{colors.canvas}` directly over the image and a white-outline pill CTA centered beneath.

**`hero-heading`** — White text on the photograph background, Brandon Text 60px / 700, 68px line height. The display tier — direct over the photograph with no scrim or overlay panel.

**`section-heading`** — Ink `{colors.ink}` text at `{typography.heading-md}` (24px / 700). Used for "Top Picks for You", "The Summer Edit", "Now Trending" — the standard catalog-shelf title.

**`body-paragraph`** — Default ink running-text at `{typography.body-lg}` — the workhorse paragraph.

**`body-paragraph-muted`** — `{colors.subtle}` variant at `{typography.body-sm}` for secondary metadata under product cards.

**`button-primary`** — The signature CTA. Ink `{colors.ink}` fill on white, white text, `{rounded.pill}` 500px corners, 12×24px padding, 40px height. The "Shop Now" pill that sits on the hero photograph and at the bottom of editorial cards.

**`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px ink outline, same pill geometry as the primary. The "Learn More" disclosure on editorial cards.

**`top-nav`** — White `{colors.canvas}` surface, 64px height, 1px `{colors.hairline}` bottom rule. Houses the Nordstrom wordmark flush left, the category bar (Designer / What's New / Women / Men / Kids / Home / Beauty / Sale), and the right-aligned utility cluster (sign-in, wishlist, bag).

**`nav-link`** — Ink text at `{typography.body-bold}` (16px / 700), 0px 0px 3px padding, 25px height. No hover background visible; the hover treatment is a 3px ink underline beneath the label.

**`card-product`** — White `{colors.canvas}` surface, 0px radius, 4px internal padding. The product tile in the 4-up grid — a full-bleed merchandise photograph above the brand label, product title, price line, and color-swatch row. The 0-radius treatment is the system's most distinctive shape decision.

**`card-editorial`** — `{colors.surface-subtle}` (#efefef) surface, 0px radius, 32px internal padding. The grey editorial-inset card ("Designer Clearance Starts Now / Up to 40% Off") that breaks up the product grids.

**`badge-clearance`** — Critical-red `{colors.critical}` text and 1px critical-red border on a transparent fill, `{rounded.xs}` 2px corners, 2×4px padding. The only place red appears in the system outside of price strings.

**`price-original`** — Subtle `{colors.subtle}` strikethrough text at `{typography.caption-md}` (13px / 700). The original price beside the sale price.

**`price-sale`** — Critical `{colors.critical}` text at `{typography.caption-md}`. The reduced price — never a fill, always text only.

**`text-input`** — White surface, ink text, 1px `{colors.border-default}` outline, 0px radius (square corners), 0×10×1px padding, 40px height. The default form field — square, not rounded.

**`search-input`** — White surface, ink text, 1px `{colors.border-default}` outline, `{rounded.pill}` 500px corners, 0×16px padding, 40px height. The header search bar — pill, not square. The contrast between the square form input and the pill search input is intentional: search invites tap, forms invite typing.

**`link-inline`** — Browser-default `{colors.link}` (#0000ee) text at `{typography.body-lg}`. Surfaced for the international-shipping disclosure link only — Nordstrom does not use this color anywhere else.

**`footer`** — White surface, ink text, 48×32px padding, 1px hairline top rule. The standard mega-footer with category columns, customer-service links, and the social-icon row. No surface contrast against the body floor.

## Do's and Don'ts

**Do** put the typography directly on the editorial photograph with no scrim or overlay panel. The hero's discipline is the entire above-fold experience — adding a gradient scrim breaks the print-magazine reference and tips the page back into the SaaS-hero category.

**Do** use `{colors.ink}` (#191a1b) — never pure `#000000` — for chrome, text, and button fills. The 1-point warm shift from true black is consistent across 4541 occurrences in the system; mixing in pure black destroys the cohesion.

**Do** keep product cards at `{rounded.none}` (0px). The catalog-plate geometry is the move that separates Nordstrom from every rounded-chip retailer; rounding the tiles even to 4px shifts the page into Target territory.

**Do** let critical-red (`{colors.critical}` — #d82508) be a strictly-semantic color: clearance pricing, error outlines, "Final Sale" tags. Use it as a CTA fill and it becomes a brand voltage Nordstrom deliberately does not have.

**Don't** introduce a saturated brand color for the chrome. The system's identity comes from the absence of one — putting a red header band or a navy accent strip on the nav would re-categorize the brand as mass-market.

**Don't** use `{colors.brand}` (#000000) for body text or button fills. It is reserved for the Nordstrom wordmark fill at 20 captured occurrences only; the chrome runs on `{colors.ink}` (#191a1b) instead.

**Don't** introduce a second display family or a serif for editorial moments. Brandon Text at 700 carries every display tier; reaching for Playfair or Optima for an editorial callout breaks the typeface monoculture that defines the brand.

**Don't** soften the canvas from pure `{colors.canvas}` (#ffffff) to a warm cream. The brightness contrast against the dark editorial photography is the move; warming the canvas tips the page toward Aesop or Aritzia editorial territory and loses the catalog clarity.

## Known Gaps

- **Hover and focus states:** the captured render shows resting states only. Button hover, focus rings, and active press states live in the `--ndls-color-action-*` token family but are not exercised on the homepage.
- **Form input error states:** `{component.text-input}` carries the resting state; the critical-red error treatment lives in the checkout and account-management flows, not on the marketing surface.
- **Dark mode:** the captured marketing surface is light-only. Nordstrom has no dark variant in the Nordstrom Design Language System (NDLS) tokens.
- **Motion:** the hero carousel auto-advances and the product-card hover swaps to a second photograph; the spec captures end-state values only. Easing curves and stagger timing live in the live React components.
- **Product surfaces:** this DESIGN.md captures the homepage only. The category landing pages, product-detail pages, and checkout flow carry richer token sets (filter chips, variant selectors, size grids) that are not represented here.
- **Subbrand systems:** Nordstrom Rack (`nordstromrack.com`), Trunk Club, and Treasure & Bond run separate marketing chrome with their own color and typography systems — not captured here.
- **Wordmark face:** the Nordstrom wordmark is set in a custom condensed serif that is not included in the typography tokens above; it lives only inside the brand-asset SVG.