J.Crew Design System

J.Crew's storefront is a magazine given a checkout button. The hero is a full-bleed seasonal campaign photograph — models in the current collection against a location backdrop — and every pixel of chrome around it recedes: no gradient overlay on the image, no badge floating in the corner, no animated carousel indicator. The typographic hierarchy is divided between a single serif display family for editorial headline moments and a neutral grotesque for every operational label, nav link, and product description. The CTA geometry is hard: 0px border radius on every button and every form input, the same right-angle discipline a J.Crew catalog grid enforces across its spreads. Where Everlane uses tightly-spaced lowercase body type and Madewell leads with raw-indigo textile photography, J.Crew anchors on the Ivy League editorial tradition — the clothing is photographed on location, in ensemble, like a story rather than a product shot.

The DESIGN.md file packages this system into a machine-readable spec for React tooling. Inside: 14 color tokens built from a pure-white canvas, pure-black ink, and a hairline mid-gray; 12 typography tokens pairing Surveyor Display (the serif display voice) with a neutral grotesque across display, heading, body, nav, and caption tiers; a 3-token radius vocabulary that is effectively all zeros except for a single fully-circular icon affordance; an 8-step spacing scale anchored on 8px; and 15 component entries covering the full-bleed hero, the stacked editorial nav, the hard-cornered primary CTA, the 4-up product grid, the product tile, the size-picker, the text input, and the footer column.

Feed this file to Claude or Cursor and the agent reproduces J.Crew's editorial discipline — white canvas, ink black, Surveyor Display headlines, hard-cornered CTAs, zero accent — rather than a generic apparel template with pill buttons and a seasonal highlight color. The one move worth borrowing is the complete subordination of chrome to photography: every design decision in the system points toward "get out of the photograph's way." Brands that attempt this half-heartedly — placing a tinted gradient over the hero, adding a colored badge layer, running a rounded-rect primary button — produce a page where the chrome competes with the image rather than framing it.