← 返回全部设计

宝马 BMW

BMW汽车

豪华汽车。暗色高级表面,精准的德式工程美学

实时预览

配色 Colors · 25

primary
#1c69d4
primary-active
#0653b6
primary-disabled
#d6d6d6
ink
#262626
body
#3c3c3c
body-strong
#1a1a1a
muted
#6b6b6b
muted-soft
#9a9a9a
hairline
#e6e6e6
hairline-strong
#cccccc
canvas
#ffffff
surface-soft
#f7f7f7
surface-card
#fafafa
surface-strong
#ebebeb
surface-dark
#1a2129
surface-dark-elevated
#262e38
on-primary
#ffffff
on-dark
#ffffff
on-dark-soft
#bbbbbb
m-blue-light
#0066b1
m-blue-dark
#1c69d4
m-red
#e22718
success
#22c55e
warning
#f59e0b
error
#dc2626

字体阶梯 Typography · 13

display-xl
64px · 700
永远相信美好的事情即将发生 Ag
display-lg
48px · 700
永远相信美好的事情即将发生 Ag
display-md
32px · 700
永远相信美好的事情即将发生 Ag
display-sm
24px · 700
永远相信美好的事情即将发生 Ag
title-lg
20px · 700
永远相信美好的事情即将发生 Ag
title-md
18px · 700
永远相信美好的事情即将发生 Ag
title-sm
16px · 700
永远相信美好的事情即将发生 Ag
body-md
16px · 300
永远相信美好的事情即将发生 Ag
body-sm
14px · 300
永远相信美好的事情即将发生 Ag
caption
12px · 400
永远相信美好的事情即将发生 Ag
label-uppercase
13px · 700
永远相信美好的事情即将发生 Ag
button
14px · 700
永远相信美好的事情即将发生 Ag
nav-link
14px · 400
永远相信美好的事情即将发生 Ag

圆角 Radius · 7

none
0px
xs
2px
sm
4px
md
8px
lg
12px
pill
9999px
full
9999px

间距 Spacing · 8

xxs
4px
xs
8px
sm
12px
md
16px
lg
24px
xl
32px
xxl
48px
section
80px

按钮预览 Buttons

标签 Badge

组件规范 Components · 26

top-nav
backgroundColor
#ffffff
textColor
#262626
typography
{typography.nav-link}
height
64px
button-primary
backgroundColor
#1c69d4
textColor
#ffffff
typography
{typography.button}
rounded
0px
padding
14px 32px
height
48px
button-primary-active
backgroundColor
#0653b6
textColor
#ffffff
rounded
0px
button-primary-disabled
backgroundColor
#d6d6d6
textColor
#6b6b6b
rounded
0px
button-secondary
backgroundColor
#ffffff
textColor
#262626
typography
{typography.button}
rounded
0px
padding
13px 31px
height
48px
button-secondary-on-dark
backgroundColor
transparent
textColor
#ffffff
typography
{typography.button}
rounded
0px
padding
13px 31px
button-text-link
backgroundColor
transparent
textColor
#262626
typography
{typography.label-uppercase}
text-link
backgroundColor
transparent
textColor
#262626
typography
{typography.body-md}
hero-band-dark
backgroundColor
#1a2129
textColor
#ffffff
typography
{typography.display-xl}
padding
80px
hero-photo-band
backgroundColor
#ffffff
textColor
#262626
typography
{typography.display-lg}
padding
80px
model-card
backgroundColor
#ffffff
textColor
#262626
typography
{typography.title-md}
rounded
0px
padding
24px
model-card-photo
backgroundColor
#fafafa
rounded
0px
feature-photo-card
backgroundColor
#ffffff
textColor
#262626
typography
{typography.title-md}
rounded
0px
padding
24px
spec-cell
backgroundColor
transparent
textColor
#262626
typography
{typography.display-sm}
rounded
0px
padding
24px
inventory-card
backgroundColor
#ffffff
textColor
#262626
typography
{typography.title-sm}
rounded
0px
padding
16px
filter-chip
backgroundColor
#ffffff
textColor
#262626
typography
{typography.caption}
rounded
0px
padding
8px 14px
filter-chip-active
backgroundColor
#262626
textColor
#ffffff
rounded
0px
configurator-option-tile
backgroundColor
#ffffff
textColor
#262626
typography
{typography.body-md}
rounded
0px
padding
16px 24px
configurator-option-tile-selected
backgroundColor
#ffffff
textColor
#262626
rounded
0px
padding
15px 23px
text-input
backgroundColor
#ffffff
textColor
#262626
typography
{typography.body-md}
rounded
0px
padding
14px 16px
height
48px
cookie-consent-card
backgroundColor
#ffffff
textColor
#3c3c3c
typography
{typography.body-sm}
rounded
0px
padding
24px
category-tab
backgroundColor
transparent
textColor
#6b6b6b
typography
{typography.label-uppercase}
rounded
0px
category-tab-active
backgroundColor
transparent
textColor
#262626
typography
{typography.label-uppercase}
rounded
0px
m-stripe-divider
backgroundColor
transparent
rounded
0px
cta-band-photo
backgroundColor
#1a2129
textColor
#ffffff
typography
{typography.display-md}
padding
80px
footer
backgroundColor
#f7f7f7
textColor
#3c3c3c
typography
{typography.body-sm}
padding
64px

