CURATED · OPEN · FREE

Bmw M

A premium automotive brand experience showcasing high-performance vehicles and lifestyle.

ProductHardwareClean

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://www.bmw-m.com

📦 Browse pack contents →

Identity DNA

automotiveperformancepremiumluxuryracing

A high-end automotive magazine meets a luxury product showroom.

Color

#1c69d4Accent

#ffffffInk

#262626BG

#bbbbbbMuted

rgba(186, 186, 186, 0.2)Line

Dark, dramatic background to let vehicle photography dominate; high-contrast white text for clarity; brand blue for primary actions.

Typography

grotesque-sans

display60px · 900
heading24px · 400
body16px · 400

Headlines are often all-caps for emphasis. · Body text maintains a consistent 16px size across the interface. · High contrast (white on dark) is used throughout for maximum legibility.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Spacious layout with significant padding around major content blocks to let imagery breathe.

Surfaces

sm · 4px

md · 8px

lg · 24px

pill · 999px

Subtle, thin white borders used sparingly for separation.

rgba(0, 0, 0, 0.3) 0px 1px 5px 0px · rgba(0, 0, 0, 0.5) 0px 4px 25px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero sections with split layouts for text and imagery, followed by grid-based content cards.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.8, 0, 0.2, 1)easing

Smooth transforms for hover states and interactions. · Long-duration transforms for subtle background or image movements.

Subtle color or transform changes on interactive elements. · Immediate visual feedback through color shifts.

Components

button Solid blue rectangular button with white text for primary calls to action.
card Image-heavy cards with minimal text overlays for content browsing.
input Simple text input with bottom border for search functionality.
hero Large, dramatic split layout featuring a full-height image and bold headline text on a dark background.

Voice & Don'ts

Tone Confident, aspirational, and premium.
Headlines Bold, direct, and often all-caps to convey power and excitement.
CTAs Simple, action-oriented, and high-contrast.

Don't use light backgrounds — the screenshot shows a consistent dark theme throughout.
Don't use decorative or handwritten fonts — the screenshot shows a clean, modern sans-serif font.
Don't use rounded corners on primary buttons — the screenshot shows sharp, rectangular buttons.
Don't use a wide variety of accent colors — the screenshot shows a single, dominant brand blue.
Don't use complex grids with many columns — the screenshot shows a simple, focused layout.
Don't use small, cramped text — the screenshot shows generous spacing and clear typography.
Avoid: Playful language
Avoid: Excessive punctuation
Avoid: Low-contrast text

Inside the pack — real screenshots

Bmw M — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a premium automotive brand website focusing on high-performance vehicles. The design uses a dark charcoal background (#262626) to let dramatic vehicle photography dominate, with white text (#ffffff) for high contrast and a brand blue (#1c69d4) for primary actions. Typography is a modern, clean sans-serif (BMW Type Next) used in various weights, with bold, all-caps headlines for impact. Key donts: avoid light backgrounds, avoid decorative fonts, and avoid rounded corners on primary buttons. The layout is spacious and editorial, prioritizing large imagery and clear, aspirational messaging.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko