--- version: alpha name: MINI description: Playful British motoring made digital — crisp black-on-white canvas, MINI Serif uppercase display set in tight blocks, a single energetic petrol-teal accent, pill-shaped outline buttons, and the circular roundel motif echoed everywhere. colors: # Surface / canvas background: "#ffffff" surface: "#ffffff" surface-inverse: "#000000" # Ink / text ink: "#000000" ink-inverse: "#ffffff" ink-muted: "#525252" ink-disabled: "#595959" # was rgb(146,146,146) — darkened for AA contrast on light-grey disabled fill on-background: "#000000" on-surface: "#000000" on-inverse: "#ffffff" # Brand accent — MINI petrol / energetic teal primary: "#006583" on-primary: "#ffffff" primary-hover: "#017ea4" primary-pressed: "#017396" # was rgb(1,115,150) — CTA hover delta # Links link: "#000000" link-hover: "#006d8e" # was rgb(0,133,172) #0085ac — darkened to pass WCAG AA on white # Borders / dividers border: "#000000" border-muted: "#f5f5f5" # Overlay scrim (region/cookie modal backdrop) scrim: "#525252" # was rgba(82,82,82,0.573) — flattened scrim tone typography: display-hero: fontFamily: "MINI Serif, MINISerif, Georgia, Times New Roman, serif" fontSize: 64px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px display: fontFamily: "MINI Serif, MINISerif, Georgia, Times New Roman, serif" fontSize: 50px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px heading-section: fontFamily: "MINI Serif, MINISerif, Georgia, Times New Roman, serif" fontSize: 32px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px heading-sub: fontFamily: "MINI Serif, MINISerif, Georgia, Times New Roman, serif" fontSize: 24px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0px body-large: fontFamily: "MINI Sans, MINISansReg, Arial, Helvetica, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0px body: fontFamily: "MINI Sans, MINISansReg, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "MINI Sans, MINISansReg, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px button-ui: fontFamily: "MINI Sans, MINISansReg, Arial, Helvetica, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px label: fontFamily: "MINI Sans, MINISansReg, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0.5px caption: fontFamily: "MINI Sans, MINISansReg, Arial, Helvetica, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0px spacing: micro: 1px xs: 4px sm: 8px md: 16px lg: 20px xl: 24px 2xl: 40px 3xl: 56px 4xl: 60px 5xl: 120px rounded: none: 0px pill: 9999px circle: 9999px # square element + max radius = perfect circle (icon buttons) components: # Top navigation — white surface, thin black underline nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 20px 32px nav-link: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 8px 16px nav-link-hover: backgroundColor: "{colors.background}" textColor: "{colors.link-hover}" # Primary CTA — petrol-teal fill, pill shape button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 16px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-primary-active: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" # Secondary CTA — outlined pill, transparent fill button-outline: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 16px 24px button-outline-hover: backgroundColor: "{colors.background}" textColor: "{colors.ink-muted}" borderColor: "{colors.ink-muted}" # Inverse CTA — black fill on light, for dark moments button-inverse: backgroundColor: "{colors.surface-inverse}" textColor: "{colors.on-inverse}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 16px 24px # Disabled CTA button-disabled: backgroundColor: "{colors.border-muted}" textColor: "{colors.ink-disabled}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 16px 24px # Circular icon button — the roundel echo icon-button: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.circle}" padding: 8px # Card card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 40px card-inverse: backgroundColor: "{colors.surface-inverse}" textColor: "{colors.ink-inverse}" rounded: "{rounded.none}" padding: 40px # Form input — black underline / outline input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 16px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.primary}" # Text link — underlined, teal on hover link: backgroundColor: "{colors.background}" textColor: "{colors.link}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 0px link-hover: backgroundColor: "{colors.background}" textColor: "{colors.link-hover}" # Sticky bottom bar — the system's only shadow sticky-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 16px 32px # Hero section — full-bleed product photography hero-section: backgroundColor: "{colors.surface-inverse}" textColor: "{colors.on-inverse}" typography: "{typography.display-hero}" rounded: "{rounded.none}" padding: 120px 32px # Region/cookie scrim backdrop scrim-overlay: backgroundColor: "{colors.scrim}" textColor: "{colors.ink-inverse}" rounded: "{rounded.none}" padding: 0px # Modal / region gate — flat panel over a scrim backdrop modal: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 40px # Eyebrow / label tag label-tag: backgroundColor: "{colors.background}" textColor: "{colors.ink-muted}" typography: "{typography.label}" rounded: "{rounded.none}" padding: 4px 0px --- # MINI Design System ## Overview MINI's website is the digital expression of a brand that has spent six decades turning a small car into a big personality. The mini.com canvas is uncompromisingly crisp: pure white (`{colors.background}`) and pure black (`{colors.ink}`) carry almost everything, with full-bleed product photography supplying the colour and a single petrol-teal accent (`{colors.primary}`) reserved for the moments that matter. Where its parent BMW whispers German precision through light-weight grotesks, MINI shouts British wit through a bold serif set in tight uppercase blocks — the typographic equivalent of a go-kart grin. The defining gesture is the pairing of a **proprietary serif display face with a clean sans body**. Headlines like "MINI MACHINES" are set in MINI Serif (`{typography.display-hero}`) — a chunky, confident slab-adjacent serif rendered in solid uppercase with a line-height crushed to 1.0, so titles read as stacked graphic bricks rather than airy editorial lines. Body and UI copy switch to MINI Sans (`{typography.body}`), a humanist grotesk that keeps the interface legible and friendly. The contrast between a characterful serif voice and a neutral sans utility layer is the system's signature tension: personality up top, clarity underneath. What separates MINI from every other automotive site is the **circular roundel motif** that radiates from the logo into the interface. The MINI wings-and-roundel mark sits top-left at all times, and its circle reappears as fully-round icon buttons (`{components.icon-button}`) and as the pill geometry of every CTA (`{components.button-primary}`) — a 56px+ radius that makes buttons read as elongated lozenges, never rectangles. Outline buttons with a 2px black stroke (`{components.button-outline}`) and the petrol-teal fill of the primary CTA give the chrome its only two voices. The result is energetic, tactile, and unmistakably playful — a premium brand that refuses to be solemn. **Key Characteristics:** - Black-on-white canvas (`{colors.ink}` on `{colors.background}`) — product photography supplies all the colour - MINI Serif (`{typography.display-hero}`) bold uppercase for display — characterful, chunky, line-height 1.0 - MINI Sans (`{typography.body}`) humanist grotesk for body and UI — friendly and legible - Single petrol-teal accent (`{colors.primary}`) for primary CTAs only — never decorative - Pill-shaped buttons (`{rounded.pill}`) — the roundel motif stretched into a lozenge - 2px solid black outline buttons (`{components.button-outline}`) as the secondary voice - Fully-circular icon buttons (`{rounded.circle}`) echoing the MINI roundel - Underlined text links (`{components.link}`) that shift to teal (`{colors.link-hover}`) on hover - Zero corner radius on cards and panels (`{rounded.none}`) — sharp frames around soft pills - Tight display line-heights (1.0) — headlines stack as solid blocks ## Colors ### Surface - **Pure White** (`{colors.background}`): Default page canvas and card surface. The negative space the brand lives on; `themeColor` in the web manifest is `#ffffff`. - **Pure Black** (`{colors.surface-inverse}`): Inverse surfaces — dark hero sections, footer, full-bleed photography overlays, and the inverse CTA. ### Ink - **Pure Black** (`{colors.ink}`): All body text, headlines on white, nav links, outline-button stroke, input borders. The dominant ink (199 occurrences in extraction). - **White** (`{colors.ink-inverse}`): Text on black surfaces and inside the petrol CTA. - **Mid Grey** (`{colors.ink-muted}`): Secondary copy, captions, outline-button hover text. - **Disabled Grey** (`{colors.ink-disabled}`): Disabled / dimmed control text — flattened from the modal "Stay on this page" hover delta. ### Brand Accent - **MINI Petrol** (`{colors.primary}`): The signature energetic teal. Used for primary CTAs and active/interactive moments only — the one chromatic note in an otherwise monochrome chrome. - **Petrol Hover** (`{colors.primary-hover}`): Hover brightening on the petrol CTA. - **Petrol Pressed** (`{colors.primary-pressed}`): The measured hover/press delta on the "Take me there" CTA. - **On Petrol** (`{colors.on-primary}`): White text on the petrol fill. ### Links - **Link Black** (`{colors.link}`): Default underlined text-link colour — links read as black underlined text inline. - **Link Teal** (`{colors.link-hover}`): Hover state — links brighten to a lighter teal than the CTA petrol. ### Borders & Overlay - **Black Border** (`{colors.border}`): 2px solid strokes on outline buttons and inputs; 1px nav underline. - **Hairline Grey** (`{colors.border-muted}`): Faint dividers between content rows. - **Scrim** (`{colors.scrim}`): Modal backdrop tone — flattened from `rgba(82,82,82,0.573)` (the YAML inline comment records the original). ## Typography ### Font Families - **Display / Headings**: `MINI Serif` (self-hosted `MINISerif-Regular`, `MINISerif-Bold`, `MINISerif-Italic`), fallbacks: `Georgia, "Times New Roman", serif`. A chunky proprietary serif used almost exclusively in uppercase. - **Body / UI**: `MINI Sans` (self-hosted `MINISansSerif-Regular`, `MINISansSerif-Bold`), fallbacks: `Arial, Helvetica, sans-serif`. A humanist grotesk for everything functional. - **OpenType Features**: `calt`, `kern`, `liga` enabled across the system for contextual alternates, kerning, and standard ligatures. > *MINI Serif and MINI Sans are proprietary BMW Group typefaces. For external implementations, a chunky slab/transitional serif such as `Bitter`, `Roboto Slab`, or `Zilla Slab` approximates the display voice; `Roboto`, `Inter`, or `Arial` substitute for the sans body. The closest single Google-Fonts pairing is `Bitter` (display) over `Roboto` (body).* ### Hierarchy The complete type scale lives in the `typography:` token block above. Use those tokens directly via reference rather than restating values. | Token | Use | |---|---| | `display-hero` | Hero billboards — "MINI MACHINES" style uppercase serif at 64px weight 700 | | `display` | Large serif statements, campaign sub-heroes (50px) | | `heading-section` | Section titles, uppercase serif (32px) | | `heading-sub` | Card titles, feature heads (24px) | | `body-large` | Intro paragraphs, emphasised body (18px sans) | | `body` | Standard reading copy (16px sans) | | `nav-link` | Top-navigation items (16px sans) | | `button-ui` | CTA labels (18px sans) | | `label` | Eyebrows, uppercase meta labels (14px, slight tracking) | | `caption` | Fine print, legal copy (13px) | ### Principles - **Serif shouts, sans serves**: Display type is always MINI Serif; body and UI are always MINI Sans. The voice/utility split is absolute — never set a paragraph in the serif or a hero in the sans. - **Uppercase display, mixed-case body**: Hero and section headings run uppercase for graphic impact; body copy stays mixed-case for readability. - **Crushed display line-height**: Headlines run at line-height 1.0 so multi-line titles stack as solid blocks — the "MINI MACHINES" billboard effect. - **Near-zero tracking**: The serif sets at normal tracking; only small uppercase labels (`{typography.label}`) get a touch of positive letter-spacing for legibility. - **One weight per face that matters**: Display leans on weight 700 (MINI Bold); body sits at 400 (MINI Regular). No mid-weight clutter. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. The dominant rhythm is an 8px-derived scale with heavy use of 16px and 20px for component-internal spacing and 40–120px for section breaks. MINI's spacing is generous at the section level (`{spacing.5xl}` = 120px between major bands) and disciplined at the component level (16–24px). The result feels like a well-organised showroom: lots of air around each "exhibit," tight order inside it. ### Grid & Container - Full-bleed hero photography edge-to-edge - Centred content sections with comfortable side margins (32px gutters) - Footer: multi-column link grid on white - Breakpoint ladder: 1920 → 1280 → 1024 → 992 → 925 → 768 → 480 → 375px ### Whitespace Philosophy - **Showroom air**: Large 60–120px section gaps let each campaign band breathe like a spotlit car on a stand. - **Tight component interiors**: Inside cards and buttons, padding stays at 16–24px — order within generosity. - **Photography as the loud element**: White space and black type stay calm so the product imagery carries the visual energy. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Page canvas, content sections, cards at rest | | Photographic (Level 1) | Full-bleed imagery | Hero backgrounds — depth via the photo, not a shadow | | Drawer / Sticky bar | `0 -1px 8px rgba(0,0,0,0.5)` | Sticky bottom bars and slide-in panels | | Modal (Level 4) | Flat panel over `{colors.scrim}` backdrop | Region gate, cookie notice | | Focus Ring | 2px `{colors.primary}` outline | Keyboard focus on inputs and interactive elements | **Shadow Philosophy**: MINI is almost entirely flat. The only shadow in the system is a soft upward cast on sticky bars (`0 -1px 8px rgba(0,0,0,0.5)`); everything else relies on the stark black/white contrast and full-bleed photography to create depth. Elevation is implied by colour inversion (black panels on white) far more than by drop shadows. ## Shapes The complete radius scale lives in the `rounded:` token block above. MINI runs a deliberately **bimodal** radius system: sharp-zero for containers, fully-round for controls. | Token | Value | Use | |---|---|---| | `none` | 0px | Cards, panels, modals, inputs, images — every rectangular frame | | `pill` | 9999px | Every button — the 56px+ measured radius reads as a full lozenge | | `circle` | 50% | Icon buttons (close, menu) — the literal roundel echo | The tension is intentional: hard-edged rectangular frames hold soft, fully-rounded controls. The pill and circle carry the brand's circular roundel DNA; the zero-radius frames keep the layout architectural. There is no mid-range radius (4–16px) anywhere — the system is binary, never softly-rounded. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button variants - **`button-primary`** — Petrol-teal (`{colors.primary}`) fill, white label, pill shape. The single accented CTA; brightens to `{colors.primary-hover}` on hover, deepens to `{colors.primary-pressed}` on press. - **`button-outline`** — Transparent fill, 2px solid black stroke, pill shape. The secondary voice ("Stay on this page"); stroke and text dim to `{colors.ink-muted}` on hover. - **`button-inverse`** — Black fill, white label, pill shape. For CTAs sitting on white where extra weight is wanted. - **`icon-button`** — Fully circular (`{rounded.circle}`), white background, black glyph. Close / menu controls — the roundel echo. ### Cards - **`card`** — White surface, zero radius, 40px padding. Sharp rectangular frame. - **`card-inverse`** — Black surface, white text, for dark feature bands. ### Inputs - **`input`** — White field, 2px black border, zero radius, 16px padding. On focus the border switches to petrol (`{components.input-focus}`). ### Links - **`link`** — Inline underlined black text; shifts to teal (`{colors.link-hover}`) on hover. MINI links stay underlined at rest, unusual for an automotive site. ### Navigation - **`nav-bar`** — White background, black MINI Sans links, anchored MINI roundel logo top-left, thin 1px black underline separating nav from content. Links brighten to teal on hover. ### Hero - **`hero-section`** — Full-bleed product photography (often on a black base), MINI Serif uppercase display laid over it in white. ## Do's and Don'ts ### Do - Keep the canvas pure black-on-white (`{colors.ink}` on `{colors.background}`) — let photography supply the colour - Set all display type in MINI Serif (`{typography.display-hero}`) uppercase at weight 700, line-height 1.0 - Set all body and UI copy in MINI Sans (`{typography.body}`) — the serif never carries paragraphs - Use petrol-teal (`{colors.primary}`) only for the primary CTA and interactive accents — keep it rare - Make every button a pill (`{rounded.pill}`) — buttons are never rectangles - Use the 2px black outline pill (`{components.button-outline}`) as the standard secondary action - Echo the roundel with fully-circular icon buttons (`{rounded.circle}`) - Keep cards, panels, and inputs sharp-cornered (`{rounded.none}`) — frames stay architectural - Keep text links underlined and let them brighten to teal (`{colors.link-hover}`) on hover - Reserve large 60–120px gaps for section breaks (`{spacing.4xl}`, `{spacing.5xl}`) — showroom air ### Don't - Don't set body copy in MINI Serif or headlines in MINI Sans — the voice/utility split is absolute - Don't add a second accent colour — petrol-teal (`{colors.primary}`) is the only chromatic note in the chrome - Don't give buttons a mid-range radius — they are pills (`{rounded.pill}`), full stop - Don't round card or panel corners — rectangular frames stay at `{rounded.none}` - Don't relax display line-height — headlines stack tight at 1.0 to read as blocks - Don't use petrol-teal for large backgrounds or decoration — it's an accent, not a surface - Don't drop the underline from text links — underlined links are part of MINI's UI voice - Don't introduce drop shadows on cards — the system is flat; depth comes from contrast and photography - Don't recolour or detach the MINI roundel logo from its top-left anchor --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Minimum supported; single column, hamburger nav | | Mobile | 375–479px | Single column, hero serif scales down, stacked CTAs | | Mobile Large | 480–767px | Slight padding increases, 2-up tiles begin | | Tablet | 768–991px | 2-column content, full nav re-appears around 925px | | Desktop Small | 992–1199px | Desktop layout, multi-column footer | | Desktop | 1200–1279px | Standard desktop, full mega-nav | | Large Desktop | 1280–1919px | Expanded gutters, capped content width | | Ultra-wide | ≥1920px | Maximum layout, additional flanking whitespace | ### Touch Targets - CTAs: pill buttons stay at min 44px tap height on mobile (16px+ vertical padding) - Icon buttons: circular, min 40px diameter with hit-area buffer - Nav links: spacious tap zones in the mobile drawer ### Collapsing Strategy - **Nav**: horizontal nav collapses to a hamburger drawer below ~925px; MINI roundel stays anchored top-left - **Hero**: full-bleed photography maintained at all sizes; serif display scales 64 → 40 → 32px, staying uppercase - **Content**: multi-column bands stack vertically; section gaps compress from 120px to 40–60px - **Footer**: multi-column link grid collapses to stacked accordions ### Image Behavior - Product photography stays full-bleed at every breakpoint, recentring on the vehicle - Serif overlays reflow but never lose the uppercase block treatment --- ## Agent Prompt Guide ### Quick Color Reference - Background: Pure White (`{colors.background}`) - Text: Pure Black (`{colors.ink}`) - Secondary text: Mid Grey (`{colors.ink-muted}`) - Brand accent / CTA: MINI Petrol (`{colors.primary}`) - CTA hover: Petrol Hover (`{colors.primary-hover}`) - Link hover: Link Teal (`{colors.link-hover}`) - Border: Pure Black (`{colors.border}`) - Inverse surface: Pure Black (`{colors.surface-inverse}`) ### Example Component Prompts - "Create a MINI hero: full-bleed product photo on a black base (`{colors.surface-inverse}`). Headline in MINI Serif (`{typography.display-hero}`) 64px weight 700, uppercase, line-height 1.0, white text. Below it a petrol pill CTA — `{colors.primary}` fill, white label in MINI Sans (`{typography.button-ui}`), `{rounded.pill}` radius, 16px 24px padding; hover to `{colors.primary-hover}`." - "Design a MINI secondary button: transparent fill, 2px solid `{colors.border}` stroke, `{rounded.pill}` radius, MINI Sans 18px label in `{colors.ink}`, 16px 24px padding. On hover dim stroke and text to `{colors.ink-muted}` (`{components.button-outline-hover}`)." - "Build a MINI content card: white surface (`{colors.surface}`), zero radius (`{rounded.none}`), 40px padding. Title in MINI Serif (`{typography.heading-sub}`) uppercase weight 700, body in MINI Sans (`{typography.body}`) 16px line-height 1.5, `{colors.ink}` text. No shadow — flat frame." - "Create MINI navigation: white bar (`{colors.background}`), MINI roundel logo anchored top-left, links in MINI Sans (`{typography.nav-link}`) 16px black, thin 1px black underline below the bar. Links brighten to `{colors.link-hover}` on hover." - "Make a MINI text input: white field, 2px solid `{colors.border}` border, `{rounded.none}` radius, MINI Sans 16px (`{typography.body}`) `{colors.ink}` text, 16px padding. On focus switch the border to `{colors.primary}` (`{components.input-focus}`)." - "Design a circular MINI icon button: white background (`{colors.background}`), black glyph, `{rounded.circle}` radius, 8px padding — echoing the MINI roundel." ### Iteration Guide 1. Start with the black-on-white canvas (`{colors.ink}` on `{colors.background}`) — photography supplies the colour. 2. MINI Serif (`{typography.display-hero}`) uppercase weight 700 at line-height 1.0 for all display; MINI Sans for everything else. 3. Petrol-teal (`{colors.primary}`) is the only accent — primary CTA and interactive states only, never decoration. 4. Every button is a pill (`{rounded.pill}`); icon buttons are circles (`{rounded.circle}`); frames are sharp (`{rounded.none}`). 5. Secondary actions use the 2px black outline pill (`{components.button-outline}`). 6. Keep text links underlined; they brighten to teal (`{colors.link-hover}`) on hover. 7. Stay flat — depth comes from black/white inversion and full-bleed photography, not shadows. 8. Reserve 60–120px gaps for section breaks; keep component interiors tight at 16–24px. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by MINI. Brand names and trademarks belong to their respective owners.