设计规范


version: alpha name: BMW-design-analysis description: BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. BMW Type Next Latin sets the entire hierarchy on two weights — heavy 700 display and Light 300 body. Configuration and reservation flows ride a card-based 4-up grid, where each card holds a model render, a name, and a "Learn More" link.

colors: primary: "#1c69d4" primary-active: "#0653b6" primary-disabled: "#d6d6d6" ink: "#262626" body: "#3c3c3c" body-strong: "#1a1a1a" muted: "#6b6b6b" muted-soft: "#9a9a9a" hairline: "#e6e6e6" hairline-strong: "#cccccc" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#fafafa" surface-strong: "#ebebeb" surface-dark: "#1a2129" surface-dark-elevated: "#262e38" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#bbbbbb" m-blue-light: "#0066b1" m-blue-dark: "#1c69d4" m-red: "#e22718" success: "#22c55e" warning: "#f59e0b" error: "#dc2626"

typography: display-xl: fontFamily: "'BMW Type Next Latin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0 display-lg: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0 display-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0 display-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 title-lg: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.55 letterSpacing: 0 caption: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.5px label-uppercase: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 1.5px textTransform: uppercase button: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.5px nav-link: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.3px

rounded: none: 0px xs: 2px sm: 4px md: 8px lg: 12px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 80px

components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 14px 32px height: 48px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.none}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.none}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px height: 48px button-secondary-on-dark: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-uppercase}" text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" hero-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 80px hero-photo-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 80px model-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px model-card-photo: backgroundColor: "{colors.surface-card}" rounded: "{rounded.none}" feature-photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px spec-cell: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-sm}" rounded: "{rounded.none}" padding: 24px inventory-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.none}" padding: 16px filter-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 8px 14px filter-chip-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" configurator-option-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 16px 24px configurator-option-tile-selected: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 15px 23px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 14px 16px height: 48px cookie-consent-card: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 24px category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.label-uppercase}" rounded: "{rounded.none}" category-tab-active: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-uppercase}" rounded: "{rounded.none}" m-stripe-divider: backgroundColor: transparent rounded: "{rounded.none}" cta-band-photo: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" padding: 80px footer: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px

概述

