布加迪 Bugatti

version: alpha name: Bugatti-design-analysis description: An austere luxury-automotive interface that uses near-pure black canvas, white uppercase letterspaced display, and full-bleed automotive photography as the only voltage. The system runs three custom Bugatti typefaces — Bugatti Display, Bugatti Text Regular, and Bugatti Monospace — and combines them at modest weights with wide tracking to feel European-engineered, hyper-minimal, and quietly expensive. There is no accent color, no decorative element, no chrome — only photography, typography, and the brand wordmark.

colors: primary: "#ffffff" ink: "#ffffff" body: "#cccccc" body-strong: "#e6e6e6" muted: "#999999" muted-soft: "#666666" hairline: "#262626" hairline-strong: "#3a3a3a" canvas: "#000000" surface-soft: "#0d0d0d" surface-card: "#141414" surface-elevated: "#1f1f1f" on-primary: "#000000" on-dark: "#ffffff" on-photo: "#ffffff" link: "#c3d9f3" warning: "#d4a017" success: "#5fa657"

typography: display-xl: fontFamily: "Bugatti Display, sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.1 letterSpacing: 4px display-lg: fontFamily: "Bugatti Display, sans-serif" fontSize: 48px fontWeight: 400 lineHeight: 1.15 letterSpacing: 3px display-md: fontFamily: "Bugatti Display, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 2px display-sm: fontFamily: "Bugatti Display, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 1.5px wordmark: fontFamily: "Bugatti Display, serif" fontSize: 14px fontWeight: 400 lineHeight: 1 letterSpacing: 6px title-md: fontFamily: "Bugatti Display, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.3 letterSpacing: 1px title-sm: fontFamily: "Bugatti Display, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.3 letterSpacing: 1.5px caption-uppercase: fontFamily: "Bugatti Monospace, ui-monospace, monospace" fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 2px body-md: fontFamily: "Bugatti Text Regular, serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "Bugatti Text Regular, serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "Bugatti Monospace, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1 letterSpacing: 2.5px nav-link: fontFamily: "Bugatti Monospace, ui-monospace, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 2px

rounded: none: 0px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 40px xxl: 64px section: 120px

components: button-primary: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 14px 32px height: 44px button-icon: backgroundColor: transparent textColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 40px text-link: backgroundColor: transparent textColor: "{colors.link}" typography: "{typography.button}" top-nav: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 56px wordmark-display: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.wordmark}" hero-photo-band: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 96px caption-overlay: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.caption-uppercase}" career-callout-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 16px width: 320px model-photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" rounded: "{rounded.none}" newsroom-article-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px career-listing-row: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.title-md}" padding: 24px 0 text-input: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 12px 0 height: 44px spec-cell: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.title-md}" padding: 24px 0 date-pill: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.caption-uppercase}" category-tag: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.caption-uppercase}" cta-band-photo: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" padding: 80px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-sm}" padding: 64px

概述

Bugatti 的营销表面是豪华汽车中最严苛的界面：近乎纯黑的画布（{colors.canvas} — #000000），承载白色大写带字距显示字体与全幅汽车摄影。系统没有点缀色、没有表面卡片装饰、没有阴影、没有渐变、没有 chrome——只有摄影、字体与品牌字标。这一品类中的每个其他豪华汽车站点（BMW M、Aston Martin、Lamborghini）都使用某种形式的点缀色或签名元素；Bugatti 一概不用。空白、摄影与精确字距的 Bugatti Display 标题就是品牌。

系统运行三种定制 Bugatti 字体：Bugatti Display（显示标题、"BUGATTI" 字标、全大写宽字距）、Bugatti Text Regular（正文段落，一款衬线文字字体），以及 Bugatti Monospace（按钮标签、导航、说明、日期——任何精度与机械感重要之处）。这种划分是刻意且不可打破的：绝不将 Bugatti Text 用在按钮里，绝不将 Bugatti Monospace 用在段落里。

显示尺寸使用字重 400（regular）——从不用粗体。视觉强调来自字号与字距，而非字重。字标的字距为 6px；显示标题 2–4px；大写标签 2–2.5px。紧凑字距是品牌违规。宽字距营造出"工程化精度"的氛围，是其他任何豪华制造商都无法比拟的。

关键特征：

