--- version: alpha name: "Converse" website: "https://www.converse.com" description: >- A heritage sneaker brand whose entry surface is a full-bleed black canvas carrying four outlined Druk Wide display headlines — AMERICAS, EUROPE, ASIA PACIFIC, AFRICA — rendered in 60-100px stroked white with no fill, with the star-chevron wordmark anchored top-left. Proxima Nova carries every body label at 16px / 400, and the country list runs as plain centered links beneath each region. The system has zero corner radii on the captured surface, a single black-and-white duotone palette, and a 12-color secondary palette wired into CSS variables (Bilbao green, Violetred, Royal Purple, Bondi Blue) that is reserved for product PDPs and merchandising rather than the entry chrome — the location-selector surface is the brand stripped to two tones plus an outlined display face. seo: title: "Converse Design System for React — black canvas, Druk Wide outlined display, Proxima Nova" metaDescription: "Converse's marketing system as a DESIGN.md file — a black canvas carrying outlined Druk Wide display headlines, Proxima Nova body, and a wider product palette of 12 chromatic CSS variables held for merchandising surfaces." highlights: - "Outlined display as signature — Druk Wide headlines render at 60-100px in stroked white with no fill, the typographic move that defines the entry surface" - "Two-tone entry chrome — pure black canvas and pure white text carry the location selector; the wider 12-color palette is reserved for product surfaces" - "Star-chevron wordmark anchored top-left — the 1908 monogram sits at 26px in the nav band with no surrounding chrome, no tagline, no surface fill" - "Proxima Nova workhorse body — every running label, country name, and link sits at 16px / 400 with a 1.31 line-height ratio across the page" - "Sharp-corner geometry throughout — zero border-radius on the captured surface, the heritage-streetwear move that rejects soft modern rounding" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Converse's country-language selector — the surface a US visitor lands on when arriving from a non-localized URL — does something almost no global sneaker brand does at the entry tier. The page is a full-bleed black canvas with four region headlines (AMERICAS, EUROPE, ASIA PACIFIC, AFRICA) rendered in 60-100px outlined Druk Wide, white stroke on the black floor with no fill, sitting in a four-column row at the top of the viewport. The star-chevron wordmark anchors the upper-left corner; a single small "Select Location & Language" label centers above the headline row in Proxima Nova at 18px / 600. Where Nike and Adidas open with full-screen product video and hero imagery, Converse opens with type as monument — the headline forms ARE the page composition, and every country name below them sits as plain unstyled link text in pure white. The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 13 color tokens captured from the entry surface and the wider site CSS — a two-tone duotone of pure black and pure white that carries the location selector, plus 10 secondary chromatic variables (Bilbao green, Violetred pink, Royal Purple, Bondi Blue, Lima green, Buttercup yellow, Flamingo orange) held in `:root` and reserved for product detail pages, collection bands, and merchandising chips. Three typography tokens span Druk Wide for outlined display at 50px / 700 uppercase, Proxima Nova at 18px / 600 for sub-display labels, and Proxima Nova at 16px / 400 for body. Spacing runs on a 4px base; the single dominant gap value across the captured page is 12px. Feed this file to Claude or Cursor and it reproduces Converse's specific moves: outlined Druk Wide display rather than filled display, black canvas rather than the white-canvas convention of consumer e-commerce, sharp corners with zero rounding, and Proxima Nova as the universal body voice. The token references resolve cleanly — `{colors.canvas}` for the pure-black floor, `{colors.ink}` for the pure-white text, `{typography.display-xl}` for the 50px outlined headline tier. The one move worth borrowing for any heritage-streetwear or sneaker brand is the outlined-display treatment: it reads as ink-on-leather stamp rather than as digital chrome, which is the warmth lever Converse leans on instead of a chromatic accent. 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.converse.com" title: "Converse — official site" description: "Converse's public marketing 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 Converse's primary brand color?" answer: "Converse's entry surface uses no chromatic brand voltage. The captured location selector is pure black (#000000) canvas with pure white (#ffffff) text and outlined display headlines — a two-tone duotone. The wider site CSS exposes 10+ secondary chromatic variables (Bilbao green #138410, Violetred #f63789, Royal Purple #633bb1, Bondi Blue #00a1b3, Lima green #7ed321) wired into :root as --bilbao, --violetred, --royalpurple, --bondiblue, --lima — but these are reserved for product detail pages, collection bands, and merchandising chips, not the entry chrome. The brand-voltage role is carried by the star-chevron wordmark and the outlined Druk Wide display, not by a color." - id: "typography" title: "What typefaces does Converse use, and what should I use as a substitute?" answer: "Converse runs Druk Wide for display at 50px / 700 uppercase — wired in CSS as --font-family-drukwide and rendered on the entry surface with a white stroke and no fill, the move that defines the brand's typographic identity. Proxima Nova carries every other surface: 18px / 600 for sub-display labels, 16px / 400 for body links and country names, with a 1.31 line-height ratio across the system. Druk Wide is a licensed Commercial Type face. The closest open-source substitute is Bowlby One or Anton at the display tier — both transfer the ultra-condensed wide proportions. Inter at the same weights substitutes cleanly for Proxima Nova at 14-18px body sizes." - id: "outlined-display" title: "Why are Converse's display headlines outlined instead of filled?" answer: "The outlined Druk Wide treatment is the brand's signature move at the entry tier. A filled bold display headline would read as generic e-commerce shout; the stroke-only outline reads as ink-stamp or heritage marquee lettering — closer to a vintage band poster or a Chuck Taylor canvas patch than to a SaaS hero. The technique also lets the headline forms breathe at 60-100px against the pure black canvas without overwhelming the country-link content beneath each one. The fill weight is preserved (the strokes are thick enough to read at 100px) but the negative space inside each letter carries the canvas through, keeping the type feeling architectural rather than declarative." - id: "canvas-color" title: "Why does Converse use pure black on the entry surface?" answer: "The captured country-language selector is pure #000000 with pure #ffffff text — no near-black, no warm undertone, no surface ladder. The selector is a transitional surface (a user passes through it for a moment to pick a region), so it functions as a stripped-down brand statement rather than as a content surface. Pure black + outlined display + the star-chevron wordmark is the minimum kit needed to read as Converse. Product detail pages below this surface return to a white canvas with chromatic accents from the wider palette, so the black entry is the brand-voltage moment of the entire user flow." - id: "rounded-style" title: "What is Converse's corner-radius philosophy?" answer: "The captured entry surface has zero border-radius across every element — outlined display headlines, country links, the wordmark, and the centered sub-label all use sharp 0px corners. The CSS exposes no radius custom-property scale at the :root level either. This rejection of soft modern rounding is the heritage-streetwear move: corners stay sharp because the brand is rooted in 1908 basketball-shoe heritage, not in 2020s SaaS softness. Where Nike and Adidas have moved their digital surfaces toward 8-16px rounding, Converse keeps the entry chrome architectural and crisp." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own heritage-streetwear site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Converse's specific moves: pure-black entry canvas instead of white, outlined Druk Wide-style display rather than filled, Proxima Nova body, and zero corner rounding. The tokens resolve cleanly — every hex, font name, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the outlined-display move only carries if your display face has enough stroke weight (Druk Wide, Bowlby One, Anton) — applying it to a normal-width sans like Inter produces hollow lettering that loses the heritage feel." mockups: - "marketing-hero" - "media-grid" colors: canvas: "#000000" ink: "#ffffff" hairline: "#e5e5e5" surface-soft: "#fafafa" surface-warm: "#fff2f2" ink-muted: "#979797" ink-soft: "#4a4a4a" ink-dim: "#757575" accent-bilbao: "#138410" accent-violetred: "#f63789" accent-royalpurple: "#633bb1" accent-bondiblue: "#00a1b3" accent-flamingo: "#f35a34" accent-monza: "#e00a15" typography: display-xl: fontFamily: "\"druk-wide\", \"Druk Wide\", Impact, sans-serif" fontSize: 50px fontWeight: 700 lineHeight: 45px letterSpacing: 0 display-lg: fontFamily: "\"druk-wide\", \"Druk Wide\", Impact, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 36px letterSpacing: 0 sub-display: fontFamily: "\"proxima nova\", proxima-nova, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 20.7px letterSpacing: 0 body-md: fontFamily: "\"proxima nova\", proxima-nova, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20.96px letterSpacing: 0 body-sm: fontFamily: "\"proxima nova\", proxima-nova, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18.34px letterSpacing: 0 caption: fontFamily: "\"proxima nova\", proxima-nova, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 nav-link: fontFamily: "\"proxima nova\", proxima-nova, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "\"proxima nova\", proxima-nova, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 20px letterSpacing: 0 rounded: none: "0px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" 4xl: "96px" components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 24px" height: "60px" wordmark: backgroundColor: transparent textColor: "{colors.ink}" padding: "0" height: "26px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 12px" hero-section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: "96px 48px" hero-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0" hero-heading-outlined: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0" border: "1px {colors.ink}" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-lg}" sub-display: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.sub-display}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0" country-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 12px" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 24px" height: "44px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 24px" height: "44px" borderColor: "{colors.ink}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 16px" height: "44px" borderColor: "{colors.hairline}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "24px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview Converse's entry surface — the country-language selector that a US visitor lands on when arriving from a non-localized URL — strips the brand down to its load-bearing geometry. **Outlined monument**: four region headlines (AMERICAS, EUROPE, ASIA PACIFIC, AFRICA) render in 50-100px Druk Wide as white stroke on a pure-black canvas with no fill — the negative space inside each letter carries the canvas through, so the headline forms read as architectural framing rather than as decoration. The star-chevron wordmark anchors the upper-left corner at 26px. Where Nike opens with full-screen product video and Adidas opens with athlete photography, Converse opens with type as monument. The country lists below each headline are plain centered links in Proxima Nova at 16px / 400, white on black, with no chrome. The chromatic restraint reinforces the move. The captured entry surface uses two colors: pure `{colors.canvas}` (#000000) and pure `{colors.ink}` (#ffffff). The wider site CSS exposes a 10-color secondary palette — Bilbao green (`{colors.accent-bilbao}` — #138410), Violetred pink (`{colors.accent-violetred}` — #f63789), Royal Purple (`{colors.accent-royalpurple}` — #633bb1), Bondi Blue (`{colors.accent-bondiblue}` — #00a1b3), Flamingo orange, Monza red — wired into `:root` as `--bilbao`, `--violetred`, `--royalpurple`, etc. These are held in reserve for product detail pages, collection bands, and merchandising chips; not one of them appears on the entry surface. The brand-voltage role at the entry tier is carried by the outlined display face and the star-chevron wordmark, not by a color. **Heritage-stamp typography**: Druk Wide at weight 700 uppercase, outlined rather than filled. The technique reads as vintage band poster or canvas patch — closer to a Chuck Taylor heel stamp than to a SaaS hero. Proxima Nova carries every other surface in the system at 14-18px, weight 400 for body and 600-700 for emphasis. There is no third typeface; the brand split is binary — Druk Wide for monument moments, Proxima Nova for everything else. **Key Characteristics:** - Two-tone entry duotone — pure `{colors.canvas}` (#000000) canvas and pure `{colors.ink}` (#ffffff) text and outline; the wider chromatic palette is held for product surfaces. - Outlined Druk Wide display at 50-100px / 700 uppercase — stroked white with no fill, the brand's signature typographic move. - Star-chevron wordmark anchored top-left at 26px height with no surrounding chrome, no tagline, no surface fill. - Proxima Nova carries every body, label, and link surface at 14-18px in weights 400 / 600 / 700. - 10 secondary chromatic CSS variables (`{colors.accent-bilbao}`, `{colors.accent-violetred}`, `{colors.accent-royalpurple}`, `{colors.accent-bondiblue}`, `{colors.accent-flamingo}`, `{colors.accent-monza}`) reserved for merchandising surfaces below the entry tier. - Zero border-radius across the entry surface — sharp corners on every element including buttons, links, and the wordmark plate. - 4-color neutral ramp — `{colors.ink}` white, `{colors.ink-muted}` (#979797), `{colors.ink-dim}` (#757575), `{colors.ink-soft}` (#4a4a4a) — for layered text hierarchy on the wider site. - 4px base spacing unit. Major gaps on the captured surface sit at `{spacing.md}` (12px) and `{spacing.4xl}` (96px) — tight intra-region clustering, wide inter-region rhythm. ## Colors ### Surface - **Canvas** (`{colors.canvas}` — #000000): frequency 3. Used as background (1), text (1), border (1). Pure black, wired in CSS as `--black` and `--radio-color`. Carries the entire entry surface — no near-black, no warm undertone. The 25% lightness gap against the outlined white headlines is intentional and maximum. - **Surface Soft** (`{colors.surface-soft}` — #fafafa): wired as `--alabaster`. Reserved for product-page card surfaces and form-field backgrounds on the wider site; absent from the entry capture. - **Surface Warm** (`{colors.surface-warm}` — #fff2f2): wired as `--chablis`, `--gallery2`, `--wildsand`, `--color-neutral-grey-1`. A barely-warm cream used as a tonal lift on light product surfaces; absent from the entry capture. ### Text - **Ink** (`{colors.ink}` — #ffffff): frequency 229 — used as text (114) and border (114). The dominant text color across the entry surface, wired as `--white`. Pure white on pure black with no muted variant for body copy on the captured selector — every link, label, and outlined headline character uses the same value. - **Ink Muted** (`{colors.ink-muted}` — #979797): wired as `--color-neutral-grey-7`, `--dustygray`, `--color-neutral-grey-3`. Reserved for tertiary labels and footer copy on the wider site. - **Ink Dim** (`{colors.ink-dim}` — #757575): wired as `--boulder`, `--color-neutral-grey-4`. Secondary label tier on product pages. - **Ink Soft** (`{colors.ink-soft}` — #4a4a4a): wired as `--color-neutral-grey-5`, `--tundora`. The darker tier of the neutral ramp used on light-canvas product surfaces. ### Hairline - **Hairline** (`{colors.hairline}` — #e5e5e5): wired as `--mercury`, `--color-neutral-grey-2`, `--gallery`, `--cararra`, `--tab-border`, `--alto`. The single hairline tone in the system — used for tab borders, card outlines, and form-field rules on light surfaces. Absent from the entry capture (the black canvas does not need hairlines). ### Secondary palette (held in reserve) - **Bilbao** (`{colors.accent-bilbao}` — #138410): wired as `--bilbao`. A saturated mid-green used as a "go" / available / in-stock chip on product pages. - **Violetred** (`{colors.accent-violetred}` — #f63789): wired as `--violetred`. A hot pink used on Pride and limited-edition collection bands. - **Royal Purple** (`{colors.accent-royalpurple}` — #633bb1): wired as `--royalpurple`. Holiday and collaboration-collection accent. - **Bondi Blue** (`{colors.accent-bondiblue}` — #00a1b3): wired as `--bondiblue`. Used on the Run Star / Court Ready performance line. - **Flamingo** (`{colors.accent-flamingo}` — #f35a34): wired as `--flamingo`, `--flamingo2`. A warm coral used on heritage Chuck 70 colorways. - **Monza** (`{colors.accent-monza}` — #e00a15): wired as `--monza`, `--punch`. The sale / clearance flag color across the catalog. ## Typography ### Font Families The system runs two voices: **Druk Wide** (a licensed Commercial Type display face, wired as `--font-family-drukwide`) for the outlined monument headlines at the entry tier, and **Proxima Nova** for every other surface — heading, sub-display, body, button, nav, and caption. Fallbacks for Proxima Nova walk `Helvetica, Arial, sans-serif`; Druk Wide falls back to `Impact, sans-serif`. The pairing is binary: Druk Wide for the four entry-tier monument headlines, Proxima Nova for everything else. There is no third family, no editorial serif, no monospace voice. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 50px | 700 | 45px | Outlined region headlines (AMERICAS / EUROPE / ASIA PACIFIC / AFRICA) at the entry tier; renders at 100px scaled on wide viewports | | `{typography.display-lg}` | 36px | 700 | 36px | Section displays on collection pages | | `{typography.sub-display}` | 18px | 600 | 20.7px | "Select Location & Language" sub-label above the entry headlines | | `{typography.body-md}` | 16px | 400 | 20.96px | Default running text and country-link list items | | `{typography.body-sm}` | 14px | 400 | 18.34px | Secondary labels and footer copy | | `{typography.caption}` | 12px | 400 | 16px | Wired as `--fontsizenano`; metadata and microcopy | | `{typography.nav-link}` | 14px | 400 | 16px | Top-nav link labels | | `{typography.button-md}` | 14px | 700 | 20px | Primary CTA labels on product surfaces | ### Principles The entry headlines render at weight 700 with an outline (white 1-2px stroke on pure black, no fill) at 50px and scale up to ~100px on wide viewports. The outlining is the distinguishing move — a filled Druk Wide headline at the same size would read as generic e-commerce shout; the stroke-only treatment reads as ink-stamp or marquee lettering, closer to a vintage band poster than to a SaaS hero. Proxima Nova holds three weights — 400 for body and links, 600 for sub-display labels, 700 for buttons and emphasis. The `--fontlineheightnormal` ratio is 1.31, which is the default leading across body sizes. ### Note on Font Substitutes Druk Wide is a licensed Commercial Type face. The closest open-source substitutes are **Bowlby One** or **Anton** at the display tier — both transfer the ultra-condensed wide proportions and read close to Druk at 60-100px display sizes. **Inter** at the same weights substitutes cleanly for Proxima Nova at 14-18px body sizes; for the 18px / 600 sub-display tier, **Manrope** at weight 600 is the closest free substitute. ## Layout ### Spacing System - **Base unit:** 4px — the smallest gap value declared in CSS as `--u-spacing-4`. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px · `{spacing.4xl}` 96px. - **Dominant gap:** 12px — appears 31 times across the captured entry surface as the inter-link spacing inside each country-list column. - **Section padding:** ~96px between the top-nav band and the headline row; ~160px from the bottom of the headline row to the footer. - **Hero padding:** 0 horizontal at the column level — the four region columns flow edge-to-edge inside a single ~1200px container. ### Grid & Container - **Max content width:** ~1280px on the entry surface, with the four region columns distributed across the full width at desktop. - **Entry grid:** 4-column grid pairing each outlined headline with its country-link list directly beneath; collapses to a 2-column stack on tablet and a single column on mobile. - **Top-nav band:** ~60px tall, wordmark anchored top-left at 24px from the left edge; no other nav links on the entry surface itself. - **Footer:** absent from the entry capture — the selector surface terminates at the bottom of the country-link columns. ### Rhythm The page holds a single steady tempo: each region headline sits at exactly the same vertical position, each country-link column starts at the same baseline, and every link uses the same 12px vertical gap. There is no atmospheric variation between regions — the rhythm is grid-locked, which reinforces the "monument" reading of the outlined headlines. ## Elevation The system has essentially **no shadow tier** on the entry surface. The pure-black canvas does not admit traditional drop shadows (they would not read), and the only elevation move is the contrast between the outlined headline forms and the canvas they sit on. - **Flat (no shadow):** every element on the captured entry surface — wordmark, headlines, links, footer. - **Outline as elevation:** the stroked white headline forms read as raised lettering through pure typographic contrast, not through a layered shadow. - **Hairline outlines:** `{colors.hairline}` (#e5e5e5) is the wider site's border tone but is absent from the entry capture. ## Shapes The radius scale is **binary at its minimum**: zero rounding on the entry surface, plus a single full-pill option (`{rounded.full}` — 9999px) used on icon chips and rounded badges on product pages. - `{rounded.none}` 0px — every element on the captured entry surface. Wordmark, headlines, link hit-targets, the country-list columns, and even the small "Select Location & Language" sub-label all use 0px corners. - `{rounded.full}` 9999px — reserved for circular avatar chips and round-icon buttons on product pages. There is no 4 / 8 / 12px middle tier on the captured surface. The sharp-corner geometry is the heritage-streetwear move: corners stay architectural because the brand is rooted in 1908 basketball-shoe history, not in 2020s SaaS softness. ## Components **`top-nav`** — Black `{colors.canvas}` band, 60px tall, 16x24 padding. Houses only the star-chevron wordmark on the entry surface; no menu links, no search, no cart. On product surfaces the nav expands to include Men / Women / Kids / Collections / Sale link clusters. **`wordmark`** — The Converse star-chevron logo at 26px height, white-on-black, anchored 24px from the left edge of the nav band. No surrounding plate, no tagline, no surface fill. **`hero-section`** — Full-bleed black canvas, ~96x48 padding. Holds the four region headline columns in a 4-column grid. **`hero-heading`** — Filled Druk Wide at `{typography.display-xl}` (50px / 700) in white. Used on product collection pages. **`hero-heading-outlined`** — The signature treatment. Druk Wide at `{typography.display-xl}` rendered as a 1-2px white stroke with the canvas color carrying through the letter interiors. Used on the four region headlines (AMERICAS / EUROPE / ASIA PACIFIC / AFRICA) at the entry surface. **`section-heading`** — Druk Wide at `{typography.display-lg}` (36px / 700) in white, filled. Used on collection-page section headers below the fold. **`sub-display`** — Proxima Nova at `{typography.sub-display}` (18px / 600) in white. The single instance on the entry surface is the "Select Location & Language" label centered above the headline row. **`body-paragraph`** — Default `{typography.body-md}` (16px / 400) in white. Used for country names below each region headline. **`country-link`** — Transparent fill, white text at `{typography.body-md}`, 8x12 padding, zero rounding. Hover state appears to invert (white background on black text) but is not visible on the static capture. **`button-primary`** — White `{colors.ink}` fill, black `{colors.canvas}` text, `{typography.button-md}` (14px / 700), zero rounding, 12x24 padding, 44px height. Used on product PDPs for "Add to bag" and the like; not present on the entry surface. **`button-secondary`** — Transparent fill, white text, 1px white border, zero rounding, 12x24 padding, 44px height. Used for tertiary actions on the wider site. **`text-input`** — Black `{colors.canvas}` fill, white text, 1px `{colors.hairline}` border, zero rounding, 12x16 padding, 44px height. Used in the mailing-list signup and search. **`card`** — Black surface, white text, zero rounding, 24px padding. Used for product cards on dark merchandising bands. **`footer`** — Black canvas, muted-gray `{colors.ink-muted}` text at `{typography.body-sm}`, 48x24 padding. Absent from the captured entry surface but present on the wider site. ## Do's and Don'ts **Do** render the entry-tier display headlines with the outlined treatment (white 1-2px stroke, no fill, on `{colors.canvas}`). The outlining is the brand's load-bearing typographic move; filling the headlines would read as generic e-commerce shout and lose the heritage-stamp identity. **Do** keep the entry chrome to two tones — pure `{colors.canvas}` and pure `{colors.ink}`. The wider chromatic palette is held in reserve for product pages, collection bands, and merchandising chips. Introducing one of the accent colors at the entry tier breaks the monument framing. **Do** anchor the star-chevron wordmark at the upper-left corner with no surrounding chrome. The mark needs to sit alone — adding a tagline, a surface plate, or a pill background dilutes the heritage-stamp reading. **Do** keep corners at 0px across the entry surface. Sharp geometry is the heritage-streetwear move; soft 8-16px rounding pulls the surface toward 2020s SaaS softness and away from the 1908 basketball-shoe identity. **Don't** render the four region headlines at filled weight 700. The system relies on the stroke-only outline (the negative space inside each letter carries `{colors.canvas}` through) to read as monument lettering. A filled treatment at the same 50-100px would overwhelm the country-link content beneath and turn the page into a single typographic shout. **Don't** introduce a third typeface. The system is binary: Druk Wide for monument moments, Proxima Nova for everything else. Adding a serif editorial face or a monospace metadata tier would break the binary split and dilute the heritage clarity. **Don't** swap the canvas from pure `{colors.canvas}` to a softer near-black or a slightly warm charcoal. The maximum contrast against the stroked white outlines is intentional — a softer canvas would mute the outlines and turn the headlines into ghosts. **Don't** apply the secondary chromatic palette (`{colors.accent-bilbao}`, `{colors.accent-violetred}`, `{colors.accent-royalpurple}`) to the entry surface or the top-nav. Those colors are scoped to product PDPs and collection-band merchandising; using them in the chrome turns the brand into a rainbow and breaks the held-in-reserve discipline. ## Known Gaps - **Captured surface is the entry selector only:** the country-language selector is a transitional surface. The full product site (men's / women's / kids' / collections) carries a different chromatic and typographic register that this DESIGN.md does not represent — a white canvas, photography-led hero, and use of the secondary accent palette on collection bands. - **Hover and focus states:** the static capture does not expose hover treatment on the country links. Inversion (white background on black text) is implied by the link convention but not measured. - **Form input error states:** `{component.text-input}` carries the resting state; error and validation styling lives inside the checkout flow not represented here. - **Motion:** Druk Wide outlined headlines may animate in (stroke-draw or fade-in) on first paint; the spec captures end-state values only. - **Dark mode / light mode:** the entry surface is dark-only. Product pages run on a white canvas with black text — the two-mode split is implied by the surface variants but not captured as a state matrix. - **Mobile breakpoints:** the captured surface is 1440px desktop. The 4-column region grid collapses to 2-column and 1-column at smaller widths but exact breakpoint values are not exposed in the CSS variables. - **Secondary chromatic accents:** 10 named accent colors are declared in `:root` (`--bilbao`, `--violetred`, `--royalpurple`, `--bondiblue`, `--flamingo`, `--monza`, `--lima`, `--buttercup`, `--mintgreen`, `--turquoiseblue`) but none of them render on the captured entry surface; their semantic roles are inferred from typical e-commerce conventions rather than measured.