BMW M

---
version: alpha
name: "BMW M"
description: "BMW M 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
BMW M 的 marketing surface 是 near-pure black canvas（`{colors.canvas}` — #000），承载 white BMW Type Next Latin headline，并使用 **confident UPPERCASE**。系统本身没有 decorative voltage；brand energy 来自 **full-bleed automotive photography**：高速过弯的车辆、carbon-fiber wheel detail、driver cockpit shot、motorsport pit lane，全部作为 edge-to-edge content 填满整个 band。Photography 周围的 UI chrome 保持极简：thin sans-serif copy、1px hairline divider（`{colors.hairline}`）、all-caps button label，在 hover 前不填充。

**M tricolor stripe**：`{colors.m-blue-light}` (#0066b1) → `{colors.m-blue-dark}` (#1c69d4) → `{colors.m-red}` (#e22718)，作为品牌 signature accent 克制出现，用于 M wordmark、motorsport chrome、vehicle-tech callout 和 model badge。它绝不是 CTA color，也不作为 background fill；tricolor 只是一种 brand-identity marker。

Type voice 使用 **BMW Type Next Latin** 的两种 cut：regular 用于 display + nav label，Light 用于 body + secondary copy。Display size 使用 weight 700（BMW 标志性的 heavy-but-tight setting），body type 降到 weight 300（Light）。Heavy display 与 light body 的对比就是系统的 editorial signature。

**Key Characteristics:**
- Near-pure black canvas（`{colors.canvas}` — #000）搭配 white type。系统几乎不反转；没有 light-mode marketing surface。
- Display headline 使用 UPPERCASE BMW Type Next Latin，weight 700。Sub-head 保持 sentence-case 和更轻 weight。
- M tricolor（`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`）用作 4px brand-stripe divider、M-wordmark accent 和 motorsport chrome，绝不作为 button 或 fill。
- Photography edge-to-edge 填满整个 band。车始终是视觉主体；UI chrome 退到叠在 photography 上的小 white label。
- Button 是 flat 的 `{rounded.none}` (0px) corner，并使用 uppercase letterspaced label。"Industrial precision" 的 rectangular silhouette 本身就是品牌。
- 系统大多数 border radius 为 zero。少数例外：circular icon button（carousel arrow、chatbot launcher）使用 `{rounded.full}`，少数 small toggle pill 使用 `{rounded.sm}`。
- Spacing 宽松且 grid-aligned：major band 之间 `{spacing.section}` (96px)；hero photo band 内部 `{spacing.xxl}` (64px)；content card 内部 `{spacing.xl}` (40px)。

## Colors

### Brand & Accent
- **Primary** (`{colors.primary}` — #ffffff): 系统 primary type 和 CTA color。用于 h1/h2/h3 display、dark 上的 body text 和 primary button label（button 本身 transparent 或 canvas-colored；white text + outline 就是 button）。
- **M Blue Light** (`{colors.m-blue-light}` — #0066b1): M tricolor stripe 的第一段。用于 M-badge accent 和 motorsport chrome。
- **M Blue Dark** (`{colors.m-blue-dark}` — #1c69d4): 中间段。与 `{colors.bmw-blue}` 同 hex，即 BMW heritage corporate blue，被重新用作 M stripe 的中间 band。
- **M Red** (`{colors.m-red}` — #e22718): 第三段。Signature M-power red，用于 stripe 和 motorsport-pace callout。
- **Electric Blue** (`{colors.electric-blue}` — #0653b6): 单独的 electric-vehicle accent，用于 M xDrive electric model page。区别于 heritage blue，感觉更冷、更 digital。

### Surface
- **Canvas** (`{colors.canvas}` — #000000): 每个 marketing surface 的默认 page floor。True black。
- **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): 几乎与黑色无差，用于 spec table cell 和 footer-adjacent strip。
- **Surface Card** (`{colors.surface-card}` — #1a1a1a): Card、secondary button、icon-button background。
- **Surface Elevated** (`{colors.surface-elevated}` — #262626): 更亮一步，用于 dark band 内的 nested card。
- **Carbon Gray** (`{colors.carbon-gray}` — #2b2b2b): Carbon-fiber-inspired surface tone，用于 technical-spec card。

### Hairlines & Borders
- **Hairline** (`{colors.hairline}` — #3c3c3c): The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines.
- **Hairline Strong** (`{colors.hairline-strong}` — #262626): Same hex as `{colors.surface-elevated}` — borders feel like one-step elevations rather than ink lines.

### Text
- **Ink / On Dark** (`{colors.on-dark}` — #ffffff): Dark canvas 上的所有 headline 和 primary text。
- **Body** (`{colors.body}` — #bbbbbb): Default running-text color（比 pure white 略冷）。用于 body paragraph 和 secondary metadata。
- **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized body / lead paragraph。
- **Muted** (`{colors.muted}` — #7e7e7e): Footer link、breadcrumb、caption。

### Semantic Colors
- **Warning** (`{colors.warning}` — #f4b400): Used very sparingly on technical-warning callouts.
- **Success** (`{colors.success}` — #0fa336): Order-confirmation states (rare on marketing surfaces).

## Typography

### Font Family
**BMW Type Next Latin** 是 BMW 授权的 display + body typeface。系统使用两个 cut：regular 和 Light。Fallback stack 使用 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`。

这个分工是刻意的 weight-pair：
- Display (700) 用于 headline、navigation label、button text 和 category label，形成 "stamped" voice。
- Light (300) 用于 body paragraph、descriptive copy 和 secondary metadata，形成 "engineered" voice。

Heavy display 与 light body 的 contrast 是 BMW 的 editorial signature；不要用 regular (400) display 或 medium (500) body 抹平它。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 80px | 700 | 1.0 | 0 | Hero h1（"THE ULTIMATE"、"MORE BMW M."） |
| `{typography.display-lg}` | 56px | 700 | 1.05 | 0 | Section head（"MORE FROM BMW M MAGAZINE."） |
| `{typography.display-md}` | 40px | 700 | 1.1 | 0 | Sub-section head、model name |
| `{typography.display-sm}` | 32px | 700 | 1.15 | 0 | CTA-band head、category page title |
| `{typography.title-lg}` | 24px | 700 | 1.3 | 0 | 3-up grid 中的 card title |
| `{typography.title-md}` | 20px | 400 | 1.4 | 0 | Card sub-title、lead paragraph |
| `{typography.title-sm}` | 18px | 400 | 1.4 | 0 | Spec callout、intro paragraph |
| `{typography.label-uppercase}` | 14px | 700 | 1.3 | 1.5px | Category tab、"VIEW MORE" inline label |
| `{typography.body-md}` | 16px | 300 (Light) | 1.5 | 0 | Default body：BMW Type Next Latin Light |
| `{typography.body-sm}` | 14px | 300 (Light) | 1.5 | 0 | Footer body、cookie consent、fine print |
| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo caption、image-credit line |
| `{typography.button}` | 14px | 700 | 1.0 | 1.5px | 所有 button label：uppercase、letterspaced |
| `{typography.nav-link}` | 14px | 400 | 1.4 | 0.5px | Top-nav menu item |

### Principles
系统始终用 heavy headline（700）对比 very light body（300）；这个 gap 是 editorial signature。Letter-spacing 很关键：button label 和 category label 带 1.5px tracking，让它们感觉 "machined" 而不是 "typed"。Display headline 保持 0 letter-spacing；BMW Type 的 natural cap-height 会处理大尺寸 spacing。

UPPERCASE display 是 h1/h2 的默认声音；sentence case 出现在 body 和 intro paragraph 中，但很少用于 headline。All-caps treatment 是 brand-voice signal，而不是单纯样式选择。

### Font Substitutes
如果 BMW Type Next Latin 不可用，700/300 的 **Inter**（variable）是最接近的 open-source substitute。将 display headline tracking 调整到 -0.5px，以匹配 BMW Type 在大尺寸上的紧凑 spacing。如果需要稍微更 compressed 的感觉，headline 可使用 **Saira Condensed**。

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.xxl}` 64px · `{spacing.section}` 96px.
- **Section padding (vertical):** Major editorial band 之间使用 `{spacing.section}` (96px)。
- **Hero photo bands:** Hero h1 + sub-headline pair 周围使用 `{spacing.xxl}` (64px) internal vertical padding。
- **Card internal padding:** Content 和 model card 使用 `{spacing.lg}` (24px)；spec-cell table 使用 `{spacing.xl}` (40px)。
- **Gutters:** 3-up grid 的 card 间距为 `{spacing.lg}` (24px)；footer column 内部使用 `{spacing.md}` (16px)。

### Grid & Container
- **Max content width:** Marketing page 上约 1440px 居中，比典型 SaaS 更宽，让 photography 有呼吸空间。
- **Editorial body:** 单一 12-column grid；photo band full-bleed 出血（无 max-width）。
- **Card grids:** Desktop 为 3-up，tablet 为 2-up，mobile 为 1-up。
- **Footer:** Desktop 为 4-column link list，tablet 为 2-up，mobile 为 1-up。

### Whitespace Philosophy
BMW M 信任 photography 来完成视觉工作。Photography 周围的 whitespace 很克制：车辆填满 frame，copy 位于下方或旁边，并严格对齐到 column。Whitespace 出现时（body section 之间、CTA 周围），始终统一为 `{spacing.section}` (96px)。系统不添加 atmospheric backdrop、gradient 或 decoration；empty space 保持 empty black canvas。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Flat | 无 shadow，无 border | Body section、top nav、footer、photo band |
| Soft hairline | 1px `{colors.hairline}` border | Section divider、card outline、table row |
| Card surface | Canvas 上的 `{colors.surface-card}` background，无 shadow | Feature photo card、magazine card、chatbot launcher |
| Photographic depth | Full-bleed photography，edge-to-edge crop | Hero band、motorsport feature；depth 来自 subject matter，而不是 chrome |

系统不使用 drop shadow，也不使用 layered chrome。Depth 完全来自 photography（subject + lens + lighting），以及 black canvas 和轻微 elevated 的 `{colors.surface-card}` 之间的 contrast。

### Decorative Depth
- **M Stripe Divider** (`{component.m-stripe-divider}`): 4px 高的 horizontal divider，承载 M tricolor（`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`）。用于 motorsport chrome、model-detail header 和 brand-identity moment。Stripe 是系统唯一真正的 "decorative" element，用来克制地标记重要性。
- **Carbon-fiber surfaces**: Technical-spec page 使用 `{colors.carbon-gray}` (#2b2b2b) cell，并带 subtle texture overlay。这是单页 treatment，不是 system-wide pattern。
- **Photographic depth**: Full-bleed car 本身就是 depth。Photography 中的 lighting（track light、sunset rim-light）承担 SaaS 系统中 drop shadow 的 elevation work。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | 所有 button、card、photo container、spec cell、input；主导 radius |
| `{rounded.xs}` | 2px | 几乎不用，保留给 legal CTA |
| `{rounded.sm}` | 4px | Configurator surface 上的 small toggle pill |
| `{rounded.md}` | 6px | 少见，用于 small dropdown menu item |
| `{rounded.full}` | 9999px / 50% | Circular icon button、carousel arrow、chatbot launcher |

Radius hierarchy 是“几乎总是 0，偶尔是 circular”。这种 binary radius decision 是刻意的 brand-language choice：sharp rectangle 读作 engineered precision，circle 读作 functional control。中间态不存在。

### Photography Geometry
Hero photography full-width 填充，不带 rounding。Grid 内的 photo card 保持 `{rounded.none}` corner，image edge-to-edge。Carbon-wheel detail shot 和 motorsport-pit photo 使用 16:9 或 21:9 cinema-aspect ratio。Racing-team grid 中的 driver portrait 使用 4:5 portrait crop，也保持 sharp corner。

## Components

### Top Navigation

**`top-nav`** — 固定在每页顶部的 black nav bar。高度 64px，background `{colors.canvas}`。左侧承载 BMW M logo（M tricolor + BMW roundel + "M" wordmark），中部为 primary horizontal menu（Models、Topics、Magazine、Configurator、Fastlane），右侧 cluster 包含 language selector、search icon、account icon。Menu item 使用 `{typography.nav-link}`，label 为 sentence-case。

### Buttons

**`button-primary`** — Signature primary CTA。Background `{colors.canvas}`（或 photography 上的 transparent）、text `{colors.on-dark}` (white)、1px white border outline、rounded `{rounded.none}` (0px)、padding 16px × 32px、height 48px。Type `{typography.button}`：uppercase 14px / 700 / 1.5px tracking。Rectangular silhouette 和 uppercase letterspaced label 就是品牌 button。

**`button-primary-outline`** — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.

**`button-on-light`** — Used on rare light-surface contexts (configurator, account dialogs). Background `{colors.canvas}`, text `{colors.on-dark}` — black button with white text, inverted from the dark-canvas default.

**`button-icon`** — Circular icon button（carousel control、share、favorite）。48 × 48px，background `{colors.surface-card}`，white icon 居中，rounded `{rounded.full}`。这是系统中唯一 non-rectangular button shape。

**`carousel-arrow`** — Specific 48 × 48 circular arrow used in photo carousels. Same shape as `{component.button-icon}` with chevron glyph.

**`text-link`** — Inline uppercase letterspaced link（"VIEW ALL MODELS"、"READ MORE"）。使用 `{typography.label-uppercase}`，dark 上为 white，无 underline。多数 link label 旁带 chevron arrow → glyph。

### Cards & Containers

**`hero-photo-band`** — Full-width black band，full-bleed automotive photography 填满大部分 frame。H1 使用 `{typography.display-xl}`（80px / 700），left-aligned 叠在 photo 上，下面常配一个 `{typography.body-md}` small subtitle。Vertical padding `{spacing.xxl}` (64px)。没有 card frame；photo 本身就是 band。

**`feature-photo-card`** — 用于 "MORE FROM BMW M MAGAZINE" 等 editorial section 的 3-up grid。Background `{colors.surface-card}`、rounded `{rounded.none}`、internal padding `{spacing.lg}` (24px)。Card 上半部分是 16:9 photo（card 内 full-bleed）；下方是 `{typography.label-uppercase}` category tag、`{typography.title-lg}` title 和 short body description。

**`model-card`** — 用于 "MORE NEW M MODELS" 3-up grid。Background `{colors.canvas}`（没有 card surface，只是 black 上的 photo），rounded `{rounded.none}`。顶部是 model 的 16:10 hero shot。下方：model name 使用 `{typography.display-md}`（40px / 700），short specs line 使用 `{typography.body-sm}`，再加 `{component.text-link}`（"EXPLORE THIS MODEL"）。

**`magazine-article-card`** — A more text-forward card variant used on the magazine overview page. Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`. Carries a small thumbnail at top, a category label in `{typography.label-uppercase}`, headline in `{typography.title-lg}`, and a body excerpt.

**`spec-cell`** — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background `{colors.surface-soft}` (#0d0d0d), rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Each cell holds a value in `{typography.display-sm}` (32px / 700) at top and a label in `{typography.label-uppercase}` below.

**`motorsport-photo-card`** — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.

**`chatbot-launcher`** — A right-side card-style entry point ("BMW M CHATBOT") on the homepage. Background `{colors.surface-card}`, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries an h3 title, a short prompt, and a `{component.button-primary}` to launch.

**`category-tab`** + **`category-tab-active`** — The category selector tabs used on the magazine and topics pages (e.g., "ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT"). Tabs render as text-only labels in `{typography.label-uppercase}`. Active state changes text color from `{colors.body}` to `{colors.on-dark}` and adds a 2px white underline below the label. No background fill, no rounded corners.

### Inputs & Forms

**`text-input`** — Standard text input on dark surfaces. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.

**`cookie-consent-card`** — A right-side cookie-banner card visible on the homepage. Background `{colors.canvas}` with 1px hairline, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Body text in `{typography.body-sm}` (14px / 300) — Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.

### Signature Components

**`m-stripe-divider`** — The 4px horizontal stripe carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.

**`cta-band-photo`** — A pre-footer "Drive an M" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in `{typography.display-md}` and a `{component.button-primary-outline}` below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.

### Footer

**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.body}`. 4-column link list at desktop covering BMW M Models / BMW M Lifestyle / Owners / Company. Vertical padding 64px. Bottom row carries the BMW corporate disclaimer in `{typography.caption}` and language selector. The footer never inverts — it stays black even when the body might transition.

## Do's and Don'ts

### Do
- 每个页面都用 full-bleed automotive photography 锚定。车就是 brand voltage；chrome 退后。
- 使用 `{typography.display-xl}` 或 `{typography.display-lg}` 的 UPPERCASE display headline。Sentence-case display 会显得 off-brand。
- 将 heavy display（700）与 light body（300）配对。Weight contrast 是 editorial signature。
- 将 M tricolor stripe 保留给 brand-identity moment：wordmark accent、motorsport chrome、model badge。绝不作为 button fill 或 surface。
- 默认使用 `{rounded.none}` (0px)。`{rounded.full}` 只留给 circular icon button。
- All-caps label 使用 1.5px letter-spacing。"Machined" feel 不可谈判。
- Major editorial band 之间使用 `{spacing.section}` (96px)，形成 grid-aligned vertical rhythm。

### Don't
- 不要在 M tricolor（`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`）和 heritage `{colors.bmw-blue}` 之外引入 brand color。
- 不要 bold body type。Body 保持 300（Light）；提升到 400 或 500 会让页面从 European-engineered 变成 marketing-bombastic。
- 不要使用 rounded button。Rectangular silhouette 就是品牌。Rounded corner 会读成 consumer-tech，而不是 motorsport。
- 不要在 hero type 后面放 gradient backdrop。Hero 本身就是 photography；page floor 保持 pure black，由 photo 提供 depth。
- 不要连续两个 band 重复同一种 surface mode。推荐 rhythm：photo band → spec table → photo band → magazine grid → photo band。连续两个 text-only band 会读成 corporate site。
- 不要把 M stripe 当作 button fill。Stripe 是 divider / accent，绝不是 action surface。
- 不要把 button label 的 uppercase tracking 压到 1.5px 以下；spacing 才让它们感觉 "machined"。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Hamburger nav；hero h1 从 80→48px；demo grid 1-up；photo card full-width 堆叠；footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav 保持 horizontal 但收紧；2-up card grid；spec table 2-up |
| Desktop | 1024–1440px | 完整 top-nav；3-up card grid；spec table 4-up |
| Wide | > 1440px | 与 desktop 相同，但 breathing room 更多；max content 1440px |

### Touch Targets
- `{component.button-primary}` 最小渲染为 48 × 48px，符合 WCAG AAA。
- `{component.button-icon}` 和 `{component.carousel-arrow}` 精确为 48 × 48，明显高于 44 × 44 最小值。
- `{component.text-input}` 高度为 48px。
- Category tab 渲染为 text-only label，并带 12px vertical padding；结合周围 spacing 后 effective tap area 达到 44px。

### Collapsing Strategy
- Top nav 在 < 768px 折叠为 hamburger sheet；menu 以 full-screen black overlay 打开，顶部带 M tricolor stripe。
- Photography 在每个 breakpoint 都保持 full-bleed，绝不折叠为带 margin 的 container。
- Card grid 通过减少 column 折叠，而不是缩小 card；photography 保持 native aspect ratio。
- Spec table 从 4-up 折叠到 2-up 再到 1-up；无论 column count 如何，spec value 都保持 `{typography.display-sm}`。
- M-stripe divider 在所有 breakpoint 下保持 4px height。

### Image Behavior
- Hero photography 响应式裁切：desktop 使用更宽 crop，mobile 使用 vertical crop。
- Lifestyle 和 motorsport photo 保持 native aspect ratio；系统绝不 letterbox 或 pillarbox。
- M wordmark + tricolor logo 随 viewport width 等比缩放。

## Iteration Guide

1. 每次只聚焦一个 component。引用它的 YAML key（`{component.hero-photo-band}`、`{component.spec-cell}`）。
2. 新 component 默认使用 `{rounded.none}` (0px)。只有 circular icon button 才使用 `{rounded.full}`。
3. Variant（`-active`、`-disabled`）作为 `components:` 中的独立条目存在。
4. 所有地方使用 `{token.refs}`，不要 inline hex。
5. 不记录 hover state。只记录 Default 和 Active/Pressed。
6. Display headline 保持 UPPERCASE 700；body 保持 sentence-case 300。不要抹平两者 contrast。
7. M tricolor 只属于 brand-identity，不要扩展成 "primary action" 的 system token。
8. 不确定如何强调时：先放大 photography，再考虑放大 type。

## Known Gaps

- Dembrandt frequency analyzer 将 white text（count 955）捕获为最高频 token。Black canvas 来自 screenshot 推断；dembrandt 的 body-background sampling 没有把它作为 top palette entry 暴露出来，但页面明显是 black-on-white-text。
- Exact M tricolor stop 来自公开 BMW brand guideline；screenshot 中 stripe 元素很小，在此分辨率下 pixel-sampling 无法可靠地区分 #0066b1 与 #1c69d4。基于 BMW Design Works 发布的 brand spec，应将文档中的 stop 视为 canonical。
- BMW Type Next Latin 在 Light (300) 和 regular (700) 之外的 weight axis value 未记录；这里只记录 screenshot 中观察到的 static weight。
- Animation 和 transition timing（photo carousel transition、hover-reveal effect、configurator interaction）不在范围内。
- `{component.text-input}` default 之外的 form validation state 未提取；error / success input variant 需要 configurator 或 order flow 才能确认。
- Configurator surface（带 color / wheel / interior picker 的 vehicle build page）不在分析 URL 集合中；它的 swatch grid、comparison panel 和 price-summary card 未在此记录。
- Cookie consent overlay 遮挡了捕获 screenshot 中 homepage hero 的一部分；secondary hero treatment（不同 car model 在 hero band 中轮播）可能包含未捕获的变化。