BMW

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

## 概览
BMW corporate site 相比更具 motorsport 爆发感的 BMW M，呈现出更 **measured、corporate-automotive** 的界面。整体氛围偏 light：`{colors.canvas}` (#ffffff) 是 base surface，`{colors.surface-card}` (#fafafa) 承载 soft-grey card plate，dark navy `{colors.surface-dark}` (#1a2129) 只出现在 hero band 内，每页一个，用来框住主推车型 render。

Type 使用 BMW 授权的 **BMW Type Next Latin**，分为两个 weight：heavy 700（display + button + nav）与 Light 300（body + secondary copy）。这种 contrast，即 heavy display 旁边接 thin paragraph，是 editorial signature，传达品牌 “European-engineered” 声音。Weight 500 被刻意排除；weight 400 只出现在 caption 和 nav-link 这类 neutral utility context。

品牌 action color **BMW corporate blue**（`{colors.primary}` — #1c69d4）独立承担所有 primary CTA；button 是 **rectangular、0px corner**，配 white type。站点在 page rhythm 中反复使用 blue-button + dark-navy-hero 组合。M tricolor stripe（`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`）只出现在 motorsport context，以及 M-model badge/divider 中，绝不进入 corporate site 的主语言。

Configuration 与 reservation flow 在同一系统上增加 dealer-side inventory UI：filter chip、model card、price table；但 typography 与 color 保持一致，只是 density 提高。

**Key Characteristics:**
- Light `{colors.canvas}` 是 base surface；dark navy `{colors.surface-dark}` 只出现在 hero band 内，page rhythm 依赖 contrast。
- BMW corporate blue（`{colors.primary}` — #1c69d4）是唯一 primary action color。
- BMW Type Next Latin：weight 700 display 对比 weight 300 body，是品牌 signature。
- Button 是 **rectangular、0px radius**，属于 corporate dialect，区别于 M 更运动的 radius。
- Model card 以 4-up 或 5-up grid 呈现，没有 hairline border 或只有极少 border，只保留 white plate + photo + title。
- Photography（model render）置于环境中，不加 shadow；depth 完全来自 color-block contrast。
- M tricolor stripe 只出现在 M-model context，不属于 corporate language。
- 每个 major band 的 section rhythm 保持 `{spacing.section}`（80px）。

## Colors

### Brand & Accent
- **BMW Blue (Primary)** (`{colors.primary}` — #1c69d4): 唯一 brand action color。用于所有 primary CTA、“Learn More” link prefix（blue text）、nav-link active state。Press 时切换到 `{colors.primary-active}` (#0653b6)。
- **M Blue Light** (`{colors.m-blue-light}` — #0066b1) + **M Blue Dark** (`{colors.m-blue-dark}` — #1c69d4) + **M Red** (`{colors.m-red}` — #e22718): M tricolor stripe，只在 corporate site 的 M-model page 和 “M” badge 上出现。绝不作为 CTA color。

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): 默认 page surface。
- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): Footer 与 sub-navigation band 使用的 soft grey。
- **Surface Card** (`{colors.surface-card}` — #fafafa): Model card photo block 背后的 light plate。
- **Surface Strong** (`{colors.surface-strong}` — #ebebeb): 略重的 grey，用作 section divider。
- **Surface Dark** (`{colors.surface-dark}` — #1a2129): Hero band 与大型 dark CTA 使用的 dark navy。不是 pure black，带 warm undertone。
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #262e38): 亮一级，用于 dark hero 上方的 nested card。

### Hairlines
- **Hairline** (`{colors.hairline}` — #e6e6e6): 1px divider，用于 input outline、configurator card outline、table separator。
- **Hairline Strong** (`{colors.hairline-strong}` — #cccccc): 更明显的 1px outline，用于 disabled secondary button、emphasized table border。

### Text
- **Ink** (`{colors.ink}` — #262626): 所有 display 与 primary text。不是 pure black，放在摄影图旁更柔和。
- **Body** (`{colors.body}` — #3c3c3c): 默认 running text。
- **Body Strong** (`{colors.body-strong}` — #1a1a1a): Emphasized paragraph 与 lead text。
- **Muted** (`{colors.muted}` — #6b6b6b): Footer link、breadcrumb、caption。
- **Muted Soft** (`{colors.muted-soft}` — #9a9a9a): Disabled text、fine-print legal。
- **On Primary** (`{colors.on-primary}` — #ffffff): Blue button 上的 white text。
- **On Dark** (`{colors.on-dark}` — #ffffff): Dark hero band 上的 white text。
- **On Dark Soft** (`{colors.on-dark-soft}` — #bbbbbb): Dark band 上 secondary text 使用的略 muted white。

### Semantic Colors
- **Success** (`{colors.success}` — #22c55e): Confirmation message 与 “available” indicator。
- **Warning** (`{colors.warning}` — #f59e0b): Warning callout。
- **Error** (`{colors.error}` — #dc2626): Validation error。

## Typography

### Font Family
系统使用 **BMW Type Next Latin** 的两个 cut：regular（display + UI label）与 **BMW Type Next Latin Light**（body + secondary copy）。Fallback stack：`system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`。

Display/body split 是功能性的：
- BMW Type Next Latin (700) → display headline、button label、nav link
- BMW Type Next Latin Light (300) → paragraph、descriptive copy
- BMW Type Next Latin (400) → caption、neutral nav-link context

这个 three-way split 与 BMW M 呼应：corporate 与 M sub-brand 共享同一 typographic DNA，只是 weight/size ratio 不同。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 700 | 1.05 | 0 | Hero h1（“iX3”、model name） |
| `{typography.display-lg}` | 48px | 700 | 1.1 | 0 | Section head |
| `{typography.display-md}` | 32px | 700 | 1.15 | 0 | Sub-section head |
| `{typography.display-sm}` | 24px | 700 | 1.25 | 0 | CTA-band headline |
| `{typography.title-lg}` | 20px | 700 | 1.3 | 0 | Card group title |
| `{typography.title-md}` | 18px | 700 | 1.4 | 0 | Model card title、intro paragraph |
| `{typography.title-sm}` | 16px | 700 | 1.4 | 0 | Inventory card title、list label |
| `{typography.body-md}` | 16px | 300 (Light) | 1.55 | 0 | Default body，BMW Type Next Latin Light |
| `{typography.body-sm}` | 14px | 300 (Light) | 1.55 | 0 | Footer body、fine-print |
| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo caption、meta |
| `{typography.label-uppercase}` | 13px | 700 | 1.3 | 1.5px | “LEARN MORE” inline link、category tab |
| `{typography.button}` | 14px | 700 | 1.0 | 0.5px | Standard CTA button label |
| `{typography.nav-link}` | 14px | 400 | 1.4 | 0.3px | Top-nav menu item |

### Principles
- **700/300 contrast** 是 editorial signature。系统中没有 weight 500。
- **不使用 negative letter-spacing**：BMW Type Next Latin 适合宽体，所以 tracking 保持默认。Apple/Cal.com 式收紧在这里会显得 off-brand。
- **UPPERCASE inline link**：“LEARN MORE” 风格 CTA 使用 uppercase 与 1.5px tracking，表达 “machined precision” 声音。
- **Weight 400 只在窄范围存在**：仅用于 caption 和 nav-link，这两者都是 neutral utility role。

### Font Substitutes
BMW Type Next Latin 是 BMW 授权字体。Open-source alternative：
- **Inter** (variable)：weight 700/300 时接近。保持 letter-spacing 为 0.0em。
- **Saira Condensed**：用于略更 compressed 的 BMW Type 感。

## Layout

### Spacing System
- **Base unit:** 8px。
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px。
- **Section padding:** 每个 major editorial band 使用 `{spacing.section}`（80px）。
- **Card internal padding:** Model card 与 feature card 使用 `{spacing.lg}`（24px）。

### Grid & Container
- **Max content width:** 约 1440px，center-aligned。
- **Editorial body:** 单一 12-column grid。
- **Model card grids:** Desktop 为 4-up 或 5-up，tablet 为 2-up，mobile 为 1-up。
- **Configurator inventory grids:** 3-up filter row + 4-up vehicle card，dense layout。

### Whitespace Philosophy
BMW 的 whitespace strategy 比 BMW M 的 motorsport-aerated 风格更紧，corporate side 更 utility-driven。Section rhythm 是 80px（不是 M 的 96px）。Card padding 是 24px（不是 M 的 32px）。页面更 dense，也更 dealership-functional。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Flat | 无 shadow，无 border | Body、top nav、footer、hero band |
| Soft hairline | 1px `{colors.hairline}` border | Configurator option tile、table divider |
| Card surface | `{colors.surface-card}` background，无 shadow | Model card photo plate |
| Photographic | Edge-to-edge photography | Hero band、model render |

系统从不使用 drop shadow。Depth 完全来自：a) color-block contrast（light canvas vs dark hero）；b) photographic subject + lighting。

### Decorative Depth
- **`m-stripe-divider`** — 4px 高的 horizontal tricolor stripe（`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`）。仅用于 M-model context、motorsport badge，或作为 M-related section divider。不是 main corporate flow 的一部分。
- **Photographic depth** — full-bleed vehicle photography（lighting + subject）承担原本 chrome 会做的工作。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | 每个 button、card、input、configurator chip，是主导 radius |
| `{rounded.xs}` | 2px | 很小的 badge，极少使用 |
| `{rounded.sm}` | 4px | Small inline button（少见） |
| `{rounded.md}` | 8px | Mobile-only collapse card（少见） |
| `{rounded.lg}` | 12px | 极少使用，用于 modal/dialog corner |
| `{rounded.pill}` | 9999px | 某些 context 中的 filter chip（少见） |
| `{rounded.full}` | 9999px / 50% | Avatar、circular icon button |

Radius hierarchy 是 binary：**所有东西都是 rectangular，只有 icon button 是 circular。** 这明显不同于 Apple 或 Cal.com 的 soft-cornered SaaS dialect，更接近 BMW corporate-automotive 的 “engineered precision” 声音。

### Photography Geometry
- Hero photography 使用 full-bleed 16:9 或 21:9 cinematic ratio。
- Model card photo 为 16:10，edge-to-edge，并带 `{rounded.none}` corner。
- Configurator vehicle render 位于 white studio background 上，完整 silhouette 可见。

## Components

### Top Navigation

**`top-nav`** — 固定在页面顶部的 white sticky nav bar。高度 64px，`{colors.canvas}` background。左侧：BMW circular badge logo；中间：primary horizontal menu（Models、Next Generation、Pre-Owned、Dealers、Test Drive）；右侧：cart icon、language picker、profile。Menu item 使用 `{typography.nav-link}`（14px / 400 / 0.3px tracking）渲染。

### Buttons

**`button-primary`** — Signature primary CTA。Background `{colors.primary}`（BMW Blue #1c69d4）、text `{colors.on-primary}`、type `{typography.button}`（BMW Type Next Latin 14px / 700 / 0.5px tracking）、padding 14px × 32px、height 48px、rounded `{rounded.none}`（0px，rectangular）。Press state：`button-primary-active` 切换为 `{colors.primary-active}`。

**`button-secondary`** — 带 hairline outline 的 white button。Background `{colors.canvas}`、text `{colors.ink}`、1px `{colors.hairline-strong}` border，padding + height + radius 相同。

**`button-secondary-on-dark`** — 用于 dark hero band 上。Background transparent、text `{colors.on-dark}`、1px `{colors.on-dark}` border，使用相同 rectangular shape。

**`button-text-link`** — Inline UPPERCASE letter-spaced link。无 background，text `{colors.ink}`，type `{typography.label-uppercase}`（13px / 700 / 1.5px tracking）。读作 “LEARN MORE”，以 `›` chevron 结尾。

**`text-link`** — Body copy 内的 inline link。`{colors.ink}` text，默认无 underline；按 context 添加 underline。

### Cards & Containers

**`hero-band-dark`** — Full-width dark navy hero。Background `{colors.surface-dark}`、text `{colors.on-dark}`、vertical padding `{spacing.section}`（80px）。居中内容：`{typography.display-xl}`（64px / 700）的 model name + sub-headline + vehicle render（右对齐或在下方）。搭配单个 `{component.button-primary}`（blue）或 `{component.button-secondary-on-dark}`。

**`hero-photo-band`** — Light-canvas model showcase band。Background `{colors.canvas}`、text `{colors.ink}`。Vehicle render 占据宽区域；右侧或下方放置 headline + 两个 link CTA + sub-tagline。

**`model-card`** — 用于 homepage 上的 4-up 或 5-up model card grid（“BMW iX3”、“BMW iX”、“BMW 5 Series”）。Background `{colors.canvas}`、rounded `{rounded.none}`、padding `{spacing.lg}`（24px）。内容：顶部 model render（`{colors.surface-card}` 上的 `{component.model-card-photo}`），下方 `{typography.title-md}`（18px / 700）的 model name，`{typography.body-sm}`（14px / 300）的一行 tagline，以及 `{component.button-text-link}`（“LEARN MORE ›”）。

**`model-card-photo`** — Card 的 photo plate。Background `{colors.surface-card}`（#fafafa，soft grey）、rounded `{rounded.none}`，vehicle render 使用完整 silhouette。Zero padding，photo edge-to-edge。

**`feature-photo-card`** — Feature/lifestyle card。Background `{colors.canvas}`、padding `{spacing.lg}`。顶部为 16:9 photo，下方为 `{typography.title-md}` headline + body excerpt。

**`spec-cell`** — Technical spec cell（model detail page）。Transparent background，通过 hairline divider 分隔。Value 在上（`{typography.display-sm}` 24px / 700），label 在下（`{typography.label-uppercase}`）。

### Inventory & Configurator

**`inventory-card`** — Dealer inventory page 上每辆车一张 card。Background `{colors.canvas}`、padding `{spacing.md}`（16px）、rounded `{rounded.none}`。顶部为 vehicle photo，下方为 model + variant name + price + “View” link。

**`filter-chip`** + **`filter-chip-active`** — Inventory filter chip（model、year、price range）。Inactive：background `{colors.canvas}`、1px `{colors.hairline-strong}` border、text `{colors.ink}`、type `{typography.caption}`。Active：background `{colors.ink}`、text `{colors.on-dark}`。Padding 8px × 14px，radius `{rounded.none}`。

**`configurator-option-tile`** + **`configurator-option-tile-selected`** — Configurator selection cell（color、wheels、upholstery）。Inactive：background `{colors.canvas}`、1px hairline。Selected：2px `{colors.primary}` border。Padding 16px × 24px，radius `{rounded.none}`。

### Inputs & Forms

**`text-input`** — Standard text input。Background `{colors.canvas}`、text `{colors.ink}`、type `{typography.body-md}`、rounded `{rounded.none}`（0px）、padding 14px × 16px、height 48px、1px hairline border。Focus 时 border 加粗为 ink。

**`cookie-consent-card`** — Cookie banner。Background `{colors.canvas}`、1px hairline、padding `{spacing.lg}`（24px）、`{typography.body-sm}`（14px / 300，legal copy 中也保持 Light）。

### Tabs / Tags

**`category-tab`** + **`category-tab-active`** — Category sub-nav。Inactive：transparent + `{colors.muted}` UPPERCASE label。Active：transparent + `{colors.ink}` UPPERCASE label + 2px ink underline。12px vertical padding，无 horizontal radius。

### Brand Signature

**`m-stripe-divider`** — 4px 高 horizontal tricolor stripe（`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`）。仅用于 M-model context、motorsport badge，或作为 M-related section divider。Corporate main flow 中不存在；在 M-model detail page 和 M Performance badge 中扮演 inline divider 角色。

### CTA / Footer

**`cta-band-photo`** — Pre-footer “Discover the New iX3” 风格 band。Background `{colors.surface-dark}`，带 full-bleed vehicle photo。居中 headline 使用 `{typography.display-md}`（32px / 700）+ 单个 `{component.button-secondary-on-dark}`。Padding 80px。

**`footer`** — Closing soft-grey footer。Background `{colors.surface-soft}`（#f7f7f7，不是 pure white，而是 soft grey）、text `{colors.body}`。4-column link list：Models / Services / Dealers / About。Vertical padding 64px。下方 copyright line 使用 `{typography.body-sm}` 与 `{colors.muted}`。

## Do's and Don'ts

### Do
- 每个页面都放在 `{colors.canvas}`（pure white）上；`{colors.surface-dark}` 只保留给 hero band。
- Primary CTA 使用 `{colors.primary}`（BMW Blue）+ `{colors.on-primary}` white text + `{rounded.none}` 0px corner，这是 corporate signature。
- Display headline 使用 BMW Type Next Latin 700，body 使用 Light 300。这个 contrast 不可协商。
- 使用 “LEARN MORE” 这类 UPPERCASE letter-spaced link 作为 inline CTA。
- 将 model card photo 放在 `{colors.surface-card}` 上，title 位于下方，这是标准 BMW corporate pattern。
- Section rhythm 保持 `{spacing.section}`（80px），比 BMW M 的 96px 更紧。
- M tricolor stripe 只保留给 M-model context 与 motorsport divider。

### Don't
- 不要添加 blue 之外的 brand color；BMW Blue 是唯一 primary action color。
- 不要使用 pill 或 rounded button；`{rounded.none}`（0px）rectangular 才是品牌 button。
- 不要把 display weight 降到 500；系统使用 700 / 400 / 300，没有 500。
- 不要加粗 body type；Light 300 是 BMW corporate editorial voice。
- 不要给 card 添加 drop shadow；depth 来自 photo + color-block contrast。
- 不要在连续两个 band 中重复相同 surface mode；必须保持 light → dark hero → light → light feature → dark CTA → light footer rotation。
- 不要把 M tricolor stripe 用作 CTA fill；它只能作为 divider/accent。
- 不要在单页混用语言；UI language 必须一致。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Hamburger nav；hero h1 64→40px；model card grid 为 1-up；configurator filter chip 为 2-up；footer 4 col → 1 col |
| Tablet | 768–1024px | Top nav 收窄，secondary menu 收进 “More”；model card 为 2-up；inventory 为 2-up |
| Desktop | 1024–1440px | 完整 top-nav；model card grid 为 4-up 或 5-up；inventory 为 3-up；完整 configurator UI |
| Wide | > 1440px | 与 desktop 相同，content 固定在 1440px；剩余空间由 gutter 吸收 |

### Touch Targets
- `{component.button-primary}` 最小 48 × 48px，高于 WCAG AAA（44 × 44）。
- `{component.text-input}` height 为 48px。
- Category tab 使用 12px vertical padding，effective tap area > 44px。

### Collapsing Strategy
- Top nav 在 768px 以下折叠为 hamburger；menu 打开为 full-screen sheet。
- Hero band 内部 layout 降为 single column。
- Model card grid 从 4-up/5-up → 2-up → 1-up。
- Configurator filter chip row 在 mobile 上横向滚动。
- M tricolor stripe 在每个 breakpoint 都保持 4px height。

### Image Behavior
- Model render 在每个 breakpoint 缩放，并保持 native aspect ratio。
- Hero photography 在 mobile 上可能切换到更 vertical 的 crop（art direction）。
- Inventory vehicle photo 在 mobile 上可能从 16:9 切换到 4:3。

## Iteration Guide

1. 一次关注一个 component。直接引用它的 YAML key（`{component.model-card}`、`{component.button-primary}`）。
2. 新 component 默认使用 `{rounded.none}`（0px）。`{rounded.full}` 只用于 circular icon button。
3. Variant（`-active`、`-disabled`、`-selected`）作为 `components:` block 内的独立 entry。
4. 所有位置都使用 `{token.refs}`，不要 inline hex。
5. 绝不记录 hover state。只记录 Default 与 Active/Pressed state。
6. Display headline 保持 BMW Type Next Latin 700；body 保持 Light 300；这个三元组固定。
7. UI string 保持单一语言，匹配页面 locale。

## Known Gaps

- BMW Type Next Latin 授权给 BMW，未作为 public web font 发布；Inter weight 700/300 是记录的替代。
- Animation 与 transition timing（configurator color swap、model card hover-reveal）不在范围内。
- 未提取 `{component.text-input}` focus 之外的 form validation state；error/success state 需要专门的 form page。
- Dealer inventory sub-domain 与 main corporate site 共享 typography 与 color；只有 UI density 提高（filter、table、price）。
- Cookie consent overlay 可能遮挡部分 hero；lead hero band content 可能未被完整捕获。
- M tricolor stripe 在此 corporate site 中出现频率较低；完整 motorsport context 位于 BMW M site。