What is Nordstrom's primary brand color?

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.

What typeface does Nordstrom use, and what should I use as a substitute?

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.

Why does Nordstrom not have a brand color?

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.

What is Nordstrom's corner-radius philosophy?

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.

Can I use this DESIGN.md to build my own React fashion-retail site?

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.

Nordstrom Design System

Nordstrom's marketing system as a DESIGN.md file.

About Nordstrom DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source nordstrom.com

E-commerce & Retail

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.

What makes it distinct

Editorial photography over chromethe 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 blackthe 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 monocultureone Mark Simonson grotesk does display, body, button, nav, and label across 11 size steps with no second family
Zero-radius product cardsthe four-up product grid uses 0px corners on every tile so the merchandise photography reads as catalog plates rather than rounded chips

Live at nordstrom.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

nordstrom.com

Explore Nordstrom

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Nordstrom design system FAQ

Common questions about Nordstrom's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Nordstrom — official site

Nordstrom's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.