H&M Design System

H&M's marketing chrome does something its Inditex rival ZARA also does, but with a single critical difference: it gives the entire above-fold chrome to black-and-white, then holds one held-in-reserve red voltage in a single wired CSS variable that lights up only the logo and the sale-price palette. The hero is a full-bleed runway-photography moment — a fashion editor's blurred-motion campaign shot, then a tiled grid of model close-ups in white-on-cream styling, then a product-card grid of cardigans, jackets, dresses, and skirts laid out flat against the canvas. The single chromatic moment in the page chrome is the red H&M wordmark in the top-right of the nav, sitting at native brand weight against the white canvas. Where ZARA holds zero voltage above the fold and lets the runway photography do every chromatic job, and where Uniqlo paints its hero red as a constant marketing fill, H&M splits the difference: zero accent in the body chrome, one held-in-reserve red on the logo and the sale chip.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 17 color tokens drawn from a near-monochrome palette (pure #ffffff at frequency 14 as bg, pure #000000 at frequency 612 as text / border / icon — the dominant load-bearing structural color), three near-black variants for chat-widget overrides and pressed states, a 5-occurrence mid-grey #737373 for placeholder text, plus the H&M red #e50010 reserved for the brand logo and the sale palette. Twelve typography tokens span HM Sans Regular (weight 400) and HM Sans Semi Bold (weight 500) from 12px caption up to 14px uppercase nav-link; the Hebrew variant HMSansHebrew-Regular handles RTL locales like the Israeli site captured here. The radius scale is zero — only one 50% radius for the cart-count badge across 802 scanned elements.

Feed this file to Claude or Cursor and it reproduces H&M's specific moves: monochrome chrome carrying every CTA / nav / label surface, red held in reserve for the logo and the sale chip only, HM Sans at weight 400 across body and nav with weight 500 reserved for the rare emphasis moment, 0px corners universally on every CTA / card / tile, and uppercase tracking-normal nav-links at 14px as the dominant typographic tier. The token references resolve cleanly — `{colors.canvas}` for the white floor, `{colors.ink}` for the black ink, `{colors.brand-red}` for the held-in-reserve logo color — so the AI never has to invent a value. The disciplined move worth borrowing is the held-in-reserve red pattern: a single chromatic voltage wired into 28 semantic CSS vars (`--base-brand-logo`, `--product-sale`, `--fds-color-fill-logo`, `--base-favourite`, `--base-notification`) but never used as a CTA background or as body chrome.