version: alpha name: BMW-M-design-analysis description: A motorsport-engineering interface anchored on a near-black canvas with white BMW Type Next Latin display headlines in confident UPPERCASE. The brand carries no decorative voltage — its energy comes from full-bleed automotive photography (cars on tracks, driver-cockpit shots, carbon-fiber detail) and the iconic M tricolor stripe (light blue → dark blue → red) used sparingly as a brand signature on logos, dividers, and motorsport chrome. Type stays light to medium weight to feel European-engineered, never American-bombastic.
colors: primary: "#ffffff" ink: "#ffffff" body: "#bbbbbb" body-strong: "#e6e6e6" muted: "#7e7e7e" hairline: "#3c3c3c" hairline-strong: "#262626" canvas: "#000000" surface-card: "#1a1a1a" surface-elevated: "#262626" surface-soft: "#0d0d0d" on-primary: "#000000" on-dark: "#ffffff" m-blue-light: "#0066b1" m-blue-dark: "#1c69d4" m-red: "#e22718" bmw-blue: "#1c69d4" electric-blue: "#0653b6" carbon-gray: "#2b2b2b" warning: "#f4b400" success: "#0fa336"
typography: display-xl: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 80px fontWeight: 700 lineHeight: 1 letterSpacing: 0 display-lg: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0 display-md: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0 display-sm: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0 title-lg: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 label-uppercase: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 1.5px body-md: fontFamily: "BMWTypeNextLatin Light, BMWTypeNextLatin, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "BMWTypeNextLatin Light, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.5px button: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1 letterSpacing: 1.5px nav-link: fontFamily: "BMWTypeNextLatin, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.5px
rounded: none: 0px xs: 2px sm: 4px md: 6px full: 9999px
spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 40px xxl: 64px section: 96px
components: button-primary: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 16px 32px height: 48px button-primary-outline: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 16px 32px height: 48px button-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 16px 32px button-icon: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 48px text-link: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.label-uppercase}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 64px hero-photo-band: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 96px m-stripe-divider: backgroundColor: transparent textColor: "{colors.on-dark}" height: 4px feature-photo-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px model-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-lg}" rounded: "{rounded.none}" padding: 24px magazine-article-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px spec-cell: backgroundColor: "{colors.surface-soft}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 24px cookie-consent-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 24px category-tab: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.label-uppercase}" padding: 12px 0 category-tab-active: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.label-uppercase}" padding: 12px 0 text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 12px 16px height: 48px chatbot-launcher: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px cta-band-photo: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" padding: 80px motorsport-photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" carousel-arrow: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 48px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px
概述
BMW M 的营销表面是近乎纯黑的画布（{colors.canvas} — #000），承载着白色 BMW Type Next Latin 标题，使用自信的大写。系统本身没有装饰性电压；品牌能量来自全幅汽车摄影——疾速过弯的车、碳纤维轮毂细节、驾驶舱镜头、赛车维修区——以边到边的内容填充整个板块。围绕摄影的 UI chrome 保持最小：纤细的无衬线文案、1px 细线分隔线（{colors.hairline}）、全大写按钮标签直到悬停才填色。
M 三色条纹——{colors.m-blue-light}（#0066b1）→ {colors.m-blue-dark}（#1c69d4）→ {colors.m-red}（#e22718）——作为品牌的签名点缀，克制地出现在 M 字标、赛车 chrome、车辆技术亮点与车型徽标上。它从不是 CTA 颜色，也从不作为背景填充——三色条纯粹是品牌识别标志。
字体声音运行 BMW Type Next Latin 两种切面：regular 用于显示 + 导航标签，Light 用于正文 + 次级文字。显示尺寸使用字重 700（BMW 标志性的"粗但紧凑"设定），而正文降至字重 300（Light）。粗体显示与轻正文之间的对比是系统的编辑签名。
关键特征：
- 近乎纯黑的画布（
{colors.canvas}— #000）配白色文字。系统几乎不做反转——没有浅色模式营销表面。 - 显示标题使用大写 BMW Type Next Latin 700。副标题保持句式小写与较轻字重。
- M 三色（
{colors.m-blue-light}/{colors.m-blue-dark}/{colors.m-red}）作为 4px 品牌条纹分隔、M 字标点缀、赛车 chrome——绝不用作按钮或填充。 - 摄影边到边填充整个板块。车辆永远是视觉主体；UI chrome 退后到叠在摄影上的小白标签。
- 按钮为平面，
{rounded.none}（0px）圆角，大写带字距标签。"工业精度"的矩形轮廓就是品牌。 - 系统中圆角几乎全为零。少数例外：
{rounded.full}用于圆形图标按钮（轮播箭头、聊天机器人启动器）和{rounded.sm}用于少数小型 toggle 胶囊。 - 间距慷慨且栅格对齐：主要板块之间
{spacing.section}（96px）；首屏摄影板块内{spacing.xxl}（64px）；内容卡片内{spacing.xl}（40px）。
配色
品牌与点缀
- Primary（
{colors.primary}— #ffffff）：系统的主要字体与 CTA 颜色。用于 h1/h2/h3 显示、深色上的正文、以及主要按钮标签（按钮本身透明或画布色——白色文字 + 描边就是按钮）。 - M Blue Light（
{colors.m-blue-light}— #0066b1）：M 三色条纹的第一档。用于 M 徽标点缀与赛车 chrome。 - M Blue Dark（
{colors.m-blue-dark}— #1c69d4）：中间一档。与{colors.bmw-blue}同色——BMW 传承的企业蓝，被重新用作 M 条纹的中间带。 - M Red（
{colors.m-red}— #e22718）：第三档。标志性的 M 动力红，用于条纹与赛车速度亮点。 - Electric Blue（
{colors.electric-blue}— #0653b6）：用于 M xDrive 电动车型页的独立电动车点缀。区别于传承蓝——感觉更冷、更数字。
表面
- Canvas（
{colors.canvas}— #000000）：每个营销表面的默认页面底色。纯黑。 - Surface Soft（
{colors.surface-soft}— #0d0d0d）：与黑几乎无差别，用于规格表单元与页脚相邻条带。 - Surface Card（
{colors.surface-card}— #1a1a1a）：卡片、次要按钮、图标按钮背景。 - Surface Elevated（
{colors.surface-elevated}— #262626）：再亮一档，用于深色板块内的嵌套卡片。 - Carbon Gray（
{colors.carbon-gray}— #2b2b2b）：碳纤维启发的表面色调，用于技术规格卡片。
细线与边框
- Hairline（
{colors.hairline}— #3c3c3c）：深色表面上的 1px 分隔色调。用于正文板块之间、表格行之间、卡片描边周围。 - Hairline Strong（
{colors.hairline-strong}— #262626）：与{colors.surface-elevated}同色——边框感觉像一档抬升而非墨线。
文本
- Ink / On Dark（
{colors.on-dark}— #ffffff）：深色画布上所有标题与主要文字。 - Body（
{colors.body}— #bbbbbb）：默认正文字色（略冷于纯白）。用于正文段落与次级元数据。 - Body Strong（
{colors.body-strong}— #e6e6e6）：强调正文 / 引子段落。 - Muted（
{colors.muted}— #7e7e7e）：页脚链接、面包屑、说明。
语义
- Warning（
{colors.warning}— #f4b400）：极少用于技术警告亮点。 - Success（
{colors.success}— #0fa336）：订单确认状态（营销表面上罕见）。
字体排版
字体族
BMW Type Next Latin 是 BMW 授权的显示 + 正文字体。系统使用两种切面：regular 与 Light。回退栈为 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。
这种划分是一种刻意的字重配对：
- 显示（700）用于标题、导航标签、按钮文字、类别标签——"压印"的声音
- Light（300）用于正文段落、描述性文案、次级元数据——"工程化"的声音
粗体显示与轻正文之间的对比是 BMW 的编辑签名——绝不要因使用 regular（400）显示或 medium（500）正文而模糊。
层级
| 令牌 | 字号 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
{typography.display-xl} | 80px | 700 | 1.0 | 0 | 首屏 h1（"THE ULTIMATE"、"MORE BMW M."） |
{typography.display-lg} | 56px | 700 | 1.05 | 0 | 板块标题（"MORE FROM BMW M MAGAZINE."） |
{typography.display-md} | 40px | 700 | 1.1 | 0 | 子板块标题、车型名 |
{typography.display-sm} | 32px | 700 | 1.15 | 0 | CTA 板块标题、类别页标题 |
{typography.title-lg} | 24px | 700 | 1.3 | 0 | 3 列栅格中的卡片标题 |
{typography.title-md} | 20px | 400 | 1.4 | 0 | 卡片副标题、引子段落 |
{typography.title-sm} | 18px | 400 | 1.4 | 0 | 规格亮点、引子段落 |
{typography.label-uppercase} | 14px | 700 | 1.3 | 1.5px | 类别 tab、"VIEW MORE" 内联标签 |
{typography.body-md} | 16px | 300（Light） | 1.5 | 0 | 默认正文——BMW Type Next Latin Light |
{typography.body-sm} | 14px | 300（Light） | 1.5 | 0 | 页脚正文、cookie 同意、小字 |
{typography.caption} | 12px | 400 | 1.4 | 0.5px | 照片说明、图像署名行 |
{typography.button} | 14px | 700 | 1.0 | 1.5px | 所有按钮标签——大写、带字距 |
{typography.nav-link} | 14px | 400 | 1.4 | 0.5px | 顶部导航菜单项 |
设计原则
系统始终对比粗体标题（700）与极轻正文（300）——差距就是编辑签名。字距不可忽视：按钮标签与类别标签承载 1.5px 字距，让它们感觉"机械加工"而非"打字"。显示标题保持 0 字距——BMW Type 的天然字面高度在大尺寸上处理间距。
大写显示是 h1/h2 的默认声音；句式小写出现在正文与引子段落中，但很少出现在标题上。全大写处理是品牌声音信号，而非风格选择。
字体替代说明
如果 BMW Type Next Latin 不可用，Inter（可变字体）700/300 是最接近的开源替代。将显示标题的字距调整为 -0.5px 以匹配 BMW Type 在大尺寸上更紧凑的字距。如果希望略更压缩的标题，Saira Condensed 是另一种选择。
布局
间距系统
- 基础单位： 4px。
- 令牌：
{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}24px ·{spacing.xl}40px ·{spacing.xxl}64px ·{spacing.section}96px。 - 板块内边距（垂直）： 主要编辑板块之间
{spacing.section}（96px）。 - 首屏摄影板块：
{spacing.xxl}（64px）首屏 h1 + 副标题对周围的内部垂直内边距。 - 卡片内边距：
{spacing.lg}（24px）用于内容与车型卡片；{spacing.xl}（40px）用于 spec-cell 表格。 - 栏间距： 3 列栅格卡片之间
{spacing.lg}（24px）；页脚栏内{spacing.md}（16px）。
栅格与容器
- 最大内容宽度： 营销页约 1440px 居中——比典型 SaaS 更宽，为摄影留出呼吸空间。
- 编辑型正文： 单 12 栏栅格；摄影板块全幅出血（无最大宽度）。
- 卡片栅格： 桌面端 3 列，平板 2 列，移动端 1 列。
- 页脚： 桌面端 4 列链接列表，平板 2 列，移动端 1 列。
留白哲学
BMW M 依靠摄影完成视觉担纲。围绕摄影的留白有所克制——车辆充满画面，文案在紧密对齐的列中位于其下方或旁边。出现留白时（正文板块之间、CTA 周围），始终统一为 {spacing.section}（96px）。系统从不添加氛围背景、渐变或装饰——空旷之处保持空旷的黑色画布。
层次与深度
| 层级 | 处理 | 用途 |
|---|---|---|
| 平面 | 无阴影、无边框 | 正文板块、顶部导航、页脚、摄影板块 |
| 柔细线 | 1px {colors.hairline} 边框 | 板块分隔、卡片描边、表格行 |
| 卡片表面 | 画布之上的 {colors.surface-card} 背景——无阴影 | 功能照片卡片、杂志卡片、聊天机器人启动器 |
| 摄影深度 | 全幅摄影边到边裁切 | 首屏板块、赛车功能——深度来自主体而非 chrome |
系统不使用投影也不使用分层 chrome。深度完全来自摄影（主体 + 镜头 + 光线）以及黑色画布与略抬升的 {colors.surface-card} 之间的对比。
装饰性深度
- M 三色分隔条（
{component.m-stripe-divider}）：一条 4px 高的水平分隔条，承载 M 三色（{colors.m-blue-light}→{colors.m-blue-dark}→{colors.m-red}）。用于赛车 chrome、车型详情页头、品牌识别时刻。条纹是系统中唯一的真正"装饰"元素——克制使用以标记重要性。 - 碳纤维表面：技术规格页使用
{colors.carbon-gray}（#2b2b2b）单元，带轻微的纹理叠层。这是单页处理，而非全系统模式。 - 摄影深度：全幅车辆就是深度。摄影中的光线（赛道灯、夕阳边缘光）完成投影在 SaaS 系统中会做的层次工作。
形态
圆角分级
| 令牌 | 数值 | 用途 |
|---|---|---|
{rounded.none} | 0px | 所有按钮、卡片、照片容器、规格单元、输入框——主导半径 |
{rounded.xs} | 2px | 几乎不使用——保留给法律 CTA |
{rounded.sm} | 4px | 配置器表面上的小型 toggle 胶囊 |
{rounded.md} | 6px | 罕见——小型下拉菜单项 |
{rounded.full} | 9999px / 50% | 圆形图标按钮、轮播箭头、聊天机器人启动器 |
圆角层级是"几乎总为 0，有时圆形"。这种二元的圆角决策是刻意的品牌语言选择——锐利矩形读起来像工程化精度；圆形读起来像功能控件。中间没有。
摄影几何
首屏摄影全幅填充，无圆角。栅格内的照片卡片保留 {rounded.none} 圆角，图像边到边。碳纤维轮毂细节镜头与赛车维修区照片使用 16:9 或 21:9 电影长宽比。赛车队伍栅格中的车手肖像使用 4:5 竖向裁切，同样为锐角。
组件
顶部导航
top-nav — 黑色导航条，固定在每个页面顶部。64px 高，{colors.canvas} 背景。承载左侧 BMW M 标志（M 三色 + BMW 圆形 + "M" 字标），主要水平菜单（Models、Topics、Magazine、Configurator、Fastlane），右侧簇包含语言选择器、搜索图标、账户图标。菜单项以 {typography.nav-link} 渲染，句式小写标签。
按钮
button-primary — 标志性的主要 CTA。背景 {colors.canvas}（或在摄影上透明），文字 {colors.on-dark}（白色），1px 白色边框描边，圆角 {rounded.none}（0px），内边距 16px × 32px，高度 48px。字体 {typography.button}——大写 14px / 700 / 1.5px 字距。矩形轮廓与大写带字距标签就是品牌按钮。
button-primary-outline — 与主要按钮同样的形态，但背景透明，仅有白色描边。在填充按钮会与图像冲突的摄影上使用。
button-on-light — 用于罕见的浅色表面语境（配置器、账户对话框）。背景 {colors.canvas}，文字 {colors.on-dark}——黑底白字，与深色画布默认相反。
button-icon — 圆形图标按钮（轮播控件、分享、收藏）。48 × 48px，背景 {colors.surface-card}，白色图标居中，圆角 {rounded.full}。系统中唯一的非矩形按钮形态。
carousel-arrow — 照片轮播中使用的特定 48 × 48 圆形箭头。与 {component.button-icon} 同形态，带 chevron 字形。
text-link — 内联大写带字距链接（"VIEW ALL MODELS"、"READ MORE"）。{typography.label-uppercase}，深色上白色，无下划线。chevron 箭头 → 字形出现在大多数链接标签旁。
卡片与容器
hero-photo-band — 全幅黑色板块，全幅汽车摄影填满大部分画面。h1 使用 {typography.display-xl}（80px / 700）左对齐叠在摄影上，通常下方有一行小副标题 {typography.body-md}。垂直内边距 {spacing.xxl}（64px）。无卡片框——摄影就是板块。
feature-photo-card — 用于 "MORE FROM BMW M MAGAZINE" 及类似编辑板块的 3 列栅格。背景 {colors.surface-card}，圆角 {rounded.none}，内部内边距 {spacing.lg}（24px）。卡片上半部分是 16:9 照片（卡内全幅）；照片下方，类别标签 {typography.label-uppercase}，{typography.title-lg} 标题，以及简短的正文描述。
model-card — 用于 "MORE NEW M MODELS" 3 列栅格。背景 {colors.canvas}（无卡片表面——仅是黑上的照片），圆角 {rounded.none}。顶部：16:10 车型主镜头。下方：车型名字体 {typography.display-md}（40px / 700），简短规格行 {typography.body-sm}，{component.text-link}（"EXPLORE THIS MODEL"）。
magazine-article-card — 用于杂志概览页的更文字导向的卡片变体。背景 {colors.canvas} 带细线边框，圆角 {rounded.none}。顶部承载小缩略图，类别标签 {typography.label-uppercase}，标题 {typography.title-lg}，以及正文摘录。
spec-cell — 用于车型详情页（发动机规格、重量、最高时速、0-100 时间）的技术规格单元。背景 {colors.surface-soft}（#0d0d0d），圆角 {rounded.none}，内边距 {spacing.lg}（24px）。每个单元顶部承载 {typography.display-sm}（32px / 700）的数值，下方承载 {typography.label-uppercase} 的标签。
motorsport-photo-card — 用于赛车队伍 / 赛车板块的边到边照片卡片。无卡片表面——仅全幅照片，左下角叠一小段白色文字说明。摄影就是品牌。
chatbot-launcher — 主页右侧的卡片式入口（"BMW M CHATBOT"）。背景 {colors.surface-card}，圆角 {rounded.none}，内边距 {spacing.lg}（24px）。承载 h3 标题、简短提示语，以及启动用的 {component.button-primary}。
category-tab + category-tab-active — 用于杂志与话题页的类别选择器 tab（如 "ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT"）。Tab 以 {typography.label-uppercase} 渲染为纯文字标签。激活态将文字色从 {colors.body} 改为 {colors.on-dark} 并在标签下方加 2px 白色下划线。无背景填充，无圆角。
输入与表单
text-input — 深色表面上的标准文本输入框。背景 {colors.surface-card}，文字 {colors.on-dark}，字体 {typography.body-md}，圆角 {rounded.none}（0px），内边距 12px × 16px，高度 48px。1px 细线边框。聚焦态将边框加粗至白色。
cookie-consent-card — 主页上可见的右侧 cookie 横幅卡片。背景 {colors.canvas} 带 1px 细线，圆角 {rounded.none}，内边距 {spacing.lg}（24px）。正文 {typography.body-sm}（14px / 300）——法律文字也用 Light 字重。底部堆叠两个按钮：主要描边 + 文字链接。
签名组件
m-stripe-divider — 4px 水平条纹，承载 M 三色（{colors.m-blue-light} → {colors.m-blue-dark} → {colors.m-red}）。作为赛车 chrome 的分隔、品牌识别板块之间，以及类别 tab 上的悬停指示器。系统中最具辨识度的非字体元素。
cta-band-photo — 接近页脚的 "Drive an M" CTA 板块，承载车辆过弯的全幅摄影，居中标题 {typography.display-md} + 下方 {component.button-primary-outline}。垂直内边距 80px。CTA 通过全幅摄影而非 chrome 继承页面其余部分的编辑重量。
页脚
footer — 关闭每个页面的黑色页脚。背景 {colors.canvas}，文字 {colors.body}。桌面端 4 列链接列表，覆盖 BMW M Models / BMW M Lifestyle / Owners / Company。垂直内边距 64px。底行承载 BMW 企业免责声明 {typography.caption} + 语言选择器。页脚从不反转——即便正文可能过渡，也保持黑色。
推荐与避免
推荐
- 用全幅汽车摄影锚定每个页面。车辆就是品牌电压；chrome 退后。
- 大写显示标题使用
{typography.display-xl}或{typography.display-lg}。句式小写显示读起来偏离品牌。 - 配对粗体显示（700）与轻正文（300）。字重对比就是编辑签名。
- 将 M 三色条纹保留给品牌识别时刻——字标点缀、赛车 chrome、车型徽标。绝不作为按钮填充或表面。
- 默认使用
{rounded.none}（0px）。{rounded.full}仅保留给圆形图标按钮。 - 大写带字距标签的字距为 1.5px。"机械加工"的感觉不可妥协。
- 主要编辑板块之间使用
{spacing.section}（96px）保证栅格对齐的垂直节奏。
避免
- 不要在 M 三色（
{colors.m-blue-light}/{colors.m-blue-dark}/{colors.m-red}）与传承{colors.bmw-blue}之外引入品牌色。 - 不要加粗正文。正文保持 300（Light）——提到 400 或 500 会让页面感觉是营销高歌猛进而非欧式工程化。
- 不要使用圆角按钮。矩形轮廓就是品牌。圆角读起来像消费级科技，而非赛车。
- 不要在首屏文字背后放置渐变背景。首屏就是摄影——页面底色保持纯黑，摄影提供深度。
- 不要在两个连续的板块中重复相同的表面模式。节奏：摄影板块 → 规格表 → 摄影板块 → 杂志栅格 → 摄影板块。两个纯文本板块相连读起来像企业站。
- 不要将 M 条纹用作按钮填充。条纹是分隔 / 点缀——从不作为动作表面。
- 不要将按钮标签上的大写字距收紧到 1.5px 以下——字距是让它们感觉"机械加工"的关键。
响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Mobile | < 768px | 汉堡导航；首屏 h1 从 80 缩放到 48px；demo 栅格 1 列；照片卡片堆叠为全宽；页脚 4 列 → 1 列 |
| Tablet | 768–1024px | 顶部导航保持水平但收紧；2 列卡片栅格；规格表 2 列 |
| Desktop | 1024–1440px | 完整顶部导航；3 列卡片栅格；规格表 4 列 |
| Wide | > 1440px | 与桌面端相同，增加更多呼吸空间；最大内容 1440px |
触控目标
{component.button-primary}至少渲染为 48 × 48px——满足 WCAG AAA。{component.button-icon}与{component.carousel-arrow}正好 48 × 48——轻松高于 44 × 44 最低要求。{component.text-input}高度为 48px。- 类别 tab 以纯文字标签渲染，带 12px 垂直内边距；有效点击区域与周围间距一起达到 44px。
折叠策略
- 顶部导航在 < 768px 折叠为汉堡面板；菜单以全屏黑色叠层打开，顶部带 M 三色条纹。
- 摄影在每个断点上保持全幅——从不折叠为带边距的容器。
- 卡片栅格减列而非缩放卡片；摄影保留原生长宽比。
- 规格表从 4 列折叠为 2 列再 1 列；规格数值无论列数都保持
{typography.display-sm}。 - M 三色条纹在所有断点上保持 4px 高度。
图片行为
- 首屏摄影响应式裁切——桌面端更宽裁切，移动端纵向裁切。
- 生活方式与赛车照片保留原生长宽比；系统从不信箱化或上下黑边化。
- M 字标 + 三色标志按视口宽度按比例缩放。
迭代指南
- 一次专注于一个组件。直接引用其 YAML 键（
{component.hero-photo-band}、{component.spec-cell}）。 - 新组件默认为
{rounded.none}（0px）。仅当为圆形图标按钮时使用{rounded.full}。 - 变体（
-active、-disabled）作为独立条目存于components:中。 - 所有地方使用
{token.refs}——绝不内联十六进制。 - 绝不记录悬停态。仅记录默认与激活/按下态。
- 显示标题保持大写 700；正文保持句式小写 300。绝不模糊对比。
- M 三色仅为品牌识别——绝不扩展为"首要动作"系统令牌。
- 当对强调方式存疑时：先加大摄影再加大字体。
已知缺口
- dembrandt 频次分析器将白色文字（出现 955 次）捕获为最高频令牌。黑色画布由截图推断——dembrandt 的正文背景采样未将其作为顶级调色板条目暴露，但页面明确是白字黑底。
- 确切的 M 三色断点从公开 BMW 品牌指南记录；截图中条纹作为小元素出现，但该分辨率下的像素采样无法可靠区分 #0066b1 与 #1c69d4。将记录值视为基于 BMW Design Works 公开品牌规范的权威值。
- BMW Type Next Latin 超出 Light（300）与 regular（700）的字重轴值未记录——仅记录了截图中观察到的静态字重。
- 动画与过渡时长（照片轮播切换、悬停揭示效果、配置器交互）不在范围内。
{component.text-input}默认之外的表单校验状态未提取——错误 / 成功输入变体需要配置器或订单流程才能确认。- 配置器表面（带颜色 / 轮毂 / 内饰选择器的车辆构建页面）不在分析的 URL 集合中；其色样栅格、对比面板与价格摘要卡片未在此记录。
- 在捕获的截图中，cookie 同意叠层遮挡了首页首屏部分内容；次级首屏处理（不同车型循环于首屏板块）可能携带未被捕获的变化。