New Balance Design System

New Balance's digital marketing site reads like a sporting-goods catalog that discovered it should be a website — and decided to stay mostly a catalog. The page runs a near-monochrome chrome of deep charcoal and off-white, organizes product imagery into dense 4-column grids with tight gutters, and sets every headline in Helvetica Neue weight 700 without any custom typeface commission. Where Nike pushes dynamic motion and Adidas deploys a bespoke sans, New Balance trusts the Swiss utilitarian grotesque that has been on running-shoe boxes since the 1970s. The system is quietly editorial rather than loudly branded — the identity lives in the shoes and the photographers, not in the chrome.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 14 color tokens anchored on a near-monochrome charcoal-and-white scale — deep charcoal, canvas white, light gray surface tiers, hairline gray, and a small set of semantic tones (red for sale/error, forest green for success, amber for loyalty points) — plus a yellow accent used selectively for promotional banners. Ten typography tokens run Helvetica Neue across display (40px / 700), heading, body, and label tiers with zero custom font weight surprises. Fourteen components cover the sharp-edged primary button, editorial product card, top-nav, the dense product grid, and the promotional price treatment.

Feed this file to Claude or Cursor to reproduce New Balance's specific approach: charcoal-on-off-white chrome, Helvetica Neue at athletic weights without custom font costs, 0–4px sharp-edge radius as the dominant shape language, and a catalog-dense grid rhythm that prioritizes product volume over whitespace generosity. The system's editorial restraint is the distinguishing move — it is the only major athletic brand in the category that runs a stock grotesque and makes it feel correct.