• 纯黑画布（{colors.canvas} — #000000）配白色文字。系统没有浅色模式。
• 三种定制 Bugatti 字体：Display（大写标题 + 字标）、Text Regular（正文衬线）、Monospace（按钮、说明、导航）。
• 所有显示标题为大写带宽字距（2–4px）。正文保持句式小写与标准字距。
• 没有点缀色。系统中唯一的非单色颜色是 {colors.link}（#c3d9f3）——一种去饱和的冰蓝，用于内联锚链接，即便如此也很少出现。
• 按钮为胶囊形（{rounded.pill}），透明背景与 1px 白色描边。Bugatti 是唯一将主要 CTA 完全透明的豪华汽车品牌。
• 摄影是唯一的深度元素。无投影。无渐变。无卡片表面。表面卡片至多是 {colors.surface-card}（#141414）——一个几乎与黑无异的色调。
• 板块节奏慷慨——主要板块之间 {spacing.section}（120px），比大多数营销站点更长，因为 Bugatti 的页面主要是摄影加最小文字密度。

配色

品牌与点缀

• Primary（{colors.primary} — #ffffff）：唯一的品牌色。黑色画布上的白色文字与白色 CTA 描边。
• Link（{colors.link} — #c3d9f3）：系统中唯一的非单色颜色——一种去饱和的冰蓝，用于内联锚链接，且很少用于聚焦态。Bugatti 的品牌纪律严苛到这一单一令牌实质上是黑白之外整个色彩词典的全部。

表面

• Canvas（{colors.canvas} — #000000）：每个表面的默认页面底色。纯黑。
• Surface Soft（{colors.surface-soft} — #0d0d0d）：与黑几乎无差的色调，用于规格表行与密集数据区段。
• Surface Card（{colors.surface-card} — #141414）：卡片（职业横幅、新闻室文章容器、偶尔的内容卡片）。即便卡片表面也保持近乎黑——无对比跳跃。
• Surface Elevated（{colors.surface-elevated} — #1f1f1f）：再远离黑一档，用于罕见密集页面上的嵌套卡片。
• Hairline（{colors.hairline} — #262626）：1px 分隔色调。可见但安静。用于表格行、正文板块之间、卡片描边周围。
• Hairline Strong（{colors.hairline-strong} — #3a3a3a）：用于输入框下侧（输入框无边框——仅有下划线细线）的更重分隔。

文本

• Ink / On Dark（{colors.on-dark} — #ffffff）：深色画布上所有标题与主要文字。
• Body（{colors.body} — #cccccc）：默认正文字色（略冷于纯白）。用于正文段落。
• Body Strong（{colors.body-strong} — #e6e6e6）：强调正文 / 引子段落。
• Muted（{colors.muted} — #999999）：页脚链接、日期、说明、次级元数据。dembrandt 频次分析确认其为调色板 2（出现 6 次，中等置信度）。
• Muted Soft（{colors.muted-soft} — #666666）：用于极次级文字的二阶静音色（法律免责、版权行）。

语义

• Warning（{colors.warning} — #d4a017）：保留给技术警告亮点（规格、召回通知）。几乎从不出现在营销表面上。
• Success（{colors.success} — #5fa657）：订单确认状态（营销页面罕见）。

字体排版

字体族

系统运行三种定制 Bugatti 字体作为刚性三位一体：

1. Bugatti Display——所有显示标题（h1、h2、h3）、"BUGATTI" 字标、车型铭牌。大写、宽字距。任何视觉强调的默认选择。
2. Bugatti Text Regular——一款衬线文字字体，专用于正文段落、引子段落、车型描述。标准句式小写、无字距。
3. Bugatti Monospace——按钮标签、导航、说明、日期、等宽精度语境。始终大写带 2–2.5px 字距。

这种划分是功能性的且绝对化。按钮里的 Bugatti Display 会破坏"机械精度"的声音；段落里的 Bugatti Monospace 会破坏"工程化优雅"的声音；按钮里的 Bugatti Text 是不可想象的。

回退栈为：Bugatti Display 走 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif；Bugatti Text Regular 走 Garamond, "Times New Roman", serif；Bugatti Monospace 走 ui-monospace, "SF Mono", "Cascadia Mono", monospace。

层级

设计原则

系统从不使用粗体字重。每种 Bugatti 字体都设置为字重 400（regular）。视觉强调来自：

1. 字号——64px 首屏 vs 16px 正文是 4× 层级
2. 字距——6px 字标 vs 0px 正文
3. 大小写——大写显示 vs 句式小写正文
4. 字体族对比——Display vs Text Regular vs Monospace

