What is Madewell's primary brand color?

Madewell does not run a declared brand voltage hex. The system is built on pure black ink (#000000) and a warm off-white canvas (#faf9f7) with no chromatic accent in the chrome. Where most DTC apparel brands hold a single saturated hex as the CTA fill and link accent, Madewell's brand color is the indigo of the denim in the merchandise photography — it appears in the image but never in the UI chrome itself. The primary CTA is a black-fill, white-text button with a 4px border radius. This makes Madewell one of the few apparel e-commerce brands whose entire visual identity is carried by photography rather than by any declared brand token.

What typeface does Madewell use, and what makes it distinctive?

Madewell runs a single grotesque sans-serif family (proprietary or closely aligned with National 2 or Aktiv Grotesk) at weight 400 across every tier, from 11px captions to 48px display headlines. The distinctive move is the lowercase register: nav links, CTA labels, headlines, and product titles all run in lowercase or sentence-case, never in uppercase or tracked small-caps. This is the system's most legible typographic brand signal — J.Crew, Aritzia, and Everlane all use uppercase-tracked caps for nav and button labels, reading as authoritative. Madewell runs lowercase everywhere and reads as casual. If the proprietary family is unavailable, National 2 or Aktiv Grotesk at weight 400 are the closest open-source substitutes.

Why does Madewell use a 4px corner radius when J.Crew uses 0px?

The 4px radius is the geometric signal that distinguishes Madewell from its J.Crew Group sibling. J.Crew's 0px hard-corner geometry references print editorial and catalog tradition — authoritative, grid-strict, institutional. Madewell's 4px softening is just enough to read as approachable rather than austere, matching the lowercase type register and the casual-denim product positioning. The radius applies to the primary CTA, secondary ghost button, text inputs, and size-swatch cells. It does not extend to a pill radius — no fully-rounded geometry exists in the system, which keeps the brand from sliding into the DTC-generic pill-button aesthetic of direct-to-consumer brands like Allbirds or Warby Parker.

How does denim-tonal photography define the Madewell brand?

Madewell's photography brief is built around texture rather than narrative. Where J.Crew's campaign photography tells a seasonal story (models on location, ensemble styling, lifestyle context), Madewell leads with the material: close-cropped denim texture, flat-lay garment arrangements on ecru grounds, candid street photographs where the denim is the visible subject rather than the occasion. The tonal range of this photography — indigo through ecru, raw denim through bleach-wash — gives the page its chromatic identity without any brand accent token in the chrome. The canvas color (warm off-white) is calibrated to read as the ecru ground the garments photograph against, connecting the surface of the page to the surface of the merchandise.

Can I use this DESIGN.md to build a casual apparel storefront in Madewell's register?

Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce Madewell's casual discipline: warm off-white canvas, ink black, lowercase grotesque, 4px radius CTAs, no accent color, denim-tonal photography hierarchy. Reference tokens directly: {colors.ink} for #000000, {colors.canvas} for the warm off-white, {rounded.sm} for 4px, {typography.display-lg} for the 48px lowercase display tier. The critical constraint to preserve is the lowercase type register — changing button labels or nav links to uppercase immediately shifts the brand register from casual-denim to editorial-catalog. Madewell earns the lowercase by being consistent: nothing in the chrome uses uppercase tracking, which makes the case-sensitivity a typographic signature rather than an oversight.

Madewell Design System

Madewell's denim-casual storefront as a DESIGN.md file.

About Madewell DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source madewell.com

E-commerce & Retail

Madewell's storefront makes a claim through photography that no color token can: that the brand's identity is the texture of lived-in denim. The hero is not a campaign photograph of models on location — it is a close-up of indigo-wash fabric, or a candid of someone in well-worn jeans on a downtown street, or a flat lay of a raw-denim trucker jacket against an ecru ground. The typographic system runs lowercase, which is the most visible way the brand distances itself from its J.Crew Group parent: where J.Crew runs headline serifs and spaced small-caps nav links in the tradition of a catalog, Madewell runs lowercase grotesque across every role — nav, headline, body, CTA — communicating that the brand is worn, not presented. The canvas is a warm off-white, one temperature step away from pure white, closer to the undyed cotton of a natural-fiber garment.

This DESIGN.md file packages the storefront into a machine-readable spec written to the Google Labs open format. Inside: 14 color tokens drawn from a warm off-white canvas, pure black ink, and three grades of soft gray; 11 typography tokens built around a single lowercase grotesque family used at weight 400 across every tier with modest size variation; a 3-step radius vocabulary centered on a 4px default with no pill geometry; an 8-step spacing scale anchored on 8px; and 15 component entries covering the full-bleed denim hero, the compact lowercase nav, the 4px-radius primary CTA, the 4-up product merchandising grid, the product tile, the size-swatch picker, the text input, and the footer.

Feed this file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces Madewell's casual discipline — warm canvas, ink black, lowercase grotesque, 4px CTAs, no accent color, photography-first hierarchy — rather than a generic apparel system with pill buttons and a seasonal accent tint. The one move worth transferring to other DTC brands is the lowercase type treatment as brand register: most apparel brands default to uppercase small-caps for nav and CTAs because it reads as authoritative. Madewell inverts the convention and reads as approachable — the clothing is for wearing, not displaying.

What makes it distinct

Denim-tonal photography as brand identityindigo-wash textile shots and lived-in-denim styling replace the editorial campaign format of J.Crew, positioning product texture as the visual brand
Lowercase grotesque voicenav, headlines, and CTAs run lowercase or sentence-case, never uppercase-tracked like most apparel peers; the casual register is a typographic brand decision
Warm off-white canvasthe background is a warm cream rather than pure white, softening the indigo photography against a surface that reads like natural cotton rather than screen pixels
Soft 4px CTA radiusthe only geometric break from J.Crew's 0px sibling; a single modest rounding distinguishes the brand's casual register from its parent's editorial austerity
No declared brand accent colorthe full chromatic identity lives in the denim and textile photography; the chrome runs on ink black and off-white alone

Live at madewell.com

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

madewell.com

Explore Madewell

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Madewell design system FAQ

Common questions about Madewell'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.

Madewell — official site

Madewell's public marketing and e-commerce 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.