J.Crew Design System

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

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.