--- version: alpha name: "MINI" website: "https://www.mini.com" description: >- A BMW-owned compact-car brand whose marketing page is structured as a single full-bleed cinematic photograph with one uppercase serif headline floor-stamped over it. The hero on mini.com is a wide warehouse interior with two MINIs parked on a reflective wet concrete floor — a red and cream JCW rally build on the left, an olive and yellow electric build on the right — and a 64px MINIBold uppercase headline in white sits flush left over the photograph reading "MINI JCW X DEUS EX MACHINA." with the period as a brand mark. The system runs two families — MINIBold (a heavy slab-display serif) for the single hero headline only, and MINISansReg for the small nav links, sub-copy, and footer chrome. The page floor is the photograph, the chrome is ink-on-white below, and the only interactive element above the fold is a circular black scroll-to-top button. seo: title: "MINI Design System for React — black-and-white, MINIBold serif headlines, 10 components" metaDescription: "MINI's marketing system as a DESIGN.md file. Full-bleed warehouse photography, 64px MINIBold uppercase serif headlines with period brand marks, MINISansReg chrome, and circular scroll buttons. Tokens for React, Next.js, and AI coding tools." highlights: - "Photograph as floor — every above-fold pixel is the warehouse hero shot; brand chrome is the MINI wings logo flush left, one nav link, and the headline floor-stamped over the photograph" - "Two-family typographic split — MINIBold (slab-display serif) carries the single hero headline at 64px, MINISansReg carries every nav, label, and footer link at 14-16px" - "Period as brand mark — every headline ends in a period (\"MINI JCW X DEUS EX MACHINA.\"), an editorial typographic signature that runs across MINI's print and digital campaigns" - "Binary radius scale — every surface is squared except a single 50% circular scroll-to-top button and the circular wings logo treatment" - "Pure monochrome chrome — true black ink and true white headline-over-photo are the entire palette; the only color on the page belongs to the cars themselves" tags: - "Automotive" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | MINI's marketing page does something almost no other category brand attempts. The above-fold hero is a single cinematic warehouse photograph — high-ceiling industrial space, wet concrete floor reflecting overhead light, two MINI cars parked at off-axis angles, a red and cream JCW rally build on the left and an olive and yellow electric build on the right — and a 64px MINIBold uppercase serif headline floor-stamps over it in white at the lower-left third reading "MINI JCW X DEUS EX MACHINA." The period after the headline is not punctuation; it is a brand typographic signature that runs across MINI's print campaigns, dealership signage, and the heading on every model page. Where most automakers fill the hero with chrome — model badges, configuration CTAs, financing hooks — MINI ships nothing above the fold but the photograph, the headline, the small sub-line "Two worlds. Two cars. Singular enthusiasm.", and the wings logo flush left in the nav. There is no primary CTA above the fold at all. The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: four color tokens (true black, true white, and two near-white surface tones for footer chrome), seven typography tokens split across the two families (MINIBold at the single 64px display tier, MINISansReg at six chrome tiers from 14px to 18px), one radius value (50% circular, used on the scroll-to-top button and the wings logo container), nine spacing values built around fluid 15px and 50-140px ladders, and ten component definitions covering the photographic hero, the headline-over-photo treatment, the circular scroll button, the wings-logo lockup, the minimal nav link, and the typography-only footer. Feed this file to Claude or Cursor and the agent reproduces MINI's specific moves: full-bleed cinematic photograph as the page floor, single uppercase MINIBold serif headline floor-stamped over the photograph in white, the period-as-brand-mark typographic signature, the squared-everywhere-except-circles binary radius discipline, and the no-CTA-above-the-fold restraint. The token references resolve cleanly — `{colors.ink}` for black, `{colors.canvas}` for white, `{rounded.full}` for the circle, `{typography.display-xl}` for the headline tier — so the AI never has to invent a value. The one move worth borrowing only if your product is itself this photogenic: the willingness to ship zero CTAs above the fold and let the photograph do the entire job of brand assertion. MINI gets away with it because the cars are the brand and the photograph is the campaign. Most teams need a CTA. 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.mini.com" title: "MINI — official site" description: "MINI'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 MINI's primary brand color?" answer: "MINI's marketing system is functionally monochrome. The dominant chrome is true black ink on the off-white footer and the wings-logo strokework, plus true white for the headline floor-stamped over the warehouse photograph. Black renders 168 times on the captured page as text (82), border (82), and background (4); white renders 31 times. Two near-white tones (#f1f1f1 and #e5e5e5) handle background surface variation. There is no held-in-reserve brand accent in the chrome at all — MINI historically uses British Racing Green and Chili Red as model paint colors but neither renders as a CSS token on the marketing surface. The voltage, such as it is, comes from the photographic surfaces; the cars' paint colors do the chromatic work." - id: "typography" title: "What typefaces does MINI use, and what should I use as substitutes?" answer: "MINI runs two licensed families. MINIBold is a heavy slab-display serif used for the single hero headline at 64px in weight 400 uppercase — it never appears as running text or label, only as the editorial display headline. MINISansReg is the chrome workhorse — sans-serif at weight 400 (and one captured instance at weight 700), covering nav links, sub-headlines, footer chrome, and the small uppercase label inside the breadcrumb strip. There is no third family — no monospace, no second display, no italic. The closest open-source substitute for MINIBold is Antonio Bold or Oswald Bold at the same uppercase treatment; for MINISansReg use Inter or Söhne at weight 400. The preserved move is the period-after-every-headline editorial signature." - id: "headline-style" title: "Why does every MINI headline end in a period?" answer: "The period after every MINI headline (\"MINI JCW X DEUS EX MACHINA.\", \"THE NEW MINI FAMILY.\", \"Two worlds. Two cars. Singular enthusiasm.\") is a brand typographic signature, not stray punctuation. The convention runs across MINI's print campaigns, dealership signage, social posts, and every model-page hero on mini.com. It signals a confident, declarative voice — each statement reads as complete on its own rather than as a fragment leading into a CTA. The pattern reinforces the no-CTA-above-the-fold discipline; without a CTA to lead into, the headline needs to terminate confidently, and the period does that work. Reproducing the move means treating every editorial headline as a closed sentence rather than as a teaser fragment." - id: "no-cta-philosophy" title: "Why is there no primary CTA above the fold on MINI's homepage?" answer: "The above-fold hero on mini.com renders only the warehouse photograph, the MINI wings logo flush left in the nav, the single nav link \"THE NEW MINI FAMILY.\", the headline floor-stamped at the lower-left third, the small two-sentence sub-line, and a circular black scroll-to-top button anchored at the bottom-center of the viewport. There is no Configure, no Find a Dealer, no Build & Price, no Test Drive button above the fold. The CTAs live below the fold inside the model-detail panels. The decision reads as editorial restraint — the hero is positioned as a campaign image rather than as a conversion surface. The move only works if the audience is willing to scroll on photographic intrigue alone; for most automakers this would lose qualified leads, but MINI's brand equity carries the scroll." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own automotive 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 MINI's specific moves: full-bleed cinematic photograph as the page floor, single uppercase MINIBold serif headline floor-stamped over the photograph in white, the period-as-brand-mark typographic signature, the squared-everywhere-except-circles binary radius discipline, and the no-CTA-above-the-fold restraint. You can 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. The one caveat: the no-CTA hero only works if your brand carries enough recognition to convert scroll-through traffic on photograph alone. For most teams a primary pill button above the fold is the safer move." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" canvas: "#ffffff" surface-1: "#f1f1f1" surface-2: "#e5e5e5" typography: display-xl: fontFamily: "\"MINIBold\", Georgia, serif" fontSize: 64px fontWeight: 400 lineHeight: 64px letterSpacing: 0 body-lg: fontFamily: "\"MINISansReg\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "\"MINISansReg\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md-bold: fontFamily: "\"MINISansReg\", Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20px letterSpacing: 0 nav-link: fontFamily: "\"MINISansReg\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 16px letterSpacing: 0 label-caps: fontFamily: "\"MINISansReg\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px letterSpacing: 0 body-sm: fontFamily: "\"MINISansReg\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px letterSpacing: 0 rounded: none: "0px" full: "9999px" spacing: xs: "4px" sm: "10px" base: "15px" md: "16px" lg: "30px" xl: "32px" 2xl: "50px" 3xl: "56px" 4xl: "100px" 5xl: "140px" components: hero-section: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "100px 140px" hero-heading: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px" body-paragraph: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.body-lg}" body-paragraph-ink: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 32px" height: "72px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px 32px" wings-logo: backgroundColor: transparent textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "0" height: "72px" borderColor: "{colors.ink}" scroll-to-top: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" rounded: "{rounded.full}" padding: "0" height: "48px" footer-band: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "56px 140px" footer-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-caps}" padding: "0px 32px" --- ## Overview MINI's marketing page inverts the automotive-marketing convention of chrome above the fold. **Photograph as floor.** The above-fold hero on mini.com is a single cinematic warehouse shot — high-ceiling industrial interior, wet reflective concrete, two MINIs parked at off-axis angles — and the 64px MINIBold uppercase serif headline "MINI JCW X DEUS EX MACHINA." sits floor-stamped over the lower-left third in white. The wings logo sits flush left in the nav strip with a single uppercase nav link "THE NEW MINI FAMILY." beside it. There is no primary CTA above the fold at all. Where Volvo runs documentary photography surrounded by ink-on-white type chrome and Aston Martin runs a static country-selector splash with a single ENTER pill, MINI ships the photograph and the headline and trusts the brand to carry the rest. The chromatic discipline reinforces the move. The captured page renders true black `{colors.ink}` 168 times — 82 as text, 82 as border, 4 as background — and true white `{colors.canvas}` 31 times. Two near-white tones (`{colors.surface-1}` at #f1f1f1 and `{colors.surface-2}` at #e5e5e5) handle background surface variation inside the footer chrome. That is essentially the entire palette. There are no brand-accent CSS variables declared on the page — no Chili Red, no British Racing Green, no held-in-reserve voltage. The brand voltage, such as it is, comes from the cars themselves: the JCW rally build's red and cream livery and the electric build's olive and yellow paint do the chromatic work a brand accent would do elsewhere. Typography splits across two families. **MINIBold** is a heavy slab-display serif used for the single hero headline only at 64px in weight 400 uppercase — it never appears as running text or label. **MINISansReg** is the chrome workhorse — sans-serif at weight 400 (and one weight 700 instance) covering nav links, sub-headlines, footer chrome, and the small uppercase label inside the breadcrumb strip. The pairing — uppercase serif display plus utilitarian sans chrome — does not appear elsewhere in the directory. Where most automakers run a single sans family across every tier, MINI splits the labor, and the period-after-every-headline ("MINI JCW X DEUS EX MACHINA.", "THE NEW MINI FAMILY.") is the editorial typographic signature that ties both families together. **Key Characteristics:** - Photographic hero — full-bleed warehouse interior carries the entire above-fold surface; no overlay gradient, no decorative frame, no second band. - Two-family typographic split — MINIBold uppercase serif at 64px for the single hero headline, MINISansReg at 14-18px for every other surface. - Period as brand mark — every headline ends with a period, an editorial signature that runs across MINI's print and digital campaigns. - No primary CTA above the fold — only the wings logo, one nav link, the headline, a sub-line, and a circular scroll-to-top button. - Binary radius scale — every surface squared at zero, except the 50% circular scroll button and the circular wings-logo container. - Pure monochrome chrome — true black `{colors.ink}` and true white `{colors.canvas}` are the entire palette; the cars' paint colors carry the only chromatic load. - Fluid spacing — 15px is the dominant gap value (7 captured occurrences) with 50px to 140px outer-margin tokens for the wide editorial padding. - Typography-only footer — link-row chrome at 14px MINISansReg, no badges, no surface fill, no decorative chrome. ## Colors ### Structural - **Ink** (`{colors.ink}` — #000000): frequency 168. Used as text (82), border (82), background (4). The dominant chrome color — carries the nav logo strokework, every nav and footer link, the scroll-to-top circular button fill, and the footer-band background. True black, not a near-black graphite. - **Canvas** (`{colors.canvas}` — #ffffff): frequency 31 — used as background (9), text (11), border (11). The hero headline color floor-stamped over the photograph, the page floor below the photographic hero, and the body chrome on every text-only band. - **Surface-1** (`{colors.surface-1}` — #f1f1f1): a near-white background tone used as the footer-secondary surface fill. Single captured occurrence. - **Surface-2** (`{colors.surface-2}` — #e5e5e5): a slightly-deeper near-white used as the hairline-divider tone inside the footer-link strip. Single captured occurrence. There are no brand-accent CSS variables declared on the captured page. No Chili Red, no British Racing Green, no held-in-reserve cobalt — the palette is exactly four tokens, all near-monochrome. The discipline is closer to Patagonia's monochrome restraint than to a typical automotive brand chrome. ## Typography ### Font Families The system runs two licensed families. **MINIBold** is a heavy slab-display serif — uppercase, geometric, slab-terminal — used for the single hero headline only at 64px in weight 400. The fallback stack walks Georgia, serif. It never appears as running text or as a label. **MINISansReg** is the chrome workhorse — sans-serif at weight 400 (and one captured instance at weight 700) covering nav links, sub-headlines, footer chrome, and the small uppercase label inside the breadcrumb strip. The fallback stack walks Arial, sans-serif. The family does the labor of every typographic surface outside the single hero headline. There is no third family — no monospace, no italic, no second display tier. The two-family split is the entire typographic system. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 64px | 400 | 64px | Hero h2 ("MINI JCW X DEUS EX MACHINA.") — MINIBold uppercase | | `{typography.body-lg}` | 18px | 400 | 24px | Sub-headline beneath display ("Two worlds. Two cars. Singular enthusiasm.") | | `{typography.body-md}` | 16px | 400 | 24px | Default running text | | `{typography.body-md-bold}` | 16px | 700 | 20px | The single bold-emphasis tier inside body copy | | `{typography.body-sm}` | 16px | 400 | 20px | Headline accent (tight line-height variant) | | `{typography.nav-link}` | 16px | 400 | 16px | Top-nav link labels | | `{typography.label-caps}` | 14px | 400 | 18px | Uppercase label inside breadcrumb strip and footer chrome | ### Principles The single hero headline is the entire display tier. There is no h1 token, no h3 token, no editorial-spread heading. The discipline reflects MINI's decision to ship one editorial moment per page rather than a hierarchical heading ladder. The period after every headline (the period after "MACHINA." in the hero, the period after "FAMILY." in the nav link, the periods inside the sub-line "Two worlds. Two cars. Singular enthusiasm.") is the typographic signature that ties the two families together — each statement reads as complete on its own rather than as a fragment leading into a CTA. ### Note on Font Substitutes MINIBold and MINISansReg are licensed proprietary families. For MINIBold the closest open-source substitutes are **Antonio Bold** or **Oswald Bold** at the same uppercase treatment — both carry the slab-display geometry needed for the 64px hero scale. For MINISansReg, **Inter** or **Söhne** at weight 400 transfer cleanly at the 14-18px chrome sizes. The preserved move across substitutions is the period-after-every-headline editorial signature, which works with any display family. ## Layout ### Spacing System - **Base unit:** 15px — the dominant gap value with 7 captured occurrences. Atypical for an automotive system, which usually anchors on 8 or 16; MINI's 15px anchor reads as deliberately off-grid. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 10px · `{spacing.base}` 15px · `{spacing.md}` 16px · `{spacing.lg}` 30px · `{spacing.xl}` 32px · `{spacing.2xl}` 50px · `{spacing.3xl}` 56px · `{spacing.4xl}` 100px · `{spacing.5xl}` 140px. - **Section padding (vertical):** ~100px between the photographic hero and the footer band, with 56px x 140px on the outer editorial padding strip. - **Hero padding:** 50px x 50px x 100px inside the hero photograph frame, with the headline floor-stamped at the lower-left third — no centered alignment. - **Footer padding:** 56px x 140px outer, with 32px between footer link items. ### Grid & Container - **Max content width:** the page does not declare a max content width — the hero is true full-bleed and the footer band stretches edge-to-edge. The editorial chrome stays inside a 140px-margin frame on wide desktop. - **Hero:** full-bleed cinematic photograph, headline overlaid flush-left at the lower-left third. - **Below-fold sections:** a single black footer band stretches edge-to-edge with the wings logo centered and the footer-link row beneath at 32px gaps. - **No card grids, no two-column splits, no carousels** — the page is one photograph plus one footer plus the wings-logo lockup. ### Rhythm The page is single-band: one photographic hero, one black footer band, one wings-logo signature lockup. There is no editorial card-stack, no feature-row, no spec-table. The cadence is closer to a print-magazine cover than to a typical automotive marketing page — the rhythm depends entirely on the photograph carrying the visual weight and the headline landing at the lower-left third without competition. ## Elevation The system has essentially **no shadow tier**. The captured page renders zero shadow occurrences in any structural CSS — depth comes entirely from the photographic surface (the warehouse interior lighting carries its own depth via reflective concrete, overhead window-light pooling, and ambient haze) and from binary surface contrast (the ink-black footer band lifted against the white body floor below). - **Flat (no shadow):** every chrome surface — nav, footer, wings-logo container, scroll button — sits at zero elevation. - **Tonal lift:** the black footer band against the white body floor reads as the single elevation moment on the page, achieved by surface-color contrast alone. - **Photographic depth:** the warehouse lighting inside the hero shot does the depth work — the reflective floor doubling the cars, the overhead window pool, the deep recessed shadows behind the parked vehicles — without any drawn shadow in the chrome. ## Shapes The radius scale is **binary**: every surface squared at zero, except the circular elements. - `{rounded.none}` 0px — the structural default. Every nav band, every footer link, every hairline divider, every breadcrumb cell sits at zero. - `{rounded.full}` 9999px (rendered as 50% on square elements) — the scroll-to-top button at 48px square renders as a full circle; the wings-logo container at 72px square renders as a full circle behind the wings strokework. There is no rounded-but-not-circular tier. No 4px corner, no 8px card radius, no 12px button rounding. When softness happens, it happens only at the circular elements — the scroll button and the wings logo. Everything else is squared. ## Components **`hero-section`** — Full-bleed cinematic warehouse photograph, 100x140 padding on the inner content stack, no border-radius. The headline sits floor-stamped at the lower-left third in white over the photograph; the sub-line sits immediately beneath. **`hero-heading`** — White text on the photograph, MINIBold 64px / 400 uppercase. The single display tier on the page — confidence by typeface choice and scale. **`body-paragraph`** — White text on photograph at 18px / 400, used for the hero sub-line "Two worlds. Two cars. Singular enthusiasm." **`body-paragraph-ink`** — Ink text on white at 16px / 400, used for any below-photograph editorial body copy that appears on model-detail pages. **`top-nav`** — White `{colors.canvas}` surface, 72px height, no bottom border. The MINI wings logo sits flush left inside a circular 50% container at 72px square; the single nav link "THE NEW MINI FAMILY." sits beside it in MINISansReg 16px / 400 uppercase. No right-aligned cluster, no search, no account icon, no shopping cart. **`nav-link`** — Transparent background, ink text in MINISansReg 16px / 400, 0x32 padding. No hover background visible — the hover state is an underline. **`wings-logo`** — Transparent fill, ink strokework, 50% circular container, 72px height. The MINI wings emblem (a roundel with two stylized wings emerging from each side) renders inside the circular container with a 1px ink border. The logo appears twice on the captured page — once flush left in the nav and once centered above the footer-link strip. **`scroll-to-top`** — Ink-black `{colors.ink}` fill, white up-arrow icon, 50% circular container, 48px square. Anchored at the bottom-center of the viewport beneath the hero photograph as the only interactive element above the fold besides the nav link. **`footer-band`** — Ink-black `{colors.ink}` fill, white text, 56x140 padding, no border-radius. The black band stretches edge-to-edge beneath the photographic hero with no copy inside on the captured page — the band reads as breathing room between the hero and the footer-link strip. **`footer-link`** — Transparent background, ink text in MINISansReg 14px / 400 (Legal, Cookies, Imprint, Contact, REACH, EU Battery Regulation), 0x32 padding. Underlined by default — no hover state shift on the captured surface. ## Do's and Don'ts **Do** trust the cinematic photograph to carry the entire above-fold surface. The single defining move is the no-CTA-above-the-fold restraint — adding a "Build & Price" or "Find a Dealer" button to the hero would convert the editorial campaign image into a conversion surface and lose the brand's editorial register. **Do** end every headline with a period. "MINI JCW X DEUS EX MACHINA.", "THE NEW MINI FAMILY.", "Two worlds. Two cars. Singular enthusiasm." — the period-as-brand-mark is the typographic signature that ties the two families together and signals declarative confidence rather than teaser fragmentation. **Do** keep the MINIBold display tier reserved for the single hero headline. Multiplying the 64px uppercase serif across additional sub-headings dilutes the editorial moment and weakens the two-family split. **Do** use 50% radius (rendered as `{rounded.full}` 9999px) on the scroll-to-top button and the wings-logo container only. Multiplying the circle treatment across additional chrome elements softens the squared editorial discipline. **Don't** introduce a brand-accent color (Chili Red, British Racing Green, or any historical MINI paint hue) as a CSS chrome token. The marketing system is functionally monochrome — true black plus true white plus two near-white surface tones. Importing a red link color or a green emphasis fill creates a chromatic register that the photographic surfaces already carry. **Don't** add a rounded-card tier at 8 or 16 pixels. The system is binary — squared everywhere or full circle. Adding a soft-corner card style softens the squared editorial discipline and creates a third radius register the page does not need. **Don't** use MINISansReg at 64px or larger as a display substitute. The MINIBold uppercase serif is the defined display tier; running MINISansReg at display sizes would lose the slab-serif editorial signature and read as a chrome heading rather than as a campaign headline. **Don't** swap the hero photograph for a flat-color hero or a video carousel. The cinematic warehouse shot is the system — replacing it with a flat orange canvas or a continuously-playing video loop would lose the editorial print-magazine register that the photograph plus the floor-stamped headline together create. ## Known Gaps - **Hover and focus states:** the captured marketing page exposes the resting state of the nav link and the footer links only; the full state matrix (focus rings, active press, disabled tints) lives inside the configurator and model-detail pages and is not represented here. - **Form input states:** no input components render on the captured page. The build-quote forms, the dealer-locator search, and the test-drive booking carry their own input chrome inside the configurator and are not exposed on the marketing surface. - **Primary CTA button:** the captured marketing page has no primary CTA above the fold; the configurator-level pill button is not exposed here. Build CTAs render on model-detail pages with a typically squared rectangular treatment. - **Dark mode:** the captured marketing surface is light-only outside the photograph; no dark-mode variant exists on the public marketing pages. - **Configurator chrome:** this DESIGN.md captures the home page only. The build-your-MINI configurator (`build.mini.com`) carries a richer token system — swatch chips, accessory cards, financing tables, side-by-side spec comparators — that is not represented here. - **Model-detail pages:** the JCW, Cooper, Countryman, and Aceman product pages each carry additional component chrome — spec cards, configurator entry points, dealer-locator forms — not represented in this file. - **Motion:** the hero photograph crops dynamically on scroll and the scroll-to-top button animates on hover, but the spec captures end-state values only. Easing curves and the scroll-parallax stagger are not exposed. - **Brand-accent color tokens:** MINI uses Chili Red and British Racing Green as historical paint colors but neither is declared as a CSS variable on the marketing surface; these would need to be added as separate tokens if used in chrome.