BMW 企业站点承载着远比其赛车高歌猛进的表亲 BMW M 更为克制、企业化的汽车界面。氛围是浅色:{colors.canvas}(#ffffff)是基础表面,{colors.surface-card}(#fafafa)承载浅灰卡片底板,深墨蓝 {colors.surface-dark}(#1a2129)仅出现在首屏板块内部——每页一个,框住主车型渲染图。

字体使用 BMW 授权的 BMW Type Next Latin,仅两个字重:粗体 700(显示 + 按钮 + 导航)与 Light 300(正文 + 次级文字)。这种对比——粗体显示紧贴纤细段落——是编辑型签名,传递品牌的"欧式工程化"声音。字重 500 刻意缺席;字重 400 仅出现在说明与导航链接的中性工具语境中。

品牌动作色——BMW 企业蓝{colors.primary} — #1c69d4)——在每个主要 CTA 上单独工作——按钮为矩形、0px 圆角,配白色文字。站点在页面节奏中循环使用蓝色按钮 + 深墨蓝首屏的组合。M 三色条纹({colors.m-blue-light}{colors.m-blue-dark}{colors.m-red})仅出现在赛车语境中,以及 M 车型徽标/分隔线中——绝不进入企业站点的主语言。

配置与预订流程在同系统之上叠加了一个经销商侧的库存 UI——筛选 chip、车型卡片、价格表——但字体与颜色保持一致;仅密度提升。

关键特征:

  • 浅色 {colors.canvas} 是基础表面;深墨蓝 {colors.surface-dark} 仅出现在首屏板块内部——页面节奏依赖对比。
  • BMW 企业蓝({colors.primary} — #1c69d4)是唯一的首要动作色。
  • BMW Type Next Latin:字重 700 显示 vs 字重 300 正文是签名。
  • 按钮为矩形、0px 圆角——企业方言,区别于 M 的更运动化圆角。
  • 车型卡片以 4 列或 5 列栅格运行,无细线边框或仅最小边框——仅白底板 + 照片 + 标题。
  • 摄影(车型渲染图)静置于环境中,无阴影——深度完全来自色块对比。
  • M 三色条纹仅出现在 M 车型语境中——不是企业语言的一部分。
  • 板块节奏在 {spacing.section}(80px)保持,用于每个主要板块。

配色

品牌与点缀

  • BMW Blue(Primary){colors.primary} — #1c69d4):唯一的品牌动作色。所有主要 CTA、"Learn More" 链接前缀(蓝色文字)、导航链接激活态。按下时切换为 {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 三色条纹——在企业站点上仅出现在 M 车型页与 "M" 徽标上。从不用作 CTA 颜色。

表面

  • Canvas{colors.canvas} — #ffffff):默认页面表面。
  • Surface Soft{colors.surface-soft} — #f7f7f7):页脚与子导航板块的柔灰。
  • Surface Card{colors.surface-card} — #fafafa):车型卡片照片块后的浅底板。
  • Surface Strong{colors.surface-strong} — #ebebeb):稍重一些的灰色,用作板块分隔。
  • Surface Dark{colors.surface-dark} — #1a2129):首屏板块与大深色 CTA 的深墨蓝。不是纯黑——带暖色调。
  • Surface Dark Elevated{colors.surface-dark-elevated} — #262e38):再亮一档,用于深色首屏之上的嵌套卡片。

细线

  • Hairline{colors.hairline} — #e6e6e6):1px 分隔线——输入框描边、配置器卡片描边、表格分隔。
  • Hairline Strong{colors.hairline-strong} — #cccccc):更显眼的 1px 描边——禁用次要按钮、强调表格边框。

文本

  • Ink{colors.ink} — #262626):所有显示与主要文字。不是纯黑——在摄影上柔和。
  • Body{colors.body} — #3c3c3c):默认正文。
  • Body Strong{colors.body-strong} — #1a1a1a):强调段落与引子文字。
  • Muted{colors.muted} — #6b6b6b):页脚链接、面包屑、说明。
  • Muted Soft{colors.muted-soft} — #9a9a9a):禁用文字、小字法律。
  • On Primary{colors.on-primary} — #ffffff):蓝色按钮上的白字。
  • On Dark{colors.on-dark} — #ffffff):深色首屏板块上的白字。
  • On Dark Soft{colors.on-dark-soft} — #bbbbbb):深色板块上次级文字的略柔白色。

语义

  • Success{colors.success} — #22c55e):确认消息与"可用"指示。
  • Warning{colors.warning} — #f59e0b):警告横幅。
  • Error{colors.error} — #dc2626):校验错误。

字体排版

字体族

系统使用 BMW Type Next Latin,两种切面:regular(显示 + UI 标签)与 BMW Type Next Latin Light(正文 + 次级文字)。回退栈:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

显示/正文的划分是功能性的:

  • BMW Type Next Latin(700)→ 显示标题、按钮标签、导航链接
  • BMW Type Next Latin Light(300)→ 段落、描述性文案
  • BMW Type Next Latin(400)→ 说明、中性导航链接语境

这种三分法镜像了 BMW M 的——企业与 M 子品牌共享同一字体 DNA;仅字重/字号比例不同。

层级

令牌字号字重行高字距用途
{typography.display-xl}64px7001.050首屏 h1("iX3"、车型名)
{typography.display-lg}48px7001.10板块标题
{typography.display-md}32px7001.150子板块标题
{typography.display-sm}24px7001.250CTA 条幅标题
{typography.title-lg}20px7001.30卡片组标题
{typography.title-md}18px7001.40车型卡片标题、引子段落
{typography.title-sm}16px7001.40库存卡片标题、列表标签
{typography.body-md}16px300(Light)1.550默认正文——BMW Type Next Latin Light
{typography.body-sm}14px300(Light)1.550页脚正文、小字
{typography.caption}12px4001.40.5px照片说明、元信息
{typography.label-uppercase}13px7001.31.5px"LEARN MORE" 内联链接、类别 tab
{typography.button}14px7001.00.5px标准 CTA 按钮标签
{typography.nav-link}14px4001.40.3px顶部导航菜单项

设计原则

  • 700/300 对比 是编辑型签名。字重 500 在系统中缺席。
  • 无负字距——BMW Type Next Latin 在宽体字上工作,所以字距保持默认值。Apple/Cal.com 风格的紧凑读起来偏离品牌。
  • 大写内联链接——"LEARN MORE" 风格 CTA 以大写配合 1.5px 字距运行。"机械精度"的声音。
  • 字重 400 处于狭窄区间——仅说明与导航链接,都是中性工具角色。

字体替代说明

BMW Type Next Latin 是 BMW 授权字体。开源替代:

  • Inter(可变字体)——字重 700/300 的良好匹配。保持 letter-spacing 为 0.0em。
  • Saira Condensed——略更压缩的 BMW Type 感受。

布局

间距系统

  • 基础单位: 8px。
  • 令牌: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 80px。
  • 板块内边距: {spacing.section}(80px)用于每个主要编辑板块。
  • 卡片内边距: {spacing.lg}(24px)用于车型与功能卡片。

栅格与容器

  • 最大内容宽度: 约 1440px 居中对齐。
  • 编辑型正文: 单 12 栏栅格。
  • 车型卡片栅格: 桌面端 4 列或 5 列,平板 2 列,移动端 1 列。
  • 配置器库存栅格: 3 列筛选行 + 4 列车型卡片,紧凑布局。

留白哲学

BMW 的留白策略比 BMW M 赛车风的"grenadier"更紧——企业侧更工具驱动。板块节奏为 80px(而非 M 的 96px)。卡片内边距为 24px(而非 M 的 32px)。页面更密集、更经销商功能化。

层次与深度

层级处理用途
平面无阴影、无边框正文、顶部导航、页脚、首屏板块
柔细线1px {colors.hairline} 边框配置器选项瓦片、表格分隔
卡片表面{colors.surface-card} 背景——无阴影车型卡片照片底板
摄影边缘到边缘摄影首屏板块、车型渲染图

系统从不使用投影。深度完全来自(a)色块对比(浅色画布 vs 深色首屏)以及(b)摄影主体 + 光线。

装饰性深度

  • m-stripe-divider——一条 4px 高的水平三色条纹({colors.m-blue-light}{colors.m-blue-dark}{colors.m-red})。仅在 M 车型语境、赛车徽标,或作为 M 相关板块分隔中。不属于企业主流。
  • 摄影深度——全幅车辆摄影(光线 + 主体)完成 chrome 否则会做的工作。

形态

圆角分级

令牌数值用途
{rounded.none}0px每个按钮、卡片、输入框、配置器 chip——主导半径
{rounded.xs}2px极小徽标、罕见
{rounded.sm}4px小型内联按钮(罕见)
{rounded.md}8px仅移动端的折叠卡片(罕见)
{rounded.lg}12px极罕见——模态/对话框角
{rounded.pill}9999px某些语境下的筛选 chip(罕见)
{rounded.full}9999px / 50%头像、圆形图标按钮

圆角层级是二元的:一切都矩形,只有图标按钮为圆形。明显偏离 Apple 或 Cal.com 软圆角的 SaaS 方言——更接近 BMW 企业汽车的"工程化精度"声音。

摄影几何

  • 首屏摄影全幅,16:9 或 21:9 电影比例。
  • 车型卡片照片 16:10,边缘到边缘,{rounded.none} 圆角。
  • 配置器车辆渲染图置于白色工作室背景上,全剪影可见。

组件

顶部导航

top-nav — 一条白色粘性导航条,固定在页面顶部。64px 高,{colors.canvas} 背景。左侧:BMW 圆形徽标;中间:主要水平菜单(Models、Next Generation、Pre-Owned、Dealers、Test Drive);右侧:购物车图标、语言选择器、个人资料。菜单项以 {typography.nav-link}(14px / 400 / 0.3px 字距)渲染。

按钮

button-primary — 标志性的主要 CTA。背景 {colors.primary}(BMW Blue #1c69d4),文字 {colors.on-primary},字体 {typography.button}(BMW Type Next Latin 14px / 700 / 0.5px 字距),内边距 14px × 32px,高度 48px,圆角 {rounded.none}(0px——矩形)。按下态:button-primary-active 切换为 {colors.primary-active}

button-secondary — 带细线描边的白色按钮。背景 {colors.canvas},文字 {colors.ink},1px {colors.hairline-strong} 边框,同样的内边距 + 高度 + 半径。

button-secondary-on-dark — 用于深色首屏板块。背景透明,文字 {colors.on-dark},1px {colors.on-dark} 边框,同样的矩形形态。

button-text-link — 内联大写带字距链接。无背景,文字 {colors.ink},字体 {typography.label-uppercase}(13px / 700 / 1.5px 字距)。读起来如 "LEARN MORE",以 chevron 收尾。

text-link — 正文文案中的内联链接。{colors.ink} 文字,默认无下划线;按语境加下划线。

卡片与容器

hero-band-dark — 全幅深墨蓝首屏。背景 {colors.surface-dark},文字 {colors.on-dark},垂直内边距 {spacing.section}(80px)。居中:车型名字体 {typography.display-xl}(64px / 700)+ 副标题 + 车辆渲染图(右对齐或下方)。单个 {component.button-primary}(蓝色)或 {component.button-secondary-on-dark}

hero-photo-band — 浅色画布车型展示板块。背景 {colors.canvas},文字 {colors.ink}。车辆渲染图占主要区域;右或下方,标题 + 两个链接 CTA + 子标题。

model-card — 用于首页的 4 列或 5 列车型卡片栅格("BMW iX3"、"BMW iX"、"BMW 5 Series")。背景 {colors.canvas},圆角 {rounded.none},内边距 {spacing.lg}(24px)。内容:顶部车型渲染图({component.model-card-photo}{colors.surface-card} 上),下方车型名字体 {typography.title-md}(18px / 700),一行 tagline {typography.body-sm}(14px / 300),以及 {component.button-text-link}("LEARN MORE ›")。

model-card-photo — 卡片中的照片底板。背景 {colors.surface-card}(#fafafa——柔灰),圆角 {rounded.none},车辆渲染图全剪影。零内边距——照片边缘到边缘。

feature-photo-card — 功能/生活方式卡片。背景 {colors.canvas},内边距 {spacing.lg}。顶部 16:9 照片,下方 {typography.title-md} 标题 + 正文摘录。

spec-cell — 技术规格单元(车型详情页)。透明背景,由细线分隔。顶部数值({typography.display-sm} 24px / 700),下方标签({typography.label-uppercase})。

库存与配置器

inventory-card — 经销商库存页上每辆车的卡片。背景 {colors.canvas},内边距 {spacing.md}(16px),圆角 {rounded.none}。顶部车辆照片,下方车型 + 变体名 + 价格 + "View" 链接。

filter-chip + filter-chip-active — 库存筛选 chip(车型、年份、价格区间)。非激活:背景 {colors.canvas},1px {colors.hairline-strong} 边框,文字 {colors.ink},字体 {typography.caption}。激活:背景 {colors.ink},文字 {colors.on-dark}。内边距 8px × 14px,半径 {rounded.none}

configurator-option-tile + configurator-option-tile-selected — 配置器选择单元(颜色、轮毂、内饰)。非激活:背景 {colors.canvas},1px 细线。选中:2px {colors.primary} 边框。内边距 16px × 24px,半径 {rounded.none}

输入与表单

text-input — 标准文本输入框。背景 {colors.canvas},文字 {colors.ink},字体 {typography.body-md},圆角 {rounded.none}(0px),内边距 14px × 16px,高度 48px,1px 细线边框。聚焦时边框加粗至墨色。

cookie-consent-card — Cookie 横幅。背景 {colors.canvas},1px 细线,内边距 {spacing.lg}(24px),{typography.body-sm}(14px / 300——法律文案中也用 Light)。

Tab / 标签

category-tab + category-tab-active — 类别子导航。非激活:透明 + {colors.muted} 大写标签。激活:透明 + {colors.ink} 大写标签 + 2px 墨色下划线。垂直 12px 内边距,无水平半径。

品牌签名

m-stripe-divider — 一条 4px 高的水平三色条纹({colors.m-blue-light}{colors.m-blue-dark}{colors.m-red})。仅在 M 车型语境、赛车徽标,或作为 M 相关板块分隔中出现。企业主流中缺席;在 M 车型详情页与 M Performance 徽标上充当内联分隔角色。

CTA / 页脚

cta-band-photo — 接近页脚的 "Discover the New iX3" 风格板块。背景 {colors.surface-dark} 带全幅车辆照片。居中标题字体 {typography.display-md}(32px / 700)+ 单个 {component.button-secondary-on-dark}。80px 内边距。

footer — 收束的柔灰页脚。背景 {colors.surface-soft}(#f7f7f7——非纯白——柔灰),文字 {colors.body}。4 列链接列表:Models / Services / Dealers / About。垂直内边距 64px。下方为版权行 {typography.body-sm} + {colors.muted}

推荐与避免

推荐

  • 每个页面都以 {colors.canvas}(纯白)为底;将 {colors.surface-dark} 仅保留给首屏板块。
  • 将主要 CTA 配对为 {colors.primary}(BMW Blue)+ {colors.on-primary} 白字 + {rounded.none} 0px 圆角——企业签名。
  • 显示标题使用 BMW Type Next Latin 700,正文使用 Light 300。对比不可妥协。
  • 使用大写带字距的链接如 "LEARN MORE" 作为内联 CTA。
  • 将车型卡片照片置于 {colors.surface-card} 上,标题置于下方——BMW 企业标准模式。
  • 板块节奏保持 {spacing.section}(80px)——比 BMW M 的 96px 更紧。
  • M 三色条纹保留给 M 车型语境与赛车分隔。

避免

  • 除蓝色外不要添加品牌色——BMW Blue 是唯一的首要动作色。
  • 不要使用胶囊或圆角按钮——{rounded.none}(0px)矩形就是品牌按钮。
  • 不要把显示字重降到 500——系统使用 700 / 400 / 300;500 缺席。
  • 不要加粗正文——Light 300 是 BMW 企业编辑声音。
  • 不要给卡片加投影——深度来自照片 + 色块对比。
  • 不要在两个连续的板块中重复相同的表面模式——浅色 → 深色首屏 → 浅色 → 浅色功能 → 深色 CTA → 浅色页脚的轮换是必需的。
  • 不要将 M 三色条纹用作 CTA 填充——仅用作分隔/点缀角色。
  • 不要在同一页面混用语言——UI 语言必须保持一致。

响应式行为

断点

名称宽度关键变化
Mobile< 768px汉堡导航;首屏 h1 64→40px;车型卡片栅格 1 列;配置器筛选 chip 2 列;页脚 4 列 → 1 列
Tablet768–1024px顶部导航收窄,次级菜单隐藏在 "More" 下;车型卡片 2 列;库存 2 列
Desktop1024–1440px完整顶部导航;4 列或 5 列车型卡片栅格;库存 3 列;完整配置器 UI
Wide> 1440px与桌面端相同,内容固定 1440px;栏间距吸收剩余

触控目标

  • {component.button-primary} 最小 48 × 48px——高于 WCAG AAA(44 × 44)。
  • {component.text-input} 高度 48px。
  • 类别 tab 以 12px 垂直内边距运行,有效点击区域 > 44px。

折叠策略

  • 顶部导航在 768px 以下折叠为汉堡;菜单以全屏面板打开。
  • 首屏板块的内部布局折叠为单列。
  • 车型卡片栅格 4/5 列 → 2 列 → 1 列。
  • 配置器筛选 chip 行在移动端水平滚动。
  • M 三色条纹在所有断点上保持 4px 高度。

图片行为

  • 车型渲染图在每个断点上缩放,保持原生长宽比。
  • 首屏摄影可能在移动端切换为更纵向的裁切(艺术指导)。
  • 库存车辆照片可能从 16:9 转为移动端的 4:3。

迭代指南

  1. 一次专注于一个组件。直接引用其 YAML 键({component.model-card}{component.button-primary})。
  2. 新组件默认为 {rounded.none}(0px)。仅对圆形图标按钮使用 {rounded.full}
  3. 变体(-active-disabled-selected)作为独立条目存于 components: 块内。
  4. 所有地方使用 {token.refs}——绝不内联十六进制。
  5. 永不记录悬停态。仅记录默认与激活/按下态。
  6. 显示标题保持 BMW Type Next Latin 700;正文保持 Light 300;三件套固定不变。
  7. UI 字符串保持单一语言——匹配页面区域设置。

已知缺口

  • BMW Type Next Latin 是 BMW 授权字体,不作为公共 web 字体发布;Inter 在字重 700/300 下被记录为替代。
  • 动画与过渡时长(配置器颜色切换、车型卡片悬停揭示)不在此处范围内。
  • {component.text-input} 聚焦之外的表单校验状态未提取——错误/成功状态需要专门的表单页。
  • 经销商库存子域名与主企业站点共享字体与颜色;仅 UI 密度上升(筛选、表格、价格)。
  • Cookie 同意叠层可能遮挡部分首屏——首屏板块的主要内容可能未被完整捕获。
  • M 三色条纹在此企业站点上出现频率不高;完整赛车语境在 BMW M 站点上。