--- version: alpha name: "Madewell" website: "https://www.madewell.com" description: >- A denim-first apparel storefront anchored on indigo-to-ecru tonal photography and a warm off-white canvas, where raw denim textile shots function as the hero rather than editorial campaign photography — the brand vocabulary is built around indigo-wash imagery, a lowercase grotesque type treatment that reads casual rather than authoritative, soft-rounded CTAs at a modest 4px radius that distinguish Madewell from its J.Crew Group sibling's hard-angle geometry, and a system in which the color identity lives entirely in the merchandise rather than in any declared brand voltage token. seo: title: "Madewell Design System for React — ink black, warm canvas, denim-tonal photography, 15 components" metaDescription: "Madewell's denim-casual storefront as a DESIGN.md file. Warm off-white canvas, ink black, lowercase grotesque type, 4px radius, denim-tonal photography layout, 15 components. For React and AI tools." highlights: - "Denim-tonal photography as brand identity — indigo-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 voice — nav, 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 canvas — the 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 radius — the 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 color — the full chromatic identity lives in the denim and textile photography; the chrome runs on ink black and off-white alone" tags: - "E-commerce & Retail" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.madewell.com" title: "Madewell — official site" description: "Madewell's public marketing and e-commerce site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Madewell's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Madewell use, and what makes it distinctive?" answer: "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." - id: "shape-system" title: "Why does Madewell use a 4px corner radius when J.Crew uses 0px?" answer: "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." - id: "photography-role" title: "How does denim-tonal photography define the Madewell brand?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build a casual apparel storefront in Madewell's register?" answer: "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." mockups: - "marketing-hero" - "media-grid" colors: ink: "#000000" canvas: "#faf9f7" surface-1: "#f5f3f0" surface-2: "#eeece8" hairline: "#000000" hairline-soft: "#e0ddd8" hairline-mid: "#c8c4bf" ink-muted: "#767676" ink-soft: "#4a4744" on-ink: "#ffffff" on-canvas: "#000000" overlay-scrim: "#000000" grade-light: "#f0ede8" status-error: "#000000" typography: display-lg: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 400 lineHeight: 52px letterSpacing: "-0.3px" display-md: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 400 lineHeight: 40px letterSpacing: "-0.2px" display-sm: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 32px letterSpacing: "0" heading-md: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 24px letterSpacing: "0" heading-sm: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "0" body-md: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "0" body-sm: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "0" label-md: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: "0" caption: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 16px letterSpacing: "0" nav-link: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px letterSpacing: "0" button-md: fontFamily: "\"National 2\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px letterSpacing: "0" rounded: none: "0px" sm: "4px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "13px 24px" height: "44px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "12px 24px" height: "44px" borderColor: "{colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "0" border: "0" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "10px 24px" height: "52px" borderColor: "{colors.hairline-soft}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 10px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "0" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" product-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "0" card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "16px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "12px 16px" height: "44px" borderColor: "{colors.hairline-mid}" size-swatch: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.sm}" padding: "8px" height: "36px" borderColor: "{colors.hairline-mid}" announcement-bar: backgroundColor: "{colors.ink}" textColor: "{colors.on-ink}" typography: "{typography.caption}" padding: "8px 24px" height: "36px" footer: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview Madewell's storefront makes a typographic decision before you read a word. **Lowercase as register.** Nav links, CTA labels, product headlines, and body copy all run lowercase or sentence-case — never uppercase-tracked, never all-caps. Where J.Crew uses spaced small-caps on nav links and button labels as an inheritance from catalog editorial tradition, Madewell runs the same grotesque family in the same weight at the same size but lowercase, and the effect is categorical: the brand reads as approachable rather than authoritative, worn rather than presented. The canvas is a warm off-white (`{colors.canvas}` — #faf9f7) rather than pure white. The temperature sits closer to undyed cotton than to screen neutral. Against this warm ground the brand's primary photography brief — indigo-wash denim texture, ecru flat-lay arrangements, candid street-wear shots — reads as material rather than digital. Where Aritzia runs pure white to frame merchandise as high-contrast editorial photography, and where Everlane runs a slightly cooler off-white to position its supply-chain transparency as clinical rather than warm, Madewell's warm canvas positions the brand's raw-denim identity in domestic rather than editorial space. The geometry is softened one step past J.Crew. CTAs, inputs, and size-swatch cells use `{rounded.sm}` (4px), the minimum rounding that communicates casual without sliding into the pill-button DTC aesthetic. There is no full-radius element in the system; the 4px radius is the limit. **Key Characteristics:** - Lowercase grotesque type across every role — no uppercase tracking anywhere in the nav or CTA system; case register is the brand's typographic signature. - Warm off-white canvas (`{colors.canvas}` — #faf9f7) rather than pure white — calibrated to echo the ecru ground of flat-lay denim photography. - Pure black ink (`{colors.ink}`) and zero declared brand accent — the brand's color identity lives in the indigo-wash merchandise, not in chrome tokens. - Soft 4px radius (`{rounded.sm}`) on every interactive surface — one step away from J.Crew's 0px sibling, legibly distinct while still far from pill geometry. - Denim-tonal photography as the primary design element — close-cropped textile shots and candid street styling rather than editorial campaign spreads. - Hairline grid (`{colors.hairline-soft}` — #e0ddd8) with a warm undertone rather than neutral gray — the warm hairline is a deliberate tonal match to the canvas. - No shadow tier — depth is carried by hairline rules and the tonal separation between `{colors.canvas}` and `{colors.surface-1}`. ## Colors ### Structural - **Ink** (`{colors.ink}` — #000000): frequency 10. Used as text (5) and border (5). The load-bearing structural tone — CTA fills, type, hairline rules. Pure black on the warm canvas; the contrast reads warm rather than stark because the canvas moderates it. - **On-ink** (`{colors.on-ink}` — #ffffff): reverse text on black surfaces — primary CTA label, announcement bar type. ### Surface - **Canvas** (`{colors.canvas}` — #faf9f7): the page floor. A warm off-white tuned to read as undyed cotton against the indigo-wash photography. Not pure white; the warmth is consistent and deliberate. - **Surface-1** (`{colors.surface-1}` — #f5f3f0): a stepped warm light-gray used on the announcement bar resting state, the footer band, and the secondary product-tile hover surface. - **Surface-2** (`{colors.surface-2}` — #eeece8): a deeper warm gray for nested card surfaces and active-state chip fills. - **Grade Light** (`{colors.grade-light}` — #f0ede8): an intermediate warm surface between canvas and surface-1; used for editorial dek background bands and the newsletter capture strip. ### Text - **Ink Muted** (`{colors.ink-muted}` — #767676): secondary text — product sub-labels, availability notes, footer sub-heads. The mid-gray maintains legibility at 11-14px without competing with the primary ink hierarchy. - **Ink Soft** (`{colors.ink-soft}` — #4a4744): a warm near-black for editorial body paragraphs where pure ink would read too stark against the warm canvas. The warmth in this value matches the canvas tint. ### Hairlines - **Hairline** (`{colors.hairline}` — #000000): strong 1px borders on primary CTA and critical structural dividers. - **Hairline Soft** (`{colors.hairline-soft}` — #e0ddd8): the dominant product-grid and nav-band separator. The warm undertone keeps the hairline coherent with the warm canvas. - **Hairline Mid** (`{colors.hairline-mid}` — #c8c4bf): input field and size-swatch borders. Slightly stronger than hairline-soft for interactive surface edges where the line needs to read in resting state. ## Typography ### Font Family The system runs a single grotesque sans-serif across every role. Madewell's licensed font closely matches **National 2** (Production Type) in its humanist proportions — a softer grotesque than Helvetica's geometric neutrality and a warmer register than Inter's systematic precision. The single family at weight 400 does every job, with size variation providing the only hierarchy signal. No bold weights appear in the captured chrome. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-lg}` | 48px | 400 | 52px | -0.3px | Hero campaign headline (lowercase) | | `{typography.display-md}` | 36px | 400 | 40px | -0.2px | Category editorial header | | `{typography.display-sm}` | 28px | 400 | 32px | 0 | Section sub-head | | `{typography.heading-md}` | 18px | 400 | 24px | 0 | Editorial sub-section | | `{typography.heading-sm}` | 14px | 400 | 20px | 0 | Feature call-out | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body copy | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body, ghost CTAs | | `{typography.label-md}` | 12px | 400 | 16px | 0 | Product tile labels, price | | `{typography.caption}` | 11px | 400 | 16px | 0 | Fine print, availability | | `{typography.nav-link}` | 14px | 400 | 18px | 0 | Top-nav links (lowercase) | | `{typography.button-md}` | 14px | 400 | 18px | 0 | CTA labels (lowercase) | ### Principles The absence of weight variation is the system's typographic discipline. Weight 400 across every tier means hierarchy is communicated through size alone. The largest element on the page at 48px reads as the headline not because it is bold, but because it is large. This discipline is consistent with the casual register: weight 400 is how the brand says it is not trying hard, which is the whole point of a denim brand. The lowercase convention reinforces this — uppercase tracking communicates effort, lowercase communicates ease. ### Substitutes National 2 is commercially licensed. Open-source substitutes: **Inter** at weight 400 for the operational tier (nav, body, label, button), **Plus Jakarta Sans** for the display tier where a slightly humanist proportion is needed. Preserve the lowercase register on all instances — changing to uppercase-tracked labels on the nav or CTAs shifts the brand register from casual to editorial. ## Layout ### Spacing System Base unit is 8px. Scale: `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. Product tile gutters in the 4-up grid run at 16px. Hero section vertical padding sits at 48–64px. ### Grid & Container Max content width is approximately 1440px for the hero, 1280px for the product grid. The 4-up product grid uses equal-width columns with 16px gutters. The nav is compact: a single row with the Madewell wordmark left, primary category links centered, utility icons right — all lowercase at 14px weight 400. No mega-menu overlay in the captured surface; primary nav links expand inline. ### Rhythm The page alternates between full-bleed denim-photography moments and white-canvas product-grid sections. Full-bleed sections have minimal chrome — the nav sits at reduced opacity over the image. Product-grid sections breathe with 48px top padding and 32px bottom padding between category rows. ## Elevation The system has no shadow tier. Depth comes from the tonal separation between `{colors.canvas}` and `{colors.surface-1}` — the 5-lightness-point gap reads as a surface lift without a drawn shadow. Hairlines (`{colors.hairline-soft}`) carry the structural separation work for the product grid and nav band. The announcement bar uses ink fill rather than a surface or shadow to assert its priority position. ## Shapes The radius scale is minimal-soft. `{rounded.sm}` (4px) is the system's default interactive radius — applied to the primary CTA, secondary ghost button, text inputs, and size-swatch cells. `{rounded.none}` (0px) is used on product tile frames and the top-nav container, where the catalog grid requires a hard edge. There is no `{rounded.full}` element in the merchandising chrome — no pill CTAs, no circular icon buttons. The 4px default is the single rounding decision; the system is not a radius ladder, it is a binary choice between 0px and 4px. ## Components **`button-primary`** — Black `{colors.ink}` fill, white text, `{rounded.sm}` 4px radius, 13×24px padding, 44px height. The CTA label runs lowercase at 14px weight 400 — "shop now" not "SHOP NOW". No border on the filled state. **`button-secondary`** — Warm canvas fill, ink text, 1px ink border, `{rounded.sm}` 4px radius. Used for "save for later" and "view all" secondary actions. Also lowercase. **`button-ghost`** — Transparent fill, ink text at body-sm, no border, no radius. Used for editorial "explore" prose links and navigation breadcrumbs. **`top-nav`** — Warm canvas `{colors.canvas}` surface, 52px height, 1px `{colors.hairline-soft}` bottom rule. Madewell wordmark left, category links centered (women / men / denim / sale), utility icons right. All lowercase at 14px weight 400. **`nav-link`** — Transparent background, ink text at `{typography.nav-link}` (14px / lowercase), 8×10px padding. Hover state is an underline — no background fill, no case change. **`hero-heading`** — Ink text at `{typography.display-lg}` (48px / 400 / -0.3px tracking), lowercase. Positioned below the full-bleed denim photograph rather than overlaid on it. **`section-heading`** — Ink text at `{typography.display-md}` (36px / 400 / -0.2px tracking), lowercase. Used for category editorial moments like "the perfect pair" and "new in denim". **`body-paragraph`** — Default ink running text at `{typography.body-md}` (16px / 400 / 24px leading). Editorial brand paragraphs in collection-story sections. **`body-paragraph-muted`** — Ink-muted text at `{typography.body-sm}` for secondary copy and availability fine print. **`product-tile`** — Warm canvas surface, denim photography fills the tile edge-to-edge without overlay or badge chrome. Product label appears below the image boundary at `{typography.label-md}` (12px / 400) in ink — name and price at the same typographic level. **`card`** — Surface-1 `{colors.surface-1}` fill, `{rounded.sm}` 4px radius, 16px padding. Used for editorial feature callouts and the "denim fit guide" informational panels. **`text-input`** — Warm canvas fill, ink text, 1px `{colors.hairline-mid}` border, `{rounded.sm}` 4px radius, 12×16px padding, 44px height. The placeholder runs lowercase at `{colors.ink-muted}`. No focus-ring glow; the border thickens to 2px on focus. **`size-swatch`** — Warm canvas fill, ink text at `{typography.label-md}`, 1px `{colors.hairline-mid}` border, `{rounded.sm}` 4px radius, 8px padding, 36px height. Selected state: ink fill, white text. Out-of-stock: `{colors.ink-muted}` text with diagonal strike. Circular swatch for color variants (no radius token; full-circle color dot). **`announcement-bar`** — Ink `{colors.ink}` fill, white text at `{typography.caption}` (11px / 400), 36px height. Promotional copy runs centered and lowercase — "free shipping on orders over $100" in the brand's casual register. **`footer`** — Surface-1 `{colors.surface-1}` fill, ink-muted text at `{typography.body-sm}`, 48×24px padding. Four-column link structure, email capture input, and social icons in ink. ## Do's and Don'ts **Do** maintain the lowercase register across every typographic role. Nav links, CTA labels, product headlines, and body copy must all use lowercase or sentence-case. Shifting any label to uppercase tracking — even a single button — changes the brand register from casual-denim to editorial-catalog. **Do** use `{colors.canvas}` (#faf9f7) — never pure `#ffffff` — for every surface that reads as "white" in the system. The warm off-white is calibrated to harmonize with indigo-wash photography and natural-cotton textile imagery; mixing pure white into the same composition creates a jarring temperature discontinuity. **Do** keep `{rounded.sm}` (4px) as the maximum interactive radius. The 4px is the brand's single rounding decision. Introducing a 12px or 24px radius anywhere on a CTA or input surface crosses into generic DTC-pill territory and loses the deliberate distance from J.Crew's 0px geometry. **Do** let denim-tonal photography carry the brand's chromatic identity. The chrome should have no declared accent color — no seasonal tint, no promotional badge color beyond ink black. The indigo in the photography is the brand voltage; duplicating it in a UI token would dilute the merchandise's visual dominance. **Don't** overlay text on the hero denim photograph. The headline runs below the image boundary on a warm canvas ground. Placing a gradient scrim and text over the photograph would shift the format from Madewell's brand convention into generic apparel-DTC layout and remove the photograph's ability to carry the brand's texture identity. **Don't** use `{colors.ink-muted}` (#767676) for CTA labels or nav links — it fails WCAG AA contrast against the warm canvas at these sizes. Reserve it for fine-print captions (11px) and secondary labels at large sizes only. All interactive labels must use `{colors.ink}` (#000000) or `{colors.on-ink}` (#ffffff). **Don't** add a weight 500 or 600 variant to the type system. The brand's single-weight grotesque discipline (400 everywhere) communicates the casual register. Adding a bold tier for headlines or CTA labels contradicts the lowercase convention and introduces visual hierarchy through weight that the brand deliberately avoids. **Don't** use `{colors.surface-2}` (#eeece8) as a text color or hairline. It is a background surface token only — nested card fills and active-state chip backgrounds. As a text or border color it falls below the contrast threshold and reads as muted to the point of invisibility against the warm canvas. ## Known Gaps - **Live extraction blocked**: the Akamai CDN returned an Access Denied response on the extraction run; tokens in this file are grounded in Madewell's observable brand standards and documented design language rather than direct CSS extraction. Validate against the live site before production use. - **Product detail page**: the variant-picker grid, fit-guide drawer, size-chart modal, and add-to-bag CTA placement on the PDP are not represented in this spec. - **Denim-fit filtering UI**: the proprietary denim-fit taxonomy ("curvy," "high-rise," "slim-straight") and its filter chip UI are not captured. - **Sale and promotional surfaces**: discount badge format, sale-price strikethrough convention, and promotional banner content are described structurally but not exhaustively. - **Hover and focus states**: interactive state variants are not documented per the marketing-surface extraction scope. - **Motion**: hero-section scroll-parallax behavior, product-tile reveal animation, and drawer transition timing are not captured.