在任何地方改为字重 700 都会破坏"克制工程化"的氛围，让 Bugatti 读起来像通用豪华模板。

衬线 Bugatti Text Regular 让品牌从全无衬线的豪华阵营（BMW、Aston Martin、Lamborghini 都使用无衬线正文字）中脱颖而出。Bugatti 的衬线正文声音传达文学、克制、慢速阅读的散文——这是品牌的编辑哲学。

字体替代说明

如果 Bugatti Display、Bugatti Text Regular、Bugatti Monospace 都不可用，最接近的开源替代为：

• Bugatti Display → Saira Condensed（可变字体，字重 400），字距 +0.05em
• Bugatti Text Regular → Cormorant Garamond（regular）或 EB Garamond
• Bugatti Monospace → JetBrains Mono 或 IBM Plex Mono（regular 字重）

替换保留三字体族划分，这比精确字体匹配更重要。

布局

间距系统

• 基础单位： 4px。
• 令牌： {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 40px · {spacing.xxl} 64px · {spacing.section} 120px。
• 板块内边距： {spacing.section}（120px）——比大多数营销站点更长，因为 Bugatti 的板块主要是摄影加最小文字。空旷之处框住车辆。
• 卡片内边距： {spacing.lg}（24px）用于新闻室与内容卡片；{spacing.md}（16px）用于职业横幅卡片；首屏摄影板块内 {spacing.xxl}（64px）。
• 栏间距： 2 列栅格卡片之间 {spacing.xl}（40px）——比典型更宽，因为 Bugatti 的栅格稀疏。

栅格与容器

• 最大内容宽度： 约 1280px 居中。首屏摄影板块全幅出血，无最大宽度。
• 编辑型正文： 单 12 栏栅格；摄影板块全幅。
• 新闻室布局： 桌面端 2 列文章栅格，平板+移动端 1 列。
• 职业列表： 单列，80px 行间距。

留白哲学

Bugatti 比任何豪华汽车竞争对手都更激进地使用留白。首页首屏主要是摄影 + 大量留白 + 一句话 + 一个按钮。照片下方的空旷黑色空间是有意的——让车辆呼吸。把留白压缩到"塞更多内容"会破坏品牌的根本契约：少即是多。

层次与深度

系统不使用阴影、玻璃拟态、渐变。深度完全来自摄影（光线、镜头、主体框定）以及黑色画布与最小抬升的 {colors.surface-card} 之间的对比。

装饰性深度

• 无。Bugatti 是唯一没有任何装饰元素的豪华汽车品牌。字标之外，营销站点上没有条纹、徽标或传承标识。

形态

圆角分级

圆角层级是二元的：除按钮外一切矩形，按钮为胶囊。没有 4px、没有 8px、没有 12px 介于其间——那些会感觉"经过设计"而非"经过工程化"。

摄影几何

首屏摄影全幅填充，无圆角。栅格内的照片卡片保留 {rounded.none}（0px）圆角，图像边到边。车型细节镜头使用 16:9 或更宽的电影比例。新闻室缩略图使用 16:9 配 0px 圆角。营销站点上没有任何头像或圆角照片裁切。

组件

顶部导航

top-nav — 一条 56px 高的透明导航条，叠在每个页面顶部的首屏照片上。无填充，无边框。承载左侧 "MENU"，居中的wordmark-display（"BUGATTI" 14px Bugatti Display 配 6px 字距），右侧 "STORE" 加一个小购物袋图标。所有标签 {typography.nav-link}（Bugatti Monospace，12px，2px 字距，大写）。

wordmark-display — "BUGATTI" 字标本身。Bugatti Display 14px，字重 400，6px 字距。系统中最大的字距。在每个断点的导航条中居中。

按钮

button-primary — 标志性的主要 CTA。背景透明，文字 {colors.on-dark}（白色），1px 白色描边，圆角 {rounded.pill}（9999px），内边距 14px × 32px，高度 44px。字体 {typography.button}——Bugatti Monospace，大写，14px，2.5px 字距。透明填充是 Bugatti 独有的——每个其他豪华汽车品牌使用填充或描边加文字位移按钮。Bugatti 的透明胶囊就是按钮。

button-icon — 圆形图标按钮（轮播箭头、分享、语言切换）。40 × 40px，透明背景，白色 1px 描边，圆角 {rounded.full}。与主要按钮同样的仅描边处理。

text-link — {colors.link}（#c3d9f3，系统中唯一的非单色颜色）内联正文链接。默认带下划线。字体继承 {typography.body-md}（Bugatti Text Regular，衬线）。

卡片与容器

hero-photo-band — 全幅黑色板块，带全幅汽车摄影。{typography.display-xl} 的 h1 在照片上方居中对齐，通常在标题下方配一个小 Bugatti Monospace 说明（{typography.caption-uppercase}），更下方是单个 {component.button-primary}。垂直内边距 96px–200px，取决于照片高度。

career-callout-card — 首页首屏照片之上浮动的小型右对齐卡片，带招聘提示（"Are you ready for a new adventure?"）。背景 {colors.surface-card}，圆角 {rounded.none}（0px），内边距 {spacing.md}（16px），宽度 320px。承载顶部小缩略图、正文行，以及 {typography.caption-uppercase} 链接（"EXPLORE OUR OPPORTUNITIES"）。

model-photo-card — 用于车型展示（Tourbillon 页、车型系列栅格）。背景 {colors.canvas}（无卡片表面——仅是黑上的照片），圆角 {rounded.none}。顶部：16:9 或 21:9 车型主镜头。下方：车型名字体 {typography.display-md}（32px Bugatti Display，2px 字距），简短规格行 {typography.caption-uppercase}（11px Bugatti Monospace），{component.text-link}（"DISCOVER"）。

newsroom-article-card — 用于新闻室页（newsroom.bugatti.com）。背景 {colors.canvas} 带细线边框，圆角 {rounded.none}，内边距 {spacing.lg}（24px）。承载 16:9 缩略图、{component.date-pill}（"12. NOVEMBER 2025"），{typography.title-md} 标题，以及 {typography.body-md}（Bugatti Text Regular 衬线）的正文摘录。

career-listing-row — 职业页职位列表的每行。透明背景，垂直 24px 内边距，行间细线分隔。职位标题 {typography.title-md}（Bugatti Display 20px）位于左侧；地点 + 部门 {typography.caption-uppercase} 位于右侧；chevron 箭头（→）位于最右。

spec-cell — 车型详情页（Tourbillon 发动机规格）上的车辆技术规格展示。透明背景，单元间（而非卡片内单元间）有细线分隔。每个规格顶部展示 {typography.title-md} 的数值，下方展示 {typography.caption-uppercase} 的标签。垂直 24px 内边距。

输入与表单

text-input — 深色画布上的标准文本输入框。背景透明，文字 {colors.on-dark}，仅 1px hairline-strong 底部边框（无顶、左、右边框），内边距 12px × 0px，高度 44px。字体 {typography.body-md}（Bugatti Text Regular）。占位文字 {colors.muted}。聚焦时底部边框加粗至白色。

标签与说明

caption-overlay — 摄影叠层说明（如 "HONORING THE OEYRON AND ITS VISIONARY CREATOR"）。在 {typography.caption-uppercase}（Bugatti Monospace，11px，2px 字距，白色）下居中或左对齐叠在摄影上。

category-tag + date-pill — 都以透明内联标签 {typography.caption-uppercase} 渲染，颜色 {colors.muted}。无背景填充，无边框。"标签"就是字体本身。

CTA / 页脚

cta-band-photo — 接近页脚的 "Discover Bugatti" 板块，带 Bugatti 疾速行驶的全幅摄影 + 居中标题 {typography.display-md} + 下方 {component.button-primary}。垂直内边距 80px。通过全幅摄影继承首屏的编辑重量。

footer — 关闭每个页面的黑色页脚。背景 {colors.canvas}，文字 {colors.muted}。桌面端 4 列链接列表，覆盖 Bugatti / Models / Heritage / Connect。垂直内边距 64px。底行承载版权行 {typography.body-sm}（Bugatti Text Regular）。字标在最底部居中对齐。页脚从不反转。

推荐与避免

推荐

• 用全幅汽车摄影锚定每个页面。车辆就是品牌电压；chrome 完全退后。
• 保持所有显示标题为大写 Bugatti Display 配 2–4px 字距。字标获得 6px。
• 标题使用 Bugatti Display，正文使用 Bugatti Text Regular（衬线！），按钮 + 说明 + 导航使用 Bugatti Monospace。三位一体不可打破。
• 保持 {component.button-primary} 透明且 1px 白色描边。透明胶囊就是品牌按钮。
• 在所有地方使用字重 400。粗体破坏品牌声音——系统没有粗体字重角色。
• 主要编辑板块之间使用 {spacing.section}（120px）。留白是品牌的一部分。
• 将 {colors.link}（#c3d9f3）保留给内联锚链接。它是系统中唯一的非单色颜色。

避免

• 不要在 {colors.link} 之外引入任何点缀色。Bugatti 的品牌纪律是绝对单色 + 摄影。添加品牌蓝或品牌红会破坏契约。
• 不要加粗任何字体。系统没有粗体字重——每种字体保持 400。
• 不要填充主要按钮。仅透明 + 描边。纯白按钮读起来偏离品牌。
• 不要压缩板块之间的留白。120px 节奏是编辑节奏的一部分。
• 不要在按钮之外使用圆角。卡片、照片、输入框都保持 0px。圆角卡片读起来像消费级科技，而非豪华工程化。
• 不要收紧显示标题的字距。Bugatti Display 2–4px 字距不可妥协。
• 不要将 Bugatti Display 用在按钮里（用 Bugatti Monospace），或 Bugatti Monospace 用在段落里（用 Bugatti Text Regular）。三字体族划分就是品牌声音。

响应式行为

断点

触控目标

• {component.button-primary} 至少渲染为 44 × 44px（匹配 WCAG AAA）。
• {component.button-icon} 正好 40 × 40px。
• {component.text-input} 高度为 44px。
• 职业列表行有 24px 垂直内边距；有效点击区域加上周围间距达到 44px+。

折叠策略

• 顶部导航在所有断点保持最小（MENU 标签 + 字标 + STORE 标签）。在移动端，标签隐藏在汉堡后，但字标保持居中。
• 首屏摄影在每个断点上保持全幅。照片裁切调整——桌面端更宽裁切，移动端纵向裁切。
• 首页的职业横幅卡片在 < 768px 隐藏（仅为桌面端浮动元素）。
• 2 列新闻室栅格在 < 768px 折叠为 1 列。
• 规格单元从 4 列重排为 2 列再 1 列；无论列数数值都保持相同显示尺寸。

图片行为

• 首屏摄影响应式裁切——桌面端更宽裁切，移动端纵向裁切。Bugatti 车辆始终以运动或斜角姿态展示（从不平面侧面）。
• 新闻室缩略图保留 16:9 比例与 0px 圆角。

迭代指南

1. 一次专注于一个组件。直接引用其 YAML 键（{component.hero-photo-band}、{component.career-callout-card}）。
2. 新组件默认为 {rounded.none}（0px）。仅 {component.button-primary} 与 {component.button-icon} 使用胶囊 / 完整半径。
3. 变体作为独立条目存于 components: 中。
4. 所有地方使用 {token.refs}——绝不内联十六进制。
5. 绝不记录悬停。仅记录默认与激活/按下态。
6. 显示标题保持大写 Bugatti Display 400 配 2–4px 字距。正文保持句式小写 Bugatti Text Regular（衬线）。按钮标签保持 Bugatti Monospace 2.5px 字距。三位一体不模糊。
7. 当对强调方式存疑时：先加大摄影再加大字体。

已知缺口

• dembrandt 频次分析器在根层级仅捕获 3 种颜色（#000000、#999999、#c3d9f3）。白色文字（#ffffff）与深色表面色调（#0d0d0d、#141414、#1f1f1f）由截图推断——Bugatti 的页面如此单色，以至于基于频次的分析器未将正文文字或表面色调作为独立调色板条目暴露。
• 三种 Bugatti 字体（Display、Text Regular、Monospace）由 Bugatti 授权，不作为公共 web 字体提供。替代在字体排版部分有记录。
• 动画与过渡时长（照片轮播切换、菜单悬停揭示、配置器动画）不在范围内。
• 仅下划线的 {component.text-input} 之外的表单校验状态未提取——错误 / 成功状态从通用标准推断，而非从已分析的表面。
• 配置器表面（带定制车漆 / 内饰选择器的车辆构建页面）不在分析的 URL 集合中；其色样栅格、定制控件与价格摘要卡片未在此记录。
• 德语新闻室（newsroom.bugatti.com/de）与英文 Bugatti.com 表面共享同一系统——未观察到设计系统层面的差异，仅语言本地化。
• 实际的 Tourbillon 页面在捕获的截图中渲染为稀疏的最小页面，提示要么是懒加载内容，要么是交互式配置器风格 UI 在静态截图中无法完整渲染；发动机规格布局根据已捕获的 spec-cell 令牌从通用豪华汽车模式推断记录。