MINI Design System

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

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.