What is MINI's primary brand color?

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.

What typefaces does MINI use, and what should I use as substitutes?

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.

Why does every MINI headline end in a period?

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.

Why is there no primary CTA above the fold on MINI's homepage?

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.

MINI Design System

MINI's marketing system as a DESIGN.md file.

About MINI DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source mini.com

Automotive

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.

What makes it distinct

Photograph as floorevery 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 splitMINIBold (slab-display serif) carries the single hero headline at 64px, MINISansReg carries every nav, label, and footer link at 14-16px
Period as brand markevery 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 scaleevery surface is squared except a single 50% circular scroll-to-top button and the circular wings logo treatment
Pure monochrome chrometrue black ink and true white headline-over-photo are the entire palette; the only color on the page belongs to the cars themselves

Live at mini.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

mini.com

Explore MINI

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.