BMW M

Difficulty:
Industry
BMW M Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

BMW M is BMW's motorsport sub-brand, and its interface is a cockpit view: a near-pure black canvas with white type, the M tricolor (light blue, dark blue, red) appearing only as 4px brand stripes, wordmark accents, and motorsport chrome — never on buttons or fills. Photography runs edge-to-edge with cars as the eternal subject while UI retreats to small white labels, and buttons stay flat, 0px-cornered, and uppercase.

AutomotiveEditorial

Prompt Template

Base Template
Design a BMW M-inspired interface. - Near-pure black canvas ({colors.canvas} — #000) with white type across the analyzed editorial and marketing pages. Configurator, account, checkout, and order-management flows are unresolved and may introduce light surfaces.; - Display headlines use UPPERCASE BMW Type Next Latin Light when following the BMW family system. Heavier uppercase settings are reserved for labels, buttons, card titles, and observed M-specific emphasis.; - M tricolor ({colors.m-blue-light} / {colors.m-blue-dark} / {colors.m-red}) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills.; - Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.; - Buttons are flat with 0px corners and uppercase letterspaced labels. The "industrial precision" rectangular silhouette IS the brand..  Typography: (#ffffff):.

Variant Prompts

📱 Mobile
Design a mobile app with BMW M aesthetics. Clean, touch-friendly, native feel.
💻 Web
Design a web application with BMW M style. Professional, responsive layout.
📊 Dashboard
Design a dashboard with BMW M design language. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with BMW M visual identity. Compelling, conversion-focused.

Usage Examples

BMW M App

Web
Build a web app with BMW M design language and brand color system.

BMW M Dashboard

Dashboard
Create a dashboard using BMW M style with data visualization and (#ffffff): typography.

✅ Best For

  • Automotive
  • Motorsport and performance pages
  • Dark athletic interfaces

❌ Avoid For

  • Gentle home products
  • Bright education interfaces

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download