--- version: alpha name: "Vans" website: "https://www.vans.com" description: >- A skate-and-lifestyle footwear brand whose marketing site refuses every chromatic move that fashion e-commerce defaults to — the body sits on near-white #f3f3f3, every card is bordered with pure-black #000000 at 522 captured border occurrences, and the wordmark itself is rendered into the photographic hero rather than as a separate brand voltage. There is no accent color in the chrome; the loud color comes entirely from the product photography. Display runs FannDoren Condensed at 64px / weight 500 inside the photographic hero ("Memorial Day Sale") while FannDoren Grotesque carries body, nav, and product-card metadata at 12-16px / 400-500. The radius scale is severe — 2px on 35 of 43 captured surfaces, with a 9999px pill reserved for filter chips and CTAs. The result reads more skate-zine than retail. seo: title: "Vans Design System for React — black-on-near-white, FannDoren Condensed, 14 components" metaDescription: "Vans's marketing-site design system as a DESIGN.md file. Pure black borders at 522 occurrences, near-white canvas, FannDoren Condensed display at 64px, no accent color. Tokens for React, Next.js, and AI tools." highlights: - "Pure-black border discipline — #000000 carries 522 of 535 captured border occurrences with no second hairline tone; the system draws every card outline in 1px black" - "No accent color in chrome — chromatic work happens entirely inside product photography; the wordmark, nav, filters, and footer share the same two-color black-and-near-white voice" - "Two-family FannDoren split — Condensed at 64px / weight 500 for editorial display, Grotesque at 12-16px / weight 400-500 for body and metadata" - "Severe 2px radius — 35 of 43 captured surfaces sit at 2px; the only escape is a 9999px pill for filter chips and CTAs, a 4-5px middle on inputs" - "Edge-to-edge photograph hero — the Memorial Day Sale banner spans the full viewport with overlaid wordmark and CTA; product imagery does every chromatic job the chrome refuses" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Vans" url: "https://www.vans.com" opening: | Vans's marketing site does what no other lifestyle-footwear brand attempts. The chrome is reduced to two colors: a near-white body floor #f3f3f3 and a pure-black hairline #000000 that carries 522 of the 535 captured border occurrences on the page. There is no accent voltage. There is no brand color in the nav, the buttons, the filters, or the footer. The wordmark sits inside the photographic hero — not above it as a separate brand chip — and every chromatic statement on the page comes from the product imagery and the photography of skaters wearing the product. Where Nike paints its hero in red-and-volt and where Adidas leans on the three-stripe black-blue, Vans gives the photographs the entire chromatic budget and leaves the chrome to disappear. The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 7 color tokens drawn from the 8 raw values rendered on the captured page — pure black, near-black ink #262424 (482 occurrences), pure white, near-white canvas #f3f3f3 (48 occurrences), plus a light-mode focus-ring blue #93c5fd that ships in the CSS but never renders chromatic against a black-and-white surface; 9 typography tokens running FannDoren Condensed at 24-64px in weight 500 for display and FannDoren Grotesque at 12-20px in weight 400-500 for everything else; a severe 4-step radius scale of 2 / 4 / 5 / 9999px; and 14 component definitions covering the photographic-hero banner, the filter-chip pill row, the product-card grid, the email-signup band, and the two-column footer. Feed this file to Claude or Cursor and it reproduces Vans's specific moves: black-and-near-white chrome with no accent voltage, edge-to-edge photographic hero with the wordmark inside the image, FannDoren Condensed reserved for editorial display, severe 2px card rounding, and the 9999px filter-pill exception. The one move worth borrowing only if you have a strong photography pipeline and a real-world brand: the willingness to give the chrome no chromatic voice at all. Most consumer brands cannot resist a CTA accent — Vans can, because the rubber-soled shoe on the page does all the work the chrome would otherwise do. 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.vans.com" title: "Vans — official site" description: "Vans'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: "Does Vans have a brand voltage?" answer: "No — and that is the move. The captured page exposes seven color tokens, all of them structural: pure black #000000 at 528 occurrences (522 as border), near-black ink #262424 at 482 occurrences, pure white #ffffff at 71, near-white canvas #f3f3f3 at 48, plus three rarely-rendered neutrals. There is no accent color in the chrome. A light focus-ring blue #93c5fd is declared in the CSS as `--un-ring-color` (an UnoCSS utility variable) but never renders in the captured marketing surface. Every chromatic statement on the page comes from product photography — the Vans wordmark itself sits inside the photographic hero rather than as a separate brand chip. Most footwear brands hold a single bold voltage; Vans holds zero." - id: "typography" title: "What typeface does Vans use, and what should I use as a substitute?" answer: "Vans's marketing site runs two families from the same FannDoren foundry set. FannDoren Condensed at 24-64px in weight 500 carries editorial display ('Memorial Day Sale', 'Summer Shoe Rotation', 'Best in Blue', product-collection titles). FannDoren Grotesque at 12-20px in weight 400-500 carries every nav link, product card metadata, body paragraph, and footer label. Arial is the declared fallback for both — `FannDorenCondensed, Arial, sans-serif` and `FannDorenGrotesque, Arial, sans-serif`. The closest open-source substitute for FannDoren Condensed is Oswald or Roboto Condensed at the same weights; for FannDoren Grotesque use Inter or Manrope. The display tier never goes below weight 500 or above weight 500 — the entire system runs medium across every step." - id: "border-discipline" title: "Why does Vans draw every card outline in pure black?" answer: "The system has no hairline-neutral tier. Pure black #000000 carries 522 of the 535 captured border occurrences — every product-card outline, every filter-chip border, every input-field outline, every section divider. The choice goes alongside the no-accent-color discipline: with no chromatic voltage in the chrome and no near-white hairline either, the page reduces its UI vocabulary to high-contrast geometry. The product image floats inside a 1px black frame; the filter pills draw the same 1px black border; the email-signup input edge is the same value. The result reads as a printed catalog or a skate-zine layout rather than as a standard e-commerce site." - id: "rounded-style" title: "What corner-radius scale does Vans use?" answer: "The radius scale is severe and binary. 2px appears 35 times across product cards, filter chips, image tiles, and the email-signup input. 4-5px appears on text inputs (the email field at 5px, search field at 4px). A fully-rounded 9999px pill appears 3 times — reserved for filter chips and the primary CTA pill on the email-signup band. There is no 8 / 12 / 16 / 20px tier. Either a surface is essentially square (2px is sharp enough to read as zero from a distance) or it goes fully round. The choice reinforces the catalog-page aesthetic: square-cornered cards in a grid, with the only soft surfaces being the chips and CTAs." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own skate or footwear marketing 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 Vans's specific moves: pure-black border on every card and chip, no accent color in chrome, FannDoren Condensed-equivalent display at 64px / weight 500 with Grotesque-equivalent at 12-16px for everything else, severe 2px card rounding with a 9999px pill exception, and edge-to-edge photographic hero. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat worth flagging — the 'no accent color' move only reads as confidence if you have category-defining product photography to carry the chromatic load. On a brand without strong imagery the same chrome would read as undercooked or as a wireframe." mockups: - "marketing-hero" - "media-grid" colors: ink: "#262424" ink-secondary: "#1c1c1c" ink-tertiary: "#cfcfcf" canvas: "#f3f3f3" canvas-pure: "#ffffff" hairline: "#000000" focus-ring: "#93c5fd" typography: display-xl: fontFamily: "FannDorenCondensed, Arial, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 64px letterSpacing: 0 display-md: fontFamily: "FannDorenCondensed, Arial, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 32px letterSpacing: 0 display-sm: fontFamily: "FannDorenCondensed, Arial, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 24px letterSpacing: 0 heading-md: fontFamily: "FannDorenGrotesque, Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 25.6px letterSpacing: 0 body-md: fontFamily: "FannDorenGrotesque, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-input: fontFamily: "FannDorenGrotesque, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 16px letterSpacing: 0 label-md: fontFamily: "FannDorenGrotesque, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 20.48px letterSpacing: 0 caption: fontFamily: "FannDorenGrotesque, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 15.36px letterSpacing: 0 caption-light: fontFamily: "FannDorenGrotesque, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 15.36px letterSpacing: 0 rounded: none: "0px" sharp: "2px" sm: "4px" md: "5px" full: "9999px" spacing: xs: "2px" sm: "4px" base: "8px" md: "12px" lg: "16px" xl: "24px" components: button-primary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.sharp}" padding: "4px 16px" height: "32px" borderColor: "{colors.canvas}" button-cta-pill: backgroundColor: "{colors.hairline}" textColor: "{colors.canvas-pure}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: "12px 24px" height: "48px" border: "0" button-secondary: backgroundColor: "{colors.canvas-pure}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.sharp}" padding: "4px 16px" height: "32px" borderColor: "{colors.hairline}" filter-chip: backgroundColor: "{colors.canvas-pure}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: "8px 12px" height: "32px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas-pure}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "12px 24px" height: "56px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "8px 12px" photo-hero: backgroundColor: "{colors.hairline}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0px" hero-heading: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" product-card: backgroundColor: "{colors.canvas-pure}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.sharp}" padding: "0px" borderColor: "{colors.hairline}" product-card-label: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.caption}" padding: "4px" email-signup-band: backgroundColor: "{colors.hairline}" textColor: "{colors.canvas-pure}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "24px" text-input: backgroundColor: transparent textColor: "{colors.canvas-pure}" typography: "{typography.body-input}" rounded: "{rounded.md}" padding: "4px 64px 4px 16px" height: "56px" borderColor: "{colors.canvas-pure}" footer: backgroundColor: "{colors.hairline}" textColor: "{colors.canvas-pure}" typography: "{typography.caption}" padding: "24px" --- ## Overview Vans's marketing site does what no other lifestyle-footwear brand attempts. **Chrome-less brand voice.** The page reduces its UI vocabulary to two colors — a near-white body floor `{colors.canvas}` (#f3f3f3) and a pure-black hairline `{colors.hairline}` (#000000) that carries 522 of the 535 captured border occurrences. There is no accent voltage. There is no brand color in the nav, the buttons, the filters, or the footer. The Vans wordmark sits inside the photographic hero — not above it as a separate brand chip — and every chromatic statement on the page comes from the product imagery and the photography of skaters wearing the product. Where Nike paints its hero in red-and-volt and Adidas leans on the three-stripe black-blue, Vans gives the photographs the entire chromatic budget and leaves the chrome to disappear. The discipline runs across every UI atom. The primary CTA pill is black-on-white. The filter chips are 1px-black-bordered with a pure-white fill. The product cards are 1px-black-bordered with a pure-white fill. The email-signup band at the bottom of the page is the only inverse moment — a full-bleed pure-black canvas with white text and a white-bordered email field, used once. The footer continues that pure-black canvas under the email-signup band. Every other surface stays on `{colors.canvas}` (#f3f3f3) or `{colors.canvas-pure}` (#ffffff) with black ink and black borders. A light-mode focus-ring blue `{colors.focus-ring}` (#93c5fd) ships in the CSS as the UnoCSS `--un-ring-color` utility variable but never renders chromatic against the captured surface — the system declares it as an accessibility affordance and then keeps it invisible. Typography is FannDoren split across two families. **FannDoren Condensed** at 24–64px in weight 500 carries editorial display ("Memorial Day Sale" at 64px in the hero, "Summer Shoe Rotation" at 32px on section headers, "Best in Blue" at 32px on category-row labels). **FannDoren Grotesque** at 12–20px in weight 400–500 carries every nav link, product-card metadata, body paragraph, and footer label. The system never reaches for weight 700 — even the loud display headlines at 64px hold at weight 500, a deliberately editorial-magazine restraint that pairs with the no-accent-color chrome to give the page a printed-catalog feel rather than an e-commerce-template feel. **Key Characteristics:** - No accent color in chrome — every brand surface stays in black-and-near-white; chromatic work happens only inside product photography. - Pure-black hairline `{colors.hairline}` (#000000) at 522 of 535 captured border occurrences; the system has essentially no second hairline tone. - Near-white body canvas `{colors.canvas}` (#f3f3f3) instead of pure white — the warmth keeps the high-contrast geometry from reading sterile. - Two-family FannDoren split: Condensed for display at 24-64px / weight 500, Grotesque for body and metadata at 12-20px / weight 400-500. - Severe 4-step radius scale — 2 / 4 / 5 / 9999px. No 8 / 12 / 16 / 20px middle tier; either essentially square or full pill. - 9999px pill reserved for filter chips and the email-signup CTA — the only "soft" surfaces on the page. - Pure-black `{colors.hairline}` doubles as the email-signup band and footer canvas fill — the only inverse-mode surfaces. - 4px base spacing unit. Tokens cluster at 4 / 8 / 16 / 24px with a 2px micro-step for tight metadata rows. ## Colors ### Text - **Ink** (`{colors.ink}` — #262424): frequency 482 — 442 as text, 29 as background, 5 as border. The near-black ink color of the system. Sits one step warmer and one step lighter than pure black. Carries every product-card title, every nav link, every body paragraph. The text-dominant value. - **Ink Secondary** (`{colors.ink-secondary}` — #1c1c1c): frequency 4 as text. The slightly-darker text variant used for the email-signup body copy on the pure-black band — sits between the near-black ink and pure black for readability against the black canvas. - **Ink Tertiary** (`{colors.ink-tertiary}` — #cfcfcf): frequency 6 — 4 as text, 2 as background. A pale-gray secondary tone used for disabled-state product-card overlays and small caption rows. ### Surface - **Canvas** (`{colors.canvas}` — #f3f3f3): frequency 48 — 33 as text, 12 as gradient, 2 as background. The near-white body floor and the dominant white-on-black text color (used as the email-signup band text fill). Not pure white; the warmth softens the high-contrast geometry of the black-bordered cards. - **Canvas Pure** (`{colors.canvas-pure}` — #ffffff): frequency 71 — 50 as text, 14 as background, 6 as border. Pure white. Used inside product cards, filter chips, and the top-nav surface where the warmth of `{colors.canvas}` would compete with photographic content. ### Hairline - **Hairline** (`{colors.hairline}` — #000000): frequency 528 — 522 as border, 2 as background, 2 as shadow, 1 as text, 1 as gradient. The dominant border tone — wired in the CSS as `--un-default-border-color` (UnoCSS default). The structural value that does every elevation, divider, and outline job in the system. Also functions as the full-bleed background of the email-signup band and the footer canvas. ### Accessibility - **Focus Ring** (`{colors.focus-ring}` — #93c5fd): a pale-blue focus-ring color declared in the CSS as `--un-ring-color` (UnoCSS utility default) but never rendered in the captured page. Reserved as an accessibility affordance for keyboard-focus states on form inputs and tabbable surfaces. The single chromatic value in the entire token set, deliberately invisible against the page chrome. ## Typography ### Font Families The system runs **two families from the FannDoren foundry set**. **FannDoren Condensed** at 24-64px in weight 500 carries editorial display: "Memorial Day Sale" at 64px in the photographic hero, "Summer Shoe Rotation" and "Best in Blue" at 32px on section headers, smaller display tier at 24px on category-row labels. **FannDoren Grotesque** at 12-20px in weight 400-500 carries every nav link, product-card metadata, body paragraph, and footer label. Arial is the declared fallback for both: `FannDorenCondensed, Arial, sans-serif` and `FannDorenGrotesque, Arial, sans-serif`. The two families share the same weight discipline — both stay at weight 400-500, never above. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 64px | 500 | 64px | Photographic-hero h2 ("Memorial Day Sale") | | `{typography.display-md}` | 32px | 500 | 32px | Section h2 ("Summer Shoe Rotation", "Best in Blue") | | `{typography.display-sm}` | 24px | 500 | 24px | Smaller category-row labels (Condensed) | | `{typography.heading-md}` | 20px | 500 | 25.6px | Sub-section titles (Grotesque) | | `{typography.body-md}` | 16px | 400 | 24px | Default running text, paragraph body | | `{typography.body-input}` | 16px | 400 | 16px | Email-signup input text | | `{typography.label-md}` | 16px | 500 | 20.48px | Nav links, button labels, CTA text | | `{typography.caption}` | 12px | 500 | 15.36px | Product-card metadata, footer category labels | | `{typography.caption-light}` | 12px | 400 | 15.36px | Disclaimer copy, micro-fine print | ### Principles The split between Condensed and Grotesque carries the page's vertical hierarchy. Condensed signals "editorial / display" — section headers and the hero use it exclusively. Grotesque signals "interface / metadata" — every nav link, button label, and product-card caption uses it. The display weight stays at 500 across all sizes, even at 64px; the system never reaches for 700+ weight. Where Nike's display tier sits at 800-900 black weight and Adidas hits weight 700 on hero h1s, Vans's editorial restraint at weight 500 reads more printed-catalog than e-commerce-template. ### Note on Font Substitutes FannDoren is a licensed foundry family. The closest open-source substitute for FannDoren Condensed is **Oswald** at weight 500 or **Roboto Condensed** at the same weights — both transfer the narrow-stem display feel. For FannDoren Grotesque, **Inter** or **Manrope** at weight 400-500 transfer cleanly at body sizes. Arial is already the declared fallback in the CSS, so the system degrades gracefully without any substitution work. The weight discipline — never above 500 — is the move to preserve regardless of which family you swap in. ## Layout ### Spacing System - **Base unit:** 4px — the dominant gap value, appearing 83 times in the captured page; 8px is the next most-common at 51 occurrences. - **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px. - **Section padding (vertical):** 24px between major bands; the photographic hero and product-grid rows sit edge-to-edge with no outer padding. - **Card internal padding:** the product cards use no internal padding — the image fills the card edge-to-edge with the caption row sitting beneath, padded at 4px. - **Top-nav padding:** 12x24 (`{spacing.md}` vertical, `{spacing.xl}` horizontal). ### Grid & Container - **Max content width:** the page runs near full-bleed at desktop — product grids span ~1440px without a centered container, and the photographic hero and email-signup bands extend edge-to-edge. - **Photographic hero:** full-bleed `{colors.hairline}` background with a photograph of skaters overlaid; the Vans wordmark sits inside the photograph rather than above it, and the "Memorial Day Sale" headline overlays the bottom-left of the image at 64px. - **Filter row:** horizontal scroll-strip of pill chips ("Sneakers / Slip-Ons / Authentic / Old Skool / Sk8-Hi") just below the hero — each chip is 1px-black-bordered with a pure-white fill at 9999px radius. - **Product grid:** 2-up rows on the captured surface (collapsing to 4-up at wider viewports), each product card holding a hero image, title in `{typography.caption}`, and price row. - **Email-signup band:** full-bleed pure-black canvas with white text reading "Join Our Email List" plus an email input and submit pill, sits just above the footer. - **Footer:** continues the pure-black canvas with white category labels in 2-column layout. ### Rhythm The page alternates between **edge-to-edge photographic content** (the hero, product-card image rows) and **typography-led band breaks** (section headers in `{typography.display-md}`). There is essentially no horizontal padding rhythm — the layout trusts the photography to fill the viewport and uses the section headers as the visual chapter breaks. The only padded surfaces are the email-signup band and the footer, both of which sit on the inverse pure-black canvas. ## Elevation The system has essentially **no shadow tier**. Pure-black `{colors.hairline}` 1px borders carry every elevation job the page asks for. The captured shadow occurrences (2 instances of `#000000` as shadow, 1 instance of `#ffffff` as shadow) are confined to declared but-unrendered focus-state tokens (`--un-shadow`, `--un-ring-offset-shadow`) from the UnoCSS utility set — neither renders chromatically on the captured surface. - **Flat (no shadow):** every body card, every filter chip, every product tile, the email-signup band, the footer — 100% of captured surfaces. - **Border outline:** `{colors.hairline}` (#000000) at 1px is the only elevation device. Cards, filter chips, and input fields all share the same hairline. - **Inverse surfaces:** the email-signup band and footer use pure-black `{colors.hairline}` as a full-bleed canvas — depth comes from the canvas-color flip rather than from any layered shadow. ## Shapes The radius scale is **severe and binary**: essentially-square cards plus a full-pill exception, with no middle tier. - `{rounded.none}` 0px — used on the photographic-hero canvas and on the section dividers. - `{rounded.sharp}` 2px (35 occurrences — the dominant value) — used on every product card, image tile, filter chip, and section block. Sharp enough to read as zero from a distance. - `{rounded.sm}` 4px (2 occurrences) — search and small utility inputs. - `{rounded.md}` 5px (3 occurrences) — the email-signup text input. - `{rounded.full}` 9999px (3 occurrences) — filter chips and the email-signup submit pill. The only soft surfaces on the page. There is no 8 / 12 / 16 / 20px middle tier. Either a surface is essentially square or it goes fully round. The choice reinforces the printed-catalog feel: square-cornered cards in a grid, with the only "soft" surfaces being the chips and CTAs. ## Components **`button-primary`** — Near-white `{colors.canvas}` (#f3f3f3) fill, ink text, `{rounded.sharp}` (2px), 4x16 padding, 32px height. The "Skip to Main Content" accessibility CTA and the small in-content secondary buttons. The captured page favors this near-white-on-black-text variant for body-content CTAs. **`button-cta-pill`** — Pure-black `{colors.hairline}` fill, pure-white text, `{rounded.full}` 9999px pill, 12x24 padding, 48px height. The hero CTA and the email-signup submit affordance — the only fully-rounded buttons in the system. **`button-secondary`** — Pure-white `{colors.canvas-pure}` fill, ink text, 1px black border, `{rounded.sharp}` 2px radius. The outline alternative used inside cards and below product images. **`filter-chip`** — Pure-white `{colors.canvas-pure}` fill, ink text, 1px black border, `{rounded.full}` 9999px pill, 8x12 padding, 32px height. The filter strip below the hero (Sneakers / Slip-Ons / Authentic / Old Skool / Sk8-Hi). The only soft-edge surface in the body content. **`top-nav`** — Pure-white surface, 56px height, ink text. Vans wordmark flush left in pure-black, primary nav links (Shoes / Clothing / Accessories / Customs / Sale) center, right-aligned account / cart icons. The wordmark is the only "logo" instance on the page — every other Vans mark sits inside product photography. **`nav-link`** — Transparent background, ink text in `{typography.label-md}` (16px / 500), 8x12 padding. No hover background visible in the captured surface. **`photo-hero`** — Pure-black `{colors.hairline}` background fill with photographic content overlay, edge-to-edge with no radius and no padding. The hero spans the full viewport; the Vans wordmark and 64px Condensed display headline overlay the photograph at the bottom-left. **`hero-heading`** — Near-white `{colors.canvas}` text on the photographic-hero overlay, `{typography.display-xl}` (64px / 500). The "Memorial Day Sale" tier — FannDoren Condensed at the loudest display step. **`section-heading`** — Ink text, `{typography.display-md}` (32px / 500). Used for "Summer Shoe Rotation," "Best in Blue," "Made for Skating" category-row headers — FannDoren Condensed at the section step. **`body-paragraph`** — Default ink running-text at `{typography.body-md}` (16px / 400). **`product-card`** — Pure-white `{colors.canvas-pure}` fill, ink text, 1px black border, `{rounded.sharp}` 2px radius, 0 padding. The image fills the card edge-to-edge with the caption row sitting beneath at 4px padding. Used in every product grid on the page. **`product-card-label`** — Transparent background, ink text in `{typography.caption}` (12px / 500), 4px padding. The product title and price row sitting beneath the card image. **`email-signup-band`** — Full-bleed pure-black `{colors.hairline}` canvas, white text, 24px padding, no radius. Holds a heading reading "Join Our Email List," a one-line lead paragraph, an email-input field with white-border on transparent fill, and a pure-black CTA pill. The single inverse moment on the page. **`text-input`** — Transparent fill, pure-white text, `{rounded.md}` 5px radius, 4px 64px 4px 16px padding (right-padded to leave room for an inline submit icon), 56px height. White border on the pure-black email-signup band. The only text-input variant captured. **`footer`** — Pure-black `{colors.hairline}` canvas continuing under the email-signup band, white category labels in `{typography.caption}`, 24px padding. Multi-column site-map block with category headings in pure-white and links in the same. ## Do's and Don'ts **Do** keep chrome chromatically silent. Every button, chip, card outline, nav link, and footer label should stay in `{colors.ink}` (#262424), `{colors.canvas-pure}` (#ffffff), or `{colors.hairline}` (#000000). The system's identity comes from refusing every accent color that retail e-commerce defaults to; introducing a brand voltage to the CTA breaks the whole move. **Do** use `{colors.hairline}` (#000000) — not a near-black or near-neutral hairline — for every card and chip outline. The system has 522 captured border occurrences and they are all the same pure-black value; any tonal variation in the hairline breaks the catalog-page rhythm. **Do** keep display weight at `{typography.display-xl}` (64px / 500), never higher. The editorial restraint at weight 500 is what gives the page its skate-zine voice; bumping to 700+ on a 64px headline turns the layout into a generic athletic-brand hero. **Do** put the Vans wordmark inside the photographic hero, not above it as a separate chip. The hero composition has the wordmark and the display headline overlaid on the photograph at the bottom-left — treating the wordmark as a separate logo bar collapses the "product is the brand" framing the hero depends on. **Don't** introduce an 8 / 12 / 16 / 20px middle radius tier. The system is binary — `{rounded.sharp}` (2px) on every card and chip plus `{rounded.full}` (9999px) on filter chips and CTAs. Adding a middle tier softens the visual contrast between the square product grid and the soft pill surfaces. **Don't** use `{colors.focus-ring}` (#93c5fd) as a brand color, link color, or button background. It is declared in the CSS as the UnoCSS `--un-ring-color` utility default — an accessibility affordance for keyboard focus, not a chromatic brand value. Letting it surface as a body color would introduce the only non-black-and-white voltage in the system. **Don't** invert the product-card border to `{colors.ink}` (#262424) or any near-black. The 1px black `{colors.hairline}` is uniform across every card in the page; near-black variants would read as "almost the same" rather than as a deliberate hairline choice and would muddy the visual rhythm. **Don't** add internal padding to the product card — the image must fill the card edge-to-edge with the caption row sitting beneath at 4px. Padding the image away from the border creates a "framed" feel that breaks the catalog-grid layout. ## Known Gaps - **Hover and focus states:** the captured page renders resting-state values only; the `--un-ring-color` (#93c5fd) focus-ring blue and `--un-ring-offset-color` (#ffffff) are declared as UnoCSS utility variables but no focus / hover / active state is visible on the captured surface. - **Form input error states:** the only captured input is the email-signup field on the pure-black band; error and validation styling is not exposed on the marketing site. - **Dark mode:** the page does not expose a separate dark-mode variant — the email-signup band and footer already invert to pure-black canvas as an editorial move rather than as a mode switch. - **Motion:** the photographic hero and product carousels animate (autoplay slide transitions, scroll-triggered fades) but transition timing, easing, and duration are not exposed as CSS tokens. - **Product surfaces:** this DESIGN.md captures the marketing site only. The Vans product-detail pages (`/shoes/old-skool`), the shopping cart, the customs configurator (`/customs`), and the account portal carry their own token systems that are not represented here. - **Photography palette:** the page's chromatic load comes entirely from product imagery — the actual color palette of the shoe / clothing / accessory photography is not in scope for this spec. - **Mobile / responsive:** the captured surface is the 1440-wide desktop render. The mobile-collapsed hamburger nav, the single-column product grid, and the touch-targeted filter row are not represented in component tokens here.