--- version: alpha name: "PUMA" website: "https://us.puma.com" description: >- A performance sportswear brand that runs its entire US e-commerce site on a stark near-black and white binary — near-black ink (#191919) as the primary text and button surface, pure white as the page floor, with a single light-gray hairline (#e5e7eb) carrying almost all 341 border occurrences. Color comes exclusively from product photography, not brand chrome. FFDINforPuma (a custom DIN-geometry condensed sans) drives every typographic tier from 40px hero h1 at weight 700 to 12px captions, with uppercase tracking reserved for category labels and nav links. The radius scale is nearly flat — 2px on buttons, 9999px on pill chips — and no shadows appear anywhere in the captured marketing surface. seo: title: "PUMA Design System for React — near-black on white, FFDINforPuma, 16 components" metaDescription: "PUMA's e-commerce design system as a DESIGN.md file. Near-black #191919 buttons, FFDINforPuma at weight 700, uppercase-tracked nav labels, 14 color tokens, 16 components. For React, Next.js, and AI tools." highlights: - "Photography-voltage system — brand color is absent from the chrome; every chromatic moment on the page comes from product images, not CSS fills" - "FFDINforPuma at condensed weight 700 — the custom DIN variant drives every heading tier, with uppercase + 0.32px tracking on nav links and category labels as the sole typographic accent" - "2px default radius — buttons, inputs, and cards all sit at 2px, placing PUMA closer to sharp-edge fashion brands (Zara, Supreme) than to the pill-first Nike or Adidas" - "Absolute binary palette — near-black (#191919) and white (#ffffff) carry 339 of the 416 total color occurrences; mid-gray hairlines handle the rest" - "Product-only color — the hero gradient is generated by product imagery (shoes in orange-pink-blue tones); the page chrome contributes zero chromatic pixels" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | PUMA's US storefront is a study in photographic delegation — the brand trusts product photography to carry every chromatic responsibility and keeps every CSS-rendered surface in a two-tone near-black and white. The hero heading "SHOWTIME" runs in white at 40px FFDINforPuma weight 700 over a gradient-banner that is itself a product composition (shoes in warm orange, pink, and electric blue tones). Scroll past the hero and every section is white canvas with near-black type, light gray hairline borders, and images doing all the emotive work. Where Nike uses a thick white-on-black type treatment with occasional volt yellow accents, and Adidas leans on a blue-threaded nav, PUMA keeps the chrome down to a binary and lets the product photography generate the brand personality per-season. The DESIGN.md file captures the system into a machine-readable spec for React and AI tools. Inside: 14 color tokens covering the near-black ink and button surface, the white canvas, two gray mids for secondary text and hairlines, and pure black for shadow and hard-border moments; 12 typography tokens running FFDINforPuma from 40px hero h1 through 12px captions — the only two-axis variation being size and weight (400 for body, 700 for headings and CTA labels), with uppercase tracking appearing on navigation links and category headers; 5 radius tokens anchored at 2px; 8 spacing values on a 4px/8px base; and 16 component definitions covering the primary button, ghost button, top nav, hero heading, product card, and category-tab strip. Feed this file to Claude or Cursor and it will reproduce PUMA's specific moves: near-black fill primary buttons with 2px radius instead of the pill or 8px rounding that most sportswear e-commerce defaults to, all-caps uppercase nav links with 0.32px tracking, and white canvas sections where the only non-neutral element is a product image. The most transferable lesson from this system is the discipline of zero brand-chrome color — it means the palette never clashes with seasonal product colorways, which in sportswear change every six to eight weeks. 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://us.puma.com" title: "PUMA — official site" description: "PUMA's public US storefront — 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 PUMA's primary brand color?" answer: "PUMA's marketing site has no CSS-rendered brand color. The only chromatic voltage on the page comes from product photography — shoes, apparel, and campaign imagery in orange, pink, electric blue, and neon green tones that change seasonally. The button and nav system runs on near-black (#191919) and white (#ffffff) exclusively. This is distinct from brands like Nike (volt yellow accents) or Adidas (trefoil blue in the nav) — PUMA delegates color entirely to the product, so the token system contains no primary brand-color entry." - id: "typeface" title: "What typeface does PUMA use and what should I substitute?" answer: "PUMA uses FFDINforPuma — a custom variant of the DIN Engschrift condensed geometric sans-serif commissioned for the brand. It appears at weight 400 for body copy and 700 for headings, buttons, and category labels. Uppercase tracking (0.32px) is applied to navigation links and category headers. The closest open-source substitute is DIN Condensed at bold weight; if that is unavailable, Barlow Condensed at 700 reproduces the tightly-spaced, sport-utility feel. Inter or Roboto at the same weights are not close substitutes — they lack the condensed geometry that defines the brand voice." - id: "radius-philosophy" title: "What corner-radius philosophy does PUMA use?" answer: "PUMA's radius scale is almost flat. The default for buttons, form inputs, and content cards is 2px — closer to square than rounded. The only departure is a 9999px full pill used for category-tag chips and quantity badges, and an 8px value for modal surfaces. The 2px default is a deliberate edge-sharpness signal: it reads as sport-precision rather than the friendly-consumer rounding (8–16px) that Nike and New Balance use, and it clearly differentiates from the fully-pill approach of Gymshark and Lululemon. Adding 4–8px to PUMA buttons would immediately read as off-brand." - id: "typography-hierarchy" title: "How does PUMA structure its type hierarchy?" answer: "PUMA uses FFDINforPuma across every tier with weight and size as the only variation axes. Hero h1 runs at 40px / weight 700, section headings at 20–32px / 700, sub-sections at 18px / 700 (sometimes with uppercase transform), body paragraphs at 16px / 400, and captions at 12px / 400. The distinctive typographic move is uppercase text-transform applied to navigation links and category-section headers — 16px / 700 / 0.32px tracking is the canonical nav-link treatment. There is no separate display family or serif tier; the condensed DIN does everything." - id: "build-sportswear-site" title: "Can I use this DESIGN.md to build a sportswear e-commerce 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 PUMA's specific moves: near-black #191919 primary buttons at 2px radius, white canvas sections with light-gray #e5e7eb hairlines, FFDINforPuma-equivalent condensed sans at weight 700 for headings, and uppercase-tracked nav links. One important caveat: the design works because product photography carries the color. If your product imagery is low-quality or inconsistently lit, the near-zero brand chrome will read as sparse rather than confident. The system is optimized for high-quality product shots on a white-to-near-black canvas." mockups: - "marketing-hero" - "media-grid" colors: ink: "#191919" canvas: "#ffffff" hairline: "#e5e7eb" ink-muted: "#a1a8af" ink-secondary: "#676d75" shadow: "#000000" typography: display-xl: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 44px letterSpacing: 0 display-lg: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 36px letterSpacing: 0 heading-md: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 32px letterSpacing: 0 heading-sm: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 28px letterSpacing: 0 label-uppercase: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: "0.32px" label-section: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 24px letterSpacing: 0 body-lg: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px letterSpacing: 0 body-md: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 20px letterSpacing: 0 caption: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 nav-link: fontFamily: "FFDINforPuma, Inter, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: "0.32px" rounded: none: "0px" xs: "2px" sm: "4px" md: "8px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "20px" xl: "32px" 2xl: "40px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "8px 20px" height: "40px" border: "0" button-primary-hover: backgroundColor: "{colors.shadow}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "8px 20px" height: "40px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: "8px 20px" height: "40px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 16px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.nav-link}" padding: "8px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" padding: "0px 0px 16px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.caption}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: "8px" borderColor: "{colors.hairline}" product-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "0" category-chip: backgroundColor: "{colors.hairline}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: "4px 24px" height: "28px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "8px 20px" height: "40px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.caption}" padding: "40px 16px" promo-banner: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.label-uppercase}" padding: "8px 16px" section-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-uppercase}" padding: "0" --- ## Overview PUMA's US storefront operates on a rule that almost no other sportswear brand follows consistently. **Photography-voltage system.** The page chrome is a strict two-tone — near-black (#191919) and white (#ffffff) — and every chromatic moment on the page comes from product imagery, not a CSS fill. The hero band "SHOWTIME" sets a 40px FFDINforPuma headline in white over a product-generated gradient of orange, pink, and electric blue shoe photography. Below the fold every section returns to white canvas with near-black type. Where Nike punctuates with volt yellow and Adidas threads blue through its nav, PUMA keeps the system at zero brand-color, delegating hue entirely to whatever product colorway the current campaign features. **Sharp-edge precision.** The radius scale is nearly flat: 2px on buttons and inputs, 14px on the select dropdown, no rounding at all on cards and editorial image panels. This places PUMA with sharp-edge fashion brands (Zara, Supreme) rather than with the pill-first sportswear convention (Gymshark's rounded surfaces, New Balance's 8px default). The condensed DIN geometry of FFDINforPuma reinforces the same signal: tight, angular, sport-utility rather than friendly-consumer. The typography system uses uppercase text-transform with 0.32px letter-spacing as its sole accent tool. Nav links, category section headers, and the promo-announcement strip all sit at 16px / 700 / uppercase / 0.32px tracking. Below that tier, body copy drops to 16px / 400 with no transform. This two-register system — uppercase authority versus lowercase legibility — carries all typographic hierarchy without any secondary typeface. **Key Characteristics:** - Near-black (#191919) carries 193 text occurrences and fills every primary button; pure white covers 87 text and 23 background occurrences — together these two colors represent the entire brand surface. - Light-gray hairline (#e5e7eb) handles 341 of all border occurrences — card dividers, input outlines, and separator rules are all the same single border tone. - FFDINforPuma (custom DIN condensed) drives every typographic tier — no secondary family, no serif tier. - Uppercase transform + 0.32px tracking is the nav link and category-header treatment; body and headings keep default case. - 2px default radius — the smallest non-zero radius in the active system, sharper than Nike (4px), Adidas (4px), or New Balance (8px). - No brand-color token at all — the CSS variable set exposes Tailwind ring utilities but no primary/accent custom property. - No shadow layer — zero shadow occurrences across the entire captured page. ## Colors ### Surface - **Ink** (`{colors.ink}` — #191919): frequency 225. Used as text (193), background (16), border (16). The near-black that carries every primary-button fill and all heading text. Not pure black — the slight lift keeps headlines from feeling heavy-printed on white. - **Canvas** (`{colors.canvas}` — #ffffff): frequency 114. Used as text (87), background (23), border (4). Pure white page floor and the color of reversed text inside the dark hero. The merged cluster includes a near-white card surface variant that rounds to the same representative token. - **Shadow** (`{colors.shadow}` — #000000): frequency 19. Used as text (10), border (7), shadow (2). Appears on a small set of hard-edge UI elements — the PUMA logo mark, a few pure-black borders on modal overlays — and as shadow ink on the two shadow occurrences. ### Text - **Ink Muted** (`{colors.ink-muted}` — #a1a8af): frequency 13. Used as text (9), border (4). The mid-gray for secondary labels — size ranges, availability notices, and metadata beneath product cards. - **Ink Secondary** (`{colors.ink-secondary}` — #676d75): frequency 9. Used as text (6), gradient (1). Secondary body copy and the single gradient occurrence on the footer gradient separator. Slightly darker and more neutral than ink-muted. ### Hairline - **Hairline** (`{colors.hairline}` — #e5e7eb): frequency 416. Used as text (74), background (1), border (341). The dominant color by total occurrences — 341 of these are border fills on card dividers, input outlines, and section separators. The merged cluster groups several near-identical light-gray values from different UI contexts, all collapsed to this single representative mid-gray. ## Typography ### Font Family The system runs **FFDINforPuma** across every tier — a custom commissioned variant of DIN Engschrift, the German condensed geometric sans-serif originally designed for signage and engineering drawings. Fallbacks walk to Inter, then the system-ui stack. There is no secondary display family, no serif tier, and no monospace voice. ### Hierarchy | Token | Size | Weight | Transform | Line Height | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 40px | 700 | none | 44px | Hero h1 ("SHOWTIME", seasonal campaign headlines) | | `{typography.display-lg}` | 32px | 700 | none | 36px | Sub-section h3/h4 headers | | `{typography.heading-md}` | 24px | 700 | none | 32px | Section h2 ("FRESH ON THE TRACK") | | `{typography.heading-sm}` | 20px | 700 | none | 28px | Product-category intros, h1/h2 alternate tier | | `{typography.label-uppercase}` | 16px | 700 | uppercase | 24px | Nav links, CTA labels ("SHOP NOW") | | `{typography.label-section}` | 18px | 700 | uppercase | 24px | Section-category headers | | `{typography.body-lg}` | 24px | 400 | none | 32px | Lead paragraph beneath hero | | `{typography.body-md}` | 16px | 400 | none | 24px | Default running text and button labels | | `{typography.body-sm}` | 14px | 700 | none | 20px | Product name labels above price | | `{typography.caption}` | 12px | 400 | none | 16px | Price metadata, availability text | | `{typography.button-md}` | 16px | 400 | none | 24px | Primary and secondary button text | | `{typography.nav-link}` | 16px | 700 | uppercase | 24px | Top-nav primary links, 0.32px tracking | ### Principles Weight 700 is the authority tier — everything that commands action (headings, buttons, nav labels) sits there. Weight 400 is the legibility tier — body, caption, running text. There is no 500 or 600 intermediate; the binary weight split is as sharp as the binary color split. Uppercase transform with 0.32px tracking is the system's only typographic accent; applied to nav and category labels, it reads as sport-catalog directness without needing a secondary typeface. ### Note on Font Substitutes FFDINforPuma is proprietary. **DIN Condensed** (available in many design tools) at weight 700 is the closest substitute. **Barlow Condensed** at 700 transfers well for the sport-utility feel. Avoid Inter or Roboto — they lack the condensed geometry that makes the system feel athletic rather than generic. ## Layout ### Spacing System - **Base unit:** 4px with 8px as the dominant single-value gap. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 32px · `{spacing.2xl}` 40px · `{spacing.3xl}` 64px. - **Button padding:** 8x20px — the most-captured shorthand (11 occurrences), used across all primary CTAs. - **Nav items:** 0x16px horizontal padding, creating a flush left-to-edge nav strip. - **Section vertical rhythm:** ~40px between major product-grid sections; 64px for the above-fold hero band. ### Grid & Container - **Max content width:** ~1440px at desktop. Product grids run at 4-column wide, collapsing to 2-column on tablet and 1-column on mobile. - **Hero block:** full-bleed image composition stretching edge-to-edge, with the heading and CTA stack floating at center-left. - **Product card grid:** uniform cards with hairline borders, equal aspect-ratio image panels, product name / price beneath. ### Rhythm The page alternates between a full-bleed campaign hero (white text on product image), an editorial product grid (white canvas, dark type), and a secondary campaign callout (dark canvas, reversed white type). The rhythm is campaign → catalog → campaign rather than a continuous single-surface scroll. ## Elevation PUMA's captured marketing surface has **zero shadows**. The two shadow-colored entries in the extraction (#000000, shadow: 2) map to form overlays and dropdown menus, not to any card or button elevation. Product cards use hairline borders (`{colors.hairline}`) to define edges rather than drop-shadow depth. The system is entirely flat — consistent with a fashion-retail convention where shadow adds visual weight that competes with product photography. ## Shapes The radius scale is **deliberately sharp**, anchored at 2px: - `{rounded.none}` 0px — editorial image tiles and banner panels, square to the edge. - `{rounded.xs}` 2px — the default for buttons (`{component.button-primary}`), form inputs (`{component.text-input}`), and product cards. Ten occurrences; the dominant active radius. - `{rounded.sm}` 4px — minor accent radius for small badge elements. - `{rounded.md}` 8px — used on the select-country dropdown and modal overlays (14px also appears but maps to sm in the scale). - `{rounded.full}` 9999px — category-chip pills and quantity-badge circles. Ten occurrences at the pill extreme. The 2px radius is the identity-defining choice. Unlike Nike (4px rounded buttons), Gymshark (8px), or New Balance (8px cards), PUMA plants its buttons at 2px — angular enough to read as engineered sport-precision, soft enough to avoid the clinical harshness of pure 0px. ## Components **`button-primary`** — Near-black `{colors.ink}` (#191919) fill, white text, `{rounded.xs}` 2px radius, 8×20px padding, 40px height. Appears as "SHOP NOW," "ADD TO BAG," and campaign CTAs. The single most-captured component on the page. **`button-primary-hover`** — Flips to pure `{colors.shadow}` (#000000) — one shade darker than the ink fill. A minimal hover state that stays within the brand's binary palette. **`button-secondary`** — White fill, near-black text and border, 2px radius, same dimensions as the primary. Used for secondary actions like "FIND A STORE" and "VIEW ALL." **`top-nav`** — Near-black `{colors.ink}` surface, 48px height, 0×16px horizontal padding. Holds the PUMA leaping-cat wordmark on the left, product navigation links (Men, Women, Kids, Sale, Sport) in the center at `{typography.nav-link}` (uppercase, 700, 0.32px tracking), and the account / search / bag icons on the right. **`nav-link`** — Transparent background, white text at `{typography.nav-link}` — uppercase, 700, 0.32px tracking. The uppercase treatment is the system's most distinctive typographic move. **`hero-heading`** — White text on the transparent hero overlay, `{typography.display-xl}` (40px / 700). Appears over full-bleed product photography — "SHOWTIME" is the canonical instance. **`section-heading`** — Near-black ink text at `{typography.heading-md}` (24px / 700), 16px bottom padding. Used for "FRESH ON THE TRACK," "HOT IN SPORT," "TRENDING THIS SEASON." **`body-paragraph`** — Default ink text at `{typography.body-md}` for supporting copy beneath headings. **`body-paragraph-muted`** — Muted `{colors.ink-muted}` at `{typography.caption}` for secondary metadata beneath product cards (size ranges, availability). **`card`** — White canvas fill, 1px hairline border, `{rounded.xs}` 2px radius, 8px internal padding. Wraps product image + label + price. Zero shadow; the hairline defines the edge. **`product-label`** — Transparent, near-black, `{typography.body-sm}` (14px / 700). Product name above the price. **`category-chip`** — Light-gray `{colors.hairline}` fill, near-black text, full-pill `{rounded.full}` rounding, 4×24px padding, 28px height. Used for "Men," "Women," "Running," and other filter chips. **`text-input`** — White fill, ink text, 1px hairline border, `{rounded.xs}` 2px radius, 8×20px padding, 40px height. Same 2px sharpness as the button family. **`footer`** — Near-black `{colors.ink}` surface, white text at `{typography.caption}`, 40×16px padding. Houses the multi-column PUMA link tree, social icons, and legal disclaimers. **`promo-banner`** — Near-black fill, white text at `{typography.label-uppercase}` (uppercase, 0.32px tracking). The thin announcement strip pinned above the top-nav on pages with active promotions. **`section-label`** — Transparent, near-black, `{typography.label-uppercase}` (uppercase, 700, 0.32px tracking). Used above product grids to announce the section category without a fill background. ## Do's and Don'ts **Do** use `{colors.ink}` (#191919) — not pure `{colors.shadow}` (#000000) — as the default button fill and heading color. The near-black sits at L=21 in OKLCH rather than L=0; the small lift matters for on-screen legibility and distinguishes the brand surface from hard-printed black. **Do** apply uppercase text-transform with 0.32px letter-spacing to any navigation label, CTA button, or category-section header. This two-axis treatment (uppercase + tracking) is the system's sole typographic accent; omitting either axis reads as generic. **Do** keep product cards at zero shadow and a single `{colors.hairline}` border. Any added shadow depth competes visually with the product photography that carries all the chromatic weight on the page. **Do** treat photography as the brand's color system. Seasonal product campaigns change the dominant hue on the page (orange for one drop, electric blue for the next) without ever touching a CSS variable — this is the architecture's strongest structural feature. **Don't** round primary buttons beyond `{rounded.xs}` (2px). A developer familiar with Nike's 4px or Gymshark's rounded surfaces would instinctively add 4–8px. At 4px+ the button reads as a different brand. At 2px it reads as PUMA. **Don't** introduce a mid-weight (500 or 600) into the type scale. FFDINforPuma's published weights are 400 and 700; the binary weight split is load-bearing. A 500-weight heading would read as a rendering artifact, not a design choice, and there is no licensed mid-weight available. **Don't** use `{colors.hairline}` (#e5e7eb) as a text color — it is a border-and-background-only token (341 of 416 occurrences are borders, 74 are text only on inactive secondary labels). For any body copy, use `{colors.ink}` or `{colors.ink-muted}`. **Don't** add a brand-accent color to the CSS for seasonal campaigns. The architecture's entire bet is that the photography changes and the chrome does not. Adding a CSS accent hex that changes per-season breaks the system's color-delegation rule and requires coordinated developer work for every product drop. ## Known Gaps - **Dark mode:** the captured surface is light-only. A dark canvas does appear inside the hero band and the top-nav, but is implemented as a hardcoded ink fill rather than a CSS color-scheme toggle; true dark-mode tokens are not exposed. - **Product-color swatches:** the color picker on individual product pages exposes brand colorways (PUMA Red, Ferrari Yellow, etc.) as swatch chips, none of which are represented in this token set — they are image-rendered rather than CSS-declared. - **Focus and error states:** `{component.text-input}` captures the resting state only. Focus-ring color, error-border color, and disabled-opacity are not visible in the captured marketing surface. - **Motion and hover on product cards:** product cards show a secondary colorway image on hover, but the transition timing and easing are not captured in the extraction. - **Mobile-specific tokens:** the desktop captures show 4-column grids and 1440px max-width; mobile equivalents (2-column card grids, collapsed nav, hamburger menu) carry different padding and size values not represented here. - **Promo-header gradient:** the hero banner gradient is generated by product photography composition, not a CSS gradient declaration — the token system cannot represent the seasonal color of the hero section.