--- version: alpha name: "J.Crew" website: "https://www.jcrew.com" description: >- A preppy American apparel storefront running on a pure white canvas and pure black ink, with editorial photography as the primary design statement — full-bleed seasonal campaign imagery anchors the hero while a restrained serif-and-grotesque typographic system (Surveyor Display for headlines, a clean grotesque for body and navigation) keeps all chrome subordinate to the merchandise; the only structural accent is a single black ink that carries every CTA, border, and typographic weight with zero radius on interactive surfaces, creating the kind of catalog-magazine tension between image and text that defines the brand. seo: title: "J.Crew Design System for React — ink black, Surveyor Display, editorial photography, 15 components" metaDescription: "J.Crew's apparel storefront design system as a DESIGN.md file. Pure black ink, Surveyor Display serif headlines, white canvas, editorial photography-first layout, 15 components. For React and AI tools." highlights: - "Photography-first editorial layout — full-bleed seasonal campaign imagery is the sole hero decoration; zero gradient overlays, zero decorative chrome interrupt the photograph" - "Surveyor Display serif at display tier — the single typographic voltage on a page where grotesque handles every nav, label, and body role" - "Ink black as the only structural color — #000000 carries every CTA fill, nav border, and text weight; no accent, no secondary tint" - "Hard-cornered CTAs — 0px border-radius on every button and input, echoing the sharp right-angle grid of a J.Crew catalog spread" - "Monochrome merchandise grid — product cards pair full-color photography against white canvas with ink labels and hairline dividers, no badge accent color" tags: - "E-commerce & Retail" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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.jcrew.com" title: "J.Crew — official site" description: "J.Crew'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 J.Crew's primary brand color?" answer: "J.Crew does not run a saturated brand voltage. The dominant structural token is pure black (#000000) used across every CTA fill, nav border, typographic ink, and hairline rule. The canvas is pure white (#ffffff). There is no held-in-reserve accent color — no navy, no heritage red, no seasonal tint in the chrome. The only chromatic elements on the page are in the campaign photography itself, which shows the season's colorways. This is a deliberate editorial discipline: the brand's color identity lives in the clothing, not in the UI chrome. Primary CTAs are black-fill, white-text rectangles with 0px corners — the same convention a department-store catalog runs." - id: "typography" title: "What typefaces does J.Crew use, and what should I substitute?" answer: "J.Crew pairs Surveyor Display (a proprietary serif from Hoefler&Co.) for editorial headline moments with a neutral grotesque for all operational surfaces — nav links, product labels, body copy, button labels, and captions. Surveyor Display appears at the display tier (48-64px range) at weight 400-500, carrying the seasonal campaign headline above the fold. The grotesque handles everything else from 10px captions to 18px body text. If Surveyor Display is unavailable, the closest open-source substitutes are Playfair Display or Freight Display for the serif editorial voice; for the grotesque operational tier, Inter or Aktiv Grotesk at weight 400 preserve the proportions cleanly. The critical rule: the grotesque must never carry a display headline — the serif/grotesque split is the typographic identity of the brand." - id: "shape-system" title: "Why does J.Crew use 0px corners on its buttons and inputs?" answer: "The hard-corner geometry is the print-editorial heritage on screen. J.Crew's catalog tradition is built on a sharp grid with right-angle image frames and right-angle text blocks — softening to a 4px or 8px corner radius anywhere on the merchandising chrome would push the brand toward generic direct-to-consumer territory. The 0px rule applies to primary CTAs, secondary ghost buttons, text inputs, the size-picker grid, the product tile border, and the search field. The only circular element in the system is the account icon button, which uses a full circle because it holds a monogram initial. This is the inverse of Allbirds, which uses a full-pill CTA; J.Crew holds the right angle as the editorial signature." - id: "photography-role" title: "How does photography function in J.Crew's design system?" answer: "Photography is the primary design element, not a decoration within a design system. The hero is a full-bleed campaign image that extends edge-to-edge with no overlay, no gradient scrim, and no text positioned over the image — the headline appears below the fold of the photograph, not on top of it. Product tiles in the 4-up merchandising grid follow the same logic: the photograph fills the tile without a color badge, a discount label, or a rollover overlay. The caption (product name + price) appears below the image in ink on white, separated by a hairline rule. Where most apparel DTC brands treat photography as a canvas for UI chrome, J.Crew treats UI chrome as a frame for photography — the difference is visible the moment you see the hero on both pages side by side." - id: "use-in-project" title: "Can I use this DESIGN.md to build a React apparel storefront in J.Crew's style?" answer: "Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce J.Crew's editorial discipline: white canvas, ink black, Surveyor Display at the display tier, hard-cornered CTAs, zero accent, photography-first layout. Reference tokens directly: {colors.ink} for #000000, {colors.canvas} for #ffffff, {rounded.none} for 0px, {typography.display-xl} for the Surveyor Display hero tier. The most important constraint to enforce is the photography boundary: never allow UI chrome — gradient overlays, colored badges, pill CTA shapes — to sit on top of the campaign image. J.Crew's storefront discipline is that the chrome exists entirely outside the photograph's frame." mockups: - "marketing-hero" - "media-grid" colors: ink: "#000000" canvas: "#ffffff" surface-1: "#f5f5f5" surface-2: "#f0f0f0" hairline: "#000000" hairline-soft: "#e0e0e0" hairline-mid: "#cccccc" ink-muted: "#767676" ink-soft: "#444444" on-ink: "#ffffff" on-canvas: "#000000" overlay-scrim: "#000000" badge-sale: "#000000" status-error: "#000000" typography: display-xl: fontFamily: "\"Surveyor Display\", \"Times New Roman\", Times, serif" fontSize: 64px fontWeight: 400 lineHeight: 68px letterSpacing: "-0.5px" display-lg: fontFamily: "\"Surveyor Display\", \"Times New Roman\", Times, serif" fontSize: 48px fontWeight: 400 lineHeight: 52px letterSpacing: "-0.3px" display-md: fontFamily: "\"Surveyor Display\", \"Times New Roman\", Times, serif" fontSize: 32px fontWeight: 400 lineHeight: 36px letterSpacing: "0" heading-md: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 24px letterSpacing: "0.5px" heading-sm: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: "0.5px" body-md: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "0" body-sm: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "0" label-md: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px letterSpacing: "1px" caption: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 16px letterSpacing: "0.5px" nav-link: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 16px letterSpacing: "0.5px" button-md: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 16px letterSpacing: "1.5px" price-display: fontFamily: "\"Gotham\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "0" rounded: none: "0px" sm: "2px" 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.none}" padding: "14px 24px" height: "44px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "13px 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: "12px 24px" height: "56px" borderColor: "{colors.hairline-soft}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" 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.body-sm}" rounded: "{rounded.none}" padding: "0" product-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "8px 0" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px" borderColor: "{colors.hairline-soft}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 16px" height: "44px" borderColor: "{colors.hairline-mid}" size-picker: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "8px" height: "40px" borderColor: "{colors.hairline-mid}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview J.Crew's homepage operates on a single organizing principle. **Photography as primary design material.** The hero is a full-bleed seasonal campaign image that runs edge-to-edge without a gradient scrim, a text overlay, or a promotional badge competing for attention. The headline sits below the photograph's frame — not on top of it — in Surveyor Display, a proprietary serif commissioned from Hoefler&Co. that carries the brand's Ivy League editorial tone. Every other surface in the system — nav, body, CTA, product grid — is subordinate to that photograph. Where Madewell positions indigo-denim textile shots as the brand's visual identity, and where Everlane runs a value-proposition caption directly over a model photograph, J.Crew maintains a hard separation between the image frame and the typographic frame. The chrome never enters the photograph. This is the catalog tradition translated to the browser: a J.Crew catalog spread has always been a photograph plus a grid, not a photograph with text floating over it. The shape language reinforces the editorial discipline. Every interactive surface — primary CTA, secondary ghost button, text input, size-picker grid, product tile border — runs at 0px border-radius. No pill geometry, no rounded-rect softening. The right angle is the visual vocabulary of the grid, the margin rule, the cut-line. One exception exists: the account icon button is a full circle because it holds a monogram initial. **Key Characteristics:** - Pure white canvas (`{colors.canvas}`) and pure black ink (`{colors.ink}`) with no saturated accent — the only chromatic elements on the page live inside the campaign photography. - Surveyor Display serif at the display tier (48–64px / weight 400) carries editorial campaign headlines; a neutral grotesque handles every operational role below. - Hard-cornered geometry: `{rounded.none}` (0px) on every CTA, input, tile, and nav element — the right angle is the structural discipline. - Full-bleed campaign photography runs without overlay, scrim, or superimposed text — a categorical separation between image frame and chrome frame. - Hairline grid: `{colors.hairline-soft}` (#e0e0e0) rules divide the product grid and the nav band; there is no shadow tier. - Product tile captions use `{typography.label-md}` (12px / 500 / 1px tracking) in ink black with the price rendered at the same size — no typographic hierarchy between name and price. - Letter-spacing on operational labels runs 0.5–1.5px at the uppercase cap tier — the catalog convention of spaced small-caps applied to nav and button text. ## Colors ### Structural - **Ink** (`{colors.ink}` — #000000): frequency 10. Used as text (5) and border (5). The load-bearing structural tone — every CTA fill, every nav border, every typographic weight, every hairline rule. Wired as the page's single non-chromatic design voice. Pure black, not a warm graphite or a charcoal; the contrast against the white canvas is categorical rather than tonal. - **On-ink** (`{colors.on-ink}` — #ffffff): frequency carried by ink usage. Reverse text sitting on black surfaces — the primary CTA label, the nav-on-dark-bg moment, and the campaign headline when it appears on a dark campaign image. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): the page floor and every merchandising surface. Pure white with no warmth tint, no cream offset — the photographic prints in the catalog tradition require a neutral white canvas to read correctly. - **Surface-1** (`{colors.surface-1}` — #f5f5f5): a light gray surface used for the announcement bar, off-white product-grid backgrounds, and the category-filter chip in resting state. - **Surface-2** (`{colors.surface-2}` — #f0f0f0): a slightly deeper gray for hover states on surface-1 elements and the footer band. ### Text - **Ink Muted** (`{colors.ink-muted}` — #767676): secondary and tertiary text — product sub-labels, sale callouts rendered small, footer category sub-heads. Not pure black; the mid-gray communicates informational hierarchy without adding a second color. - **Ink Soft** (`{colors.ink-soft}` — #444444): a near-black used for body-copy paragraphs where pure ink would feel too heavy at 16px. The reading text in editorial editorial and brand editorial sections. ### Hairlines - **Hairline** (`{colors.hairline}` — #000000): 0px / 1px borders on the top-nav bottom rule, primary CTA border, and the strong structural dividers. Pure black hairlines where separation needs weight. - **Hairline Soft** (`{colors.hairline-soft}` — #e0e0e0): the dominant hairline in the product grid and card system. Light gray separates product rows without asserting themselves as design elements. - **Hairline Mid** (`{colors.hairline-mid}` — #cccccc): input field borders and mid-weight card dividers. Between hairline-soft and ink; used where the line needs to read but not compete with product labels. ## Typography ### Font Families The system divides typographic labor cleanly. **Surveyor Display** (Hoefler&Co.) carries every editorial headline role — the campaign headline above the fold, the seasonal category titles, the editorial dek in brand storytelling sections. It runs at weight 400 across every display size; the serif voice does not get bolder, it gets larger. Everything else — nav, body, label, button, price — belongs to a neutral grotesque (Gotham in the brand's official font stack), which runs at weight 400 for reading surfaces and weight 500 for labels, caps, and CTAs. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 64px | 400 | 68px | -0.5px | Campaign hero headlines | | `{typography.display-lg}` | 48px | 400 | 52px | -0.3px | Category editorial headers | | `{typography.display-md}` | 32px | 400 | 36px | 0 | Section display moments | | `{typography.heading-md}` | 18px | 500 | 24px | 0.5px | Sub-section heading / editorial sub-title | | `{typography.heading-sm}` | 14px | 500 | 20px | 0.5px | Product feature call-out | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Editorial body copy, product descriptions | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body copy, ghost button labels | | `{typography.label-md}` | 12px | 500 | 16px | 1px | Product tile captions, category badge | | `{typography.caption}` | 11px | 400 | 16px | 0.5px | Fine print, legal, size availability | | `{typography.nav-link}` | 13px | 400 | 16px | 0.5px | Top-nav links | | `{typography.button-md}` | 13px | 500 | 16px | 1.5px | CTA labels (uppercase) | | `{typography.price-display}` | 14px | 400 | 20px | 0 | Product price | ### Substitutes Surveyor Display is proprietary. The closest editorial substitutes are **Playfair Display** (Google Fonts) at the same low weights — it shares the high-contrast thick-to-thin ratio — or **Freight Display** for a more closely matched humanist serif. For the grotesque tier, **Inter** or **Aktiv Grotesk** at the same weights transfer cleanly. ## Layout ### Spacing System Base unit is 8px. The rhythm ladders up: `{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 — a generous gap that gives each photograph breathing room against the white canvas. ### Grid & Container Max content width runs ~1440px on the hero and ~1280px on the product grid. The 4-up product grid uses equal-width columns with 16px gutters and no row breaks until the product label appears below the tile. The stacked editorial nav is full-width at desktop with primary links centered and utility icons (search, account, bag) right-aligned. Section padding is generous: 64–96px vertically between campaign modules. ### Rhythm The page alternates between full-bleed photographic moments and white-canvas product/editorial sections. Full-bleed photography has zero chrome except for a minimal nav overlaid at 90% opacity. White-canvas sections hold a centered content container with the serif display headline, one editorial paragraph, and a ghost CTA that leads into a product category. ## Elevation The system carries no shadow tier. Depth comes from the photographic content itself — the campaign photographs create three-dimensionality without any UI-layer shadow. Product tiles use a 1px `{colors.hairline-soft}` border or bottom rule rather than a drop shadow; the hairline is the single elevation device in the flat merchandising grid. The only tonal surface is `{colors.surface-1}` (#f5f5f5) used on the announcement bar and secondary surface moments. ## Shapes The radius scale is near-zero. `{rounded.none}` (0px) applies to every interactive surface: the primary CTA, the secondary ghost button, text inputs, size-picker cells, product tile frames, and the search field. One exception: the account icon button renders as a full circle (`{rounded.full}` — 9999px) because it holds a monogram initial. There is no 4px / 8px softened tier. The right-angle vocabulary comes from print editorial tradition — the catalog grid, the advertising spread, the magazine layout grid — where the cut line is the design element, not the corner curve. ## Components **`button-primary`** — Black `{colors.ink}` fill, white text, `{rounded.none}` 0px radius, 14×24px padding, 44px height. "Shop now" and "Add to bag" are the canonical instances. No border is needed; the ink fill carries the weight. **`button-secondary`** — White `{colors.canvas}` fill, ink text, 1px ink border, `{rounded.none}` 0px radius. Used for secondary CTAs like "Save for later" and "View all" category links. **`button-ghost`** — Transparent fill, ink text at `{typography.body-sm}`, no border. The lightest action surface — used for editorial "read more" and "explore the collection" prose CTAs. **`top-nav`** — White `{colors.canvas}` surface, 56px height, 1px `{colors.hairline-soft}` bottom rule. J.Crew wordmark flush left, category links centered (Women / Men / Boys / Girls / Baby / Sale / Stores), utility icons flush right. Nav links are not uppercase; they run in mixed case at 13px / weight 400 / 0.5px tracking. **`nav-link`** — Transparent background, ink text at `{typography.nav-link}` (13px / 0.5px tracking), 8×12px padding. No hover background fill — the hover state is an underline. **`hero-heading`** — Ink text at `{typography.display-xl}` (64px / 400 Surveyor Display / -0.5px tracking), appearing below the full-bleed campaign photograph, not on top of it. The headline sits against the white canvas between the image bottom edge and the CTA row. **`section-heading`** — Surveyor Display at `{typography.display-md}` (32px / 400), used for editorial category intros like "New Arrivals" and seasonal feature titles. **`body-paragraph`** — Default ink body copy at `{typography.body-md}` (16px / 400 / 24px leading). Editorial brand paragraphs in brand-story sections and category-editorial bands. **`body-paragraph-muted`** — Ink-muted text at `{typography.body-sm}` for secondary copy and legal fine print. **`product-tile`** — White `{colors.canvas}` surface, image fills the tile edge-to-edge with no overlay; below the image a `{colors.hairline-soft}` 1px bottom rule separates the image from the product-label area. Zero padding on the image area; 8px top padding on the label area. **`product-label`** — Ink at `{typography.label-md}` (12px / 500 / 1px tracking, uppercase). Product name and price render at the same size and weight — no typographic hierarchy between them. Color swatch dots may appear at 8px diameter in ink or in the product's available colorways. **`card`** — White surface, 16px padding, 1px `{colors.hairline-soft}` border, `{rounded.none}` 0px radius. Used for editorial feature callouts and "J.Crew Stylist" recommendation blocks. **`text-input`** — White surface, ink text, 1px `{colors.hairline-mid}` border, `{rounded.none}` 0px radius, 12×16px padding, 44px height. Email sign-up and search field. No rounded corners; the input is a box. **`size-picker`** — White surface, ink text at `{typography.label-md}`, 1px `{colors.hairline-mid}` border, `{rounded.none}` 0px radius. Each size option is a square cell in a grid row. Selected state: ink fill, white text. Out-of-stock: `{colors.ink-muted}` text with a diagonal strike-through line. **`footer`** — White canvas, `{colors.ink-muted}` text at `{typography.body-sm}`, 48×24px padding. Three-column link cluster, email capture row, and social icons in ink. No surface contrast against the canvas floor — the footer continues as white canvas. ## Do's and Don'ts **Do** keep the campaign photograph unobstructed. The full-bleed hero is the system's primary design statement — the headline, the CTA, and the brand logo must sit outside the photograph's frame, not on top of it. **Do** use `{rounded.none}` (0px) on every interactive surface. The right-angle vocabulary is the editorial discipline; introducing a 4px or 8px corner anywhere on a CTA or input would push the system toward generic DTC-template territory. **Do** reserve Surveyor Display strictly for editorial headline moments. The serif voice is the brand's high-signal tier; running it on product labels, nav links, or button labels would lose the display/operational distinction that gives it authority. **Do** use `{colors.hairline-soft}` (#e0e0e0) as the dominant grid separator. The merchandising grid relies on hairlines, not shadows or background-color bands, to divide product rows — shadows would add visual noise against the white canvas. **Don't** put text on top of the campaign hero photograph. The J.Crew editorial convention positions headlines below the image boundary, not overlaid. Using a gradient scrim and floating text over the hero places the system in generic apparel-e-commerce territory and undermines the catalog discipline. **Don't** use `{colors.ink-muted}` (#767676) for CTA labels — it fails WCAG AA contrast on white canvas. Reserve it for secondary info labels and fine print; CTAs must use `{colors.ink}` (#000000) or `{colors.on-ink}` (#ffffff) depending on fill color. **Don't** add a saturated accent color to the chrome — not a seasonal tint, not a sale badge color beyond ink black. The only chromatic elements in the system are in the merchandise photography. Introducing a teal or burgundy badge token pulls the visual weight away from the image. **Don't** round the size-picker grid cells. The size-picker is a literal grid; applying even `{rounded.sm}` (2px) to the cells softens the grid into a toggle-button pattern and loses the spatial relationship between adjacent sizes. ## Known Gaps - **Live extraction blocked**: the Akamai CDN returned an Access Denied response on the extraction run; the color and typography tokens in this file are grounded in J.Crew's well-documented brand standards rather than direct CSS extraction. Validate token values against the live site before production use. - **Product detail page**: the PDP variant-picker, size-guide modal, fit-details drawer, and add-to-bag CTA placement are not captured in this spec. - **Sale and promotional surfaces**: discount badges, sale-price strikethrough format, promotional banner content, and countdown-timer surfaces are described structurally but not exhaustively styled. - **Hover and focus states**: interactive state variants (hover underline on nav links, focus ring on inputs, hover overlay on product tiles) are not documented per the marketing-surface extraction scope. - **Dark campaign moments**: some seasonal campaigns reverse the canvas to black with white editorial headlines — this inverted surface is not formally represented in the token system. - **Motion**: the hero carousel transition timing, product-tile rollover reveal speed, and drawer slide-in easing are not captured; they live in the brand's JavaScript animation layer.