Bugatti

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

## 概览
Bugatti 的 marketing surface 是豪华汽车里最克制的界面：近乎纯黑的 canvas（`{colors.canvas}` — #000000）承载 white uppercase、带 **letterspaced** 的 display type，以及 full-bleed automotive photography。系统没有 accent color、没有 surface card decoration、没有 shadow、没有 gradient、没有 chrome；只有 **photography、typography 和 brand wordmark**。同类豪华汽车站点（BMW M、Aston Martin、Lamborghini）几乎都会使用某种 accent color 或 signature element；Bugatti 什么都不用。空白、照片、以及精确 tracking 的 Bugatti Display headline 本身就是品牌。

系统使用 **三套 custom Bugatti typeface**：**Bugatti Display**（display headline、"BUGATTI" wordmark、wide tracking 的 all caps）、**Bugatti Text Regular**（body paragraph，一套 serif text face），以及 **Bugatti Monospace**（button label、navigation、caption、date，以及所有需要 precision 和 machined feel 的地方）。这个分工是刻意且不可打破的：不要在 button 中使用 Bugatti Text，也不要在 paragraph 中使用 Bugatti Monospace。

Display size 使用 weight 400 (regular)，绝不使用 bold。视觉强调来自 **size 和 tracking**，不是 weight。Wordmark 的 letter-spacing 是 6px；display headline 为 2-4px；uppercase label 为 2-2.5px。Tight tracking 是品牌违规。宽松间距创造出其他豪华品牌难以复制的 "engineered precision" 感。

**Key Characteristics:**
- Pure black canvas（`{colors.canvas}` — #000000）搭配 white type。系统没有 light mode。
- 三套 custom Bugatti typeface：**Display**（uppercase headline + wordmark）、**Text Regular**（body serif）、**Monospace**（button、caption、nav）。
- 所有 display headline 都是 UPPERCASE，并带宽 letter-spacing（2-4px）。Body copy 保持 sentence-case 和标准 tracking。
- 没有 accent color。站点中唯一非 monochrome 的颜色是 `{colors.link}` (#c3d9f3)，一种 desaturated ice-blue，用于 inline anchor link，而且也很少出现。
- Button 是 pill-shaped（`{rounded.pill}`），使用 **transparent background** 和 1px white outline。Bugatti 是唯一 primary CTA 完全透明的 luxury-auto brand。
- Photography 是唯一 depth element。没有 drop shadow、没有 gradient、没有 card surface。Surface card 最多使用 `{colors.surface-card}` (#141414)，几乎与黑色无差别。
- Section rhythm 很宽松；major band 之间使用 `{spacing.section}` (120px)，比多数 marketing site 更长，因为 Bugatti 页面主要由 photography 和极低文本密度构成。

## Colors

### Brand & Accent
- **Primary** (`{colors.primary}` — #ffffff): 唯一 brand color。用于 black canvas 上的 white type 和 white CTA outline。
- **Link** (`{colors.link}` — #c3d9f3): 系统中唯一 non-monochrome color；一种 desaturated ice-blue，用于 inline anchor link，偶尔用于 focus state。Bugatti 的品牌纪律极强，这一个 token 基本就是黑白之外的全部 chromatic vocabulary。

### Surface
- **Canvas** (`{colors.canvas}` — #000000): 所有 surface 的默认 page floor。Pure black。
- **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): 几乎与黑色无差的 tone，用于 spec table row 和 dense data section。
- **Surface Card** (`{colors.surface-card}` — #141414): Card（career callout、newsroom article container、偶发 content card）。即使是 card surface 也保持 near-black，没有明显 contrast jump。
- **Surface Elevated** (`{colors.surface-elevated}` — #1f1f1f): 比黑色再远一步，用于少数 dense page 上的 nested card。
- **Hairline** (`{colors.hairline}` — #262626): 1px divider tone，可见但安静。用于 table row、body section 之间、card outline 周围。
- **Hairline Strong** (`{colors.hairline-strong}` — #3a3a3a): 更重的 divider，用于 input field 下沿（input field 没有完整 border，只有 underline hairline）。

### Text
- **Ink / On Dark** (`{colors.on-dark}` — #ffffff): Dark canvas 上的所有 headline 和 primary text。
- **Body** (`{colors.body}` — #cccccc): 默认 running-text color（比 pure white 略冷），用于 body paragraph。
- **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized body / lead paragraph。
- **Muted** (`{colors.muted}` — #999999): Footer link、date、caption、secondary metadata。Dembrandt frequency analysis 将它确认为 palette-2（count 6，medium confidence）。
- **Muted Soft** (`{colors.muted-soft}` — #666666): 第二层 muted，用于 very-secondary text（legal disclaimer、copyright line）。

### Semantic Colors
- **Warning** (`{colors.warning}` — #d4a017): 保留给 technical-warning callout（specification、recall notice）。几乎不出现在 marketing surface。
- **Success** (`{colors.success}` — #5fa657): Order confirmation state（marketing page 上少见）。

## Typography

### Font Family
系统以刚性的 trinity 使用 **三套 custom Bugatti typeface**：
1. **Bugatti Display**：所有 display headline（h1、h2、h3）、"BUGATTI" wordmark、model name plate。Uppercase、wide-tracked。任何视觉强调的默认选择。
2. **Bugatti Text Regular**：一套 serif text face，只用于 running body copy、lead paragraph、model description。标准 sentence-case，无 letter-spacing。
3. **Bugatti Monospace**：Button label、navigation、caption、date，以及 monospace-precision context。始终 uppercase，并带 2-2.5px tracking。

这个分工是功能性的，也是绝对的。Button 中使用 Bugatti Display 会破坏 "machined precision" 声音；paragraph 中使用 Bugatti Monospace 会破坏 "engineered elegance" 声音；button 中使用 Bugatti Text 则完全不可接受。

Fallback stack：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`。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 400 | 1.1 | 4px | Hero h1（"THE BUGATTI F.K.P. HOMMAGE"、"TOURBILLON"）：Bugatti Display、uppercase、wide-tracked |
| `{typography.display-lg}` | 48px | 400 | 1.15 | 3px | Section head：Bugatti Display、uppercase |
| `{typography.display-md}` | 32px | 400 | 1.2 | 2px | Sub-section head、model name：Bugatti Display |
| `{typography.display-sm}` | 24px | 400 | 1.3 | 1.5px | Card title：Bugatti Display |
| `{typography.wordmark}` | 14px | 400 | 1.0 | 6px | Top nav 中的 "BUGATTI" brand wordmark：Bugatti Display，系统中最宽 tracking |
| `{typography.title-md}` | 20px | 400 | 1.3 | 1px | Career listing title、intro paragraph：Bugatti Display |
| `{typography.title-sm}` | 16px | 400 | 1.3 | 1.5px | Mid-tier headline、callout card |
| `{typography.caption-uppercase}` | 11px | 400 | 1.4 | 2px | Photo caption、metadata、"EXPLORE OUR OPPORTUNITIES"：Bugatti Monospace、uppercase |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body：Bugatti Text Regular（serif face）、sentence case、无 tracking |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body、fine-print legal：Bugatti Text Regular |
| `{typography.button}` | 14px | 400 | 1.0 | 2.5px | 所有 button label：Bugatti Monospace、uppercase、2.5px tracking |
| `{typography.nav-link}` | 12px | 400 | 1.4 | 2px | Top-nav menu item（"MENU"、"STORE"）：Bugatti Monospace |

### Principles
系统 **绝不使用 bold weight**。每套 Bugatti typeface 都设为 weight 400 (regular)。视觉强调来自：
1. **Size**：64px hero 与 16px body 构成 4× 层级。
2. **Letter-spacing**：6px wordmark 对比 0px body。
3. **Case**：Uppercase display 对比 sentence-case body。
4. **Family contrast**：Display 对比 Text Regular 对比 Monospace。

任何地方使用 weight 700 都会破坏 "modest engineering" 感，让 Bugatti 读起来像通用 luxury template。

Serif 的 Bugatti Text Regular 让品牌区别于 all-sans 的豪华汽车阵营（BMW、Aston Martin、Lamborghini 都使用 sans-serif body type）。Bugatti 的 serif body voice 传达 literary、considered、slow-reading prose，这就是品牌的 editorial philosophy。

### Font Substitutes
如果 Bugatti Display、Bugatti Text Regular 和 Bugatti Monospace 不可用，最接近的 open-source substitute 是：
- **Bugatti Display** → **Saira Condensed** (variable, weight 400) at +0.05em letter-spacing
- **Bugatti Text Regular** → **Cormorant Garamond** (regular) or **EB Garamond**
- **Bugatti Monospace** → **JetBrains Mono** or **IBM Plex Mono** (regular weight)

替代方案必须保留 three-family split；这比精确匹配 typeface 更重要。

## 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}` 120px.
- **Section padding:** `{spacing.section}` (120px)，比多数 marketing site 更长，因为 Bugatti 的 band 主要是 photography 和极少文本。空白用来框住车辆。
- **Card internal padding:** Newsroom 和 content card 使用 `{spacing.lg}` (24px)；career callout card 使用 `{spacing.md}` (16px)；hero photo band 内部使用 `{spacing.xxl}` (64px)。
- **Gutters:** 2-up grid 的 card 间距为 `{spacing.xl}` (40px)，比常规更宽，因为 Bugatti 的 grid 很稀疏。

### Grid & Container
- **Max content width:** 约 1280px 居中。Hero photo band full-width 出血，没有 max。
- **Editorial body:** 单一 12-column grid；photo band 为 full-bleed。
- **Newsroom layout:** Desktop 为 2-up article grid，tablet+mobile 为 1-up。
- **Career listings:** 单列，row spacing 80px。

### Whitespace Philosophy
Bugatti 比任何 luxury-auto 竞争者都更激进地使用 whitespace。Homepage hero 主要由 photography + 巨大 whitespace + 一句话 + 一个 button 构成。照片下方的空黑区域是刻意的，它让车有呼吸感。为了“放更多内容”而压缩 whitespace，会破坏品牌最基础的契约：less is more。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Flat | 无 shadow，无 border | Body、top nav、footer、photo band |
| Soft hairline | 1px `{colors.hairline}` border | Section divider、table row |
| Card surface | `{colors.surface-card}` background，无 shadow | Career callout、newsroom article container |
| Photographic depth | Full-bleed photography，edge-to-edge crop | Hero band、model showcase；通过 subject + lens 形成 depth，而不是 chrome |

系统不使用 shadow、glassmorphism 或 gradient。Depth 完全来自 photography（lighting、lens、subject framing），以及 black canvas 与轻微 elevated 的 `{colors.surface-card}` 之间的 contrast。

### Decorative Depth
- 无。Bugatti 是唯一没有任何 decorative element 的 luxury-auto brand。Marketing site 上除 wordmark 本身外，没有 stripe、badge 或 heritage emblem。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | 所有 card、photo container、input、spec cell；这是主导 radius |
| `{rounded.pill}` | 9999px | 所有 button（系统中唯一 rounded element） |
| `{rounded.full}` | 9999px / 50% | Circular icon button、avatar surface |

Radius hierarchy 是二元的：除 button 之外一律 rectangular，button 则是 pill。中间没有 4px、8px、12px；那些会显得像“被设计过”，而不是“被工程化”。

### Photography Geometry
Hero photography full-width 填充，不带 rounding。Grid 内的 photo card 保持 `{rounded.none}` (0px) corner，image edge-to-edge。Model detail shot 使用 16:9 或更宽的 cinema-aspect ratio。Newsroom thumbnail 使用 16:9 和 0px corner。Marketing site 上没有 avatar，也没有 rounded photo crop。

## Components

### Top Navigation

**`top-nav`** — A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries "MENU" at left, the centered **wordmark-display** ("BUGATTI" in 14px Bugatti Display with 6px tracking), and "STORE" at right with a small bag icon. All labels in `{typography.nav-link}` (Bugatti Monospace, 12px, 2px tracking, uppercase).
**`top-nav`** — 56px 高的 transparent nav bar，叠在每页顶部的 hero photo 上。无 fill、无 border。左侧为 "MENU"，中间为居中的 **wordmark-display**（"BUGATTI"，14px Bugatti Display，6px tracking），右侧为 "STORE" 和小 bag icon。所有 label 使用 `{typography.nav-link}`（Bugatti Monospace，12px，2px tracking，uppercase）。

**`wordmark-display`** — The "BUGATTI" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.
**`wordmark-display`** — "BUGATTI" wordmark 本体。Bugatti Display 14px、weight 400、6px letter-spacing。系统中最宽的 tracking。所有 breakpoint 下都在 nav bar 中居中。

### Buttons

**`button-primary`** — The signature primary CTA. Background **transparent**, text `{colors.on-dark}` (white), 1px white outline, rounded `{rounded.pill}` (9999px), padding 14px × 32px, height 44px. Type `{typography.button}` — Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti — every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.
**`button-primary`** — Signature primary CTA。Background **transparent**，text `{colors.on-dark}` (white)，1px white outline，rounded `{rounded.pill}` (9999px)，padding 14px × 32px，height 44px。Type 为 `{typography.button}`：Bugatti Monospace、uppercase、14px、2.5px tracking。Transparent fill 是 Bugatti 独有的；其它 luxury-auto brand 通常使用 filled 或 outlined-with-text-shift button。Bugatti 的 transparent pill 就是 button 本身。

**`button-icon`** — Circular icon buttons (carousel arrows, share, language switcher). 40 × 40px, transparent background, white outline 1px, rounded `{rounded.full}`. Same outline-only treatment as the primary button.
**`button-icon`** — Circular icon button（carousel arrow、share、language switcher）。40 × 40px，transparent background，1px white outline，rounded `{rounded.full}`。与 primary button 一样使用 outline-only treatment。

**`text-link`** — Inline body links in `{colors.link}` (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits `{typography.body-md}` (Bugatti Text Regular, serif).
**`text-link`** — Inline body link 使用 `{colors.link}`（#c3d9f3，系统中唯一 non-monochrome color）。默认 underline。Type 继承 `{typography.body-md}`（Bugatti Text Regular，serif）。

### Cards & Containers

**`hero-photo-band`** — Full-width black band with full-bleed automotive photography. The h1 in `{typography.display-xl}` sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption (`{typography.caption-uppercase}`) below the headline and a single `{component.button-primary}` further down. Vertical padding 96px-200px depending on photo height.
**`hero-photo-band`** — Full-width black band，带 full-bleed automotive photography。`{typography.display-xl}` 的 h1 位于照片上方靠近顶部并居中，常在 headline 下配一个小 Bugatti Monospace caption（`{typography.caption-uppercase}`），更下方只放一个 `{component.button-primary}`。Vertical padding 根据照片高度在 96px-200px 之间。

**`career-callout-card`** — A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt ("Are you ready for a new adventure?"). Background `{colors.surface-card}`, rounded `{rounded.none}` (0px), padding `{spacing.md}` (16px), width 320px. Carries a small thumbnail at top, body line, and a `{typography.caption-uppercase}` link ("EXPLORE OUR OPPORTUNITIES").
**`career-callout-card`** — Homepage 上浮在 hero photo 右侧的小 card，包含 recruiting prompt（"Are you ready for a new adventure?"）。Background `{colors.surface-card}`，rounded `{rounded.none}` (0px)，padding `{spacing.md}` (16px)，width 320px。顶部有小 thumbnail，下方是 body line 和 `{typography.caption-uppercase}` link（"EXPLORE OUR OPPORTUNITIES"）。

**`model-photo-card`** — Used in model showcases (Tourbillon page, model lineup grid). Background `{colors.canvas}` (no card surface — just photo on black), rounded `{rounded.none}`. Top: 16:9 or 21:9 hero shot of the model. Below: model name in `{typography.display-md}` (32px Bugatti Display, 2px tracking), short specs line in `{typography.caption-uppercase}` (11px Bugatti Monospace), a `{component.text-link}` ("DISCOVER").
**`model-photo-card`** — 用于 model showcase（Tourbillon page、model lineup grid）。Background `{colors.canvas}`（没有 card surface，只是 black 上的 photo），rounded `{rounded.none}`。顶部是 model 的 16:9 或 21:9 hero shot。下方：model name 使用 `{typography.display-md}`（32px Bugatti Display，2px tracking），short specs line 使用 `{typography.caption-uppercase}`（11px Bugatti Monospace），再加一个 `{component.text-link}`（"DISCOVER"）。

**`newsroom-article-card`** — Used on the newsroom page (newsroom.bugatti.com). Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries a 16:9 thumbnail, a `{component.date-pill}` ("12. NOVEMBER 2025"), a `{typography.title-md}` headline, and a body excerpt in `{typography.body-md}` (Bugatti Text Regular serif).

**`career-listing-row`** — Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in `{typography.title-md}` (Bugatti Display 20px) at left; location + department in `{typography.caption-uppercase}` at right; chevron arrow (→) at far right.

**`spec-cell`** — Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in `{typography.title-md}` at top and a label in `{typography.caption-uppercase}` below. Padding 24px vertical.

### Inputs & Forms

**`text-input`** — Standard text input on dark canvas. Background **transparent**, text `{colors.on-dark}`, 1px hairline-strong bottom border only (no top, left, right border), padding 12px × 0px, height 44px. Type `{typography.body-md}` (Bugatti Text Regular). Placeholder in `{colors.muted}`. Focus thickens the bottom border to white.
**`text-input`** — Dark canvas 上的标准 text input。Background **transparent**，text `{colors.on-dark}`，只有 1px hairline-strong bottom border（无 top、left、right border），padding 12px × 0px，height 44px。Type 为 `{typography.body-md}`（Bugatti Text Regular）。Placeholder 使用 `{colors.muted}`。Focus 时 bottom border 加粗并变为 white。

### Tags & Captions

**`caption-overlay`** — Photo-overlay caption (e.g., "HONORING THE OEYRON AND ITS VISIONARY CREATOR"). Centered or left-aligned over photography in `{typography.caption-uppercase}` (Bugatti Monospace, 11px, 2px tracking, white).

**`category-tag`** + **`date-pill`** — Both render as transparent inline labels in `{typography.caption-uppercase}`, color `{colors.muted}`. No background fill, no border. The "tag" is the type itself.

### CTA / Footer

**`cta-band-photo`** — A pre-footer "Discover Bugatti" band with full-bleed photography of a Bugatti car at speed and a centered headline in `{typography.display-md}` + a `{component.button-primary}` below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.

**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.muted}`. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in `{typography.body-sm}` (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.

## Do's and Don'ts

### Do
- 每个页面都用 full-bleed automotive photography 锚定。车辆是 brand voltage；chrome 完全退后。
- 所有 display headline 保持 UPPERCASE Bugatti Display，并带 2-4px letter-spacing。Wordmark 使用 6px。
- Headline 用 Bugatti Display，body 用 Bugatti Text Regular（serif!），button + caption + nav 用 Bugatti Monospace。这个 trinity 不可打破。
- `{component.button-primary}` 保持 transparent，并带 1px white outline。Transparent pill 就是品牌 button。
- 所有地方都使用 weight 400。Bold 会破坏 brand voice；系统没有 bold weight role。
- Major editorial band 之间使用 `{spacing.section}` (120px)。Whitespace 是品牌的一部分。
- `{colors.link}` (#c3d9f3) 只留给 inline anchor link。它是系统唯一 non-monochrome color。

### Don't
- 不要在 `{colors.link}` 之外引入任何 accent color。Bugatti 的品牌纪律是 total monochrome + photography。加入 brand-blue 或 brand-red 会破坏契约。
- 不要加粗任何 type。系统没有 bold weight；每套 typeface 都保持 400。
- 不要填充 primary button。只能 transparent + outline。Solid white button 会显得 off-brand。
- 不要压缩 section 之间的 whitespace。120px rhythm 是 editorial pacing 的一部分。
- 不要在 button 之外使用 rounded corner。Card、photo、input 都保持 0px。Rounded card 会显得像 consumer-tech，而不是 luxury-engineered。
- 不要收紧 display headline 的 letter-spacing。Bugatti Display 上的 2-4px tracking 不可谈判。
- 不要在 button 中使用 Bugatti Display（应使用 Bugatti Monospace），也不要在 paragraph 中使用 Bugatti Monospace（应使用 Bugatti Text Regular）。Trinity split 就是 brand voice。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Hamburger nav；hero h1 64→32px；career callout card 隐藏；photo band 保持 full-bleed；footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav 保持 minimal（MENU + wordmark + STORE）；2-up newsroom grid；career row full-width |
| Desktop | 1024–1440px | 完整 minimal top-nav；2-up newsroom grid；spec table 4-up |
| Wide | > 1440px | 与 desktop 相同，但 breathing room 更多；max content 1280px |

### Touch Targets
- `{component.button-primary}` 最小渲染为 44 × 44px（符合 WCAG AAA）。
- `{component.button-icon}` 精确为 40 × 40px。
- `{component.text-input}` 高度为 44px。
- Career listing row 有 24px vertical padding；结合周围 spacing 后，effective tap area 达到 44px+。

### Collapsing Strategy
- Top nav 在所有 breakpoint 下都保持 minimal（MENU label + wordmark + STORE label）。Mobile 上 label 收进 hamburger，但 wordmark 保持居中。
- Hero photography 在每个 breakpoint 都保持 full-bleed。Photo crop 会调整：desktop 使用更宽 crop，mobile 使用 vertical crop。
- Homepage 的 career callout card 在 < 768px 隐藏（这是 desktop-only floating element）。
- 2-up newsroom grid 在 < 768px 折叠为 1-up。
- Spec cell 从 4-up 重排为 2-up 再到 1-up；无论 column count 如何，value 都保持同一 display size。

### Image Behavior
- Hero photography 响应式裁切：desktop 为更宽 crop，mobile 为 vertical crop。Bugatti car 总是以 motion 或 angled view 呈现，绝不使用 flat profile。
- Newsroom thumbnail 保持 16:9 ratio 和 0px corner。

## Iteration Guide

1. 每次只聚焦一个 component。引用它的 YAML key（`{component.hero-photo-band}`、`{component.career-callout-card}`）。
2. 新 component 默认使用 `{rounded.none}` (0px)。只有 `{component.button-primary}` 和 `{component.button-icon}` 使用 pill / full radius。
3. Variant 作为 `components:` 中的独立条目存在。
4. 所有地方使用 `{token.refs}`，不要 inline hex。
5. 不要记录 hover。只记录 Default 和 Active/Pressed state。
6. Display headline 保持 UPPERCASE Bugatti Display 400，并带 2-4px tracking。Body 保持 sentence-case Bugatti Text Regular（serif）。Button label 保持 Bugatti Monospace 2.5px tracking。Trinity 不可混淆。
7. 不确定如何强调时：先放大 photography，再考虑放大 type。

## Known Gaps

- Dembrandt frequency analyzer 在 root level 只捕获到 3 个颜色（`#000000`、`#999999`、`#c3d9f3`）。White text（#ffffff）和 dark surface tone（`#0d0d0d`、`#141414`、`#1f1f1f`）来自 screenshot 推断；Bugatti 页面太 monochrome，frequency-based analyzer 没有把 body text 或 surface tone 作为独立 palette entry 暴露出来。
- 三套 Bugatti typeface（Display、Text Regular、Monospace）授权给 Bugatti，不能作为公开 web font 获取。替代字体已记录在 typography section。
- Animation 和 transition timing（photo carousel transition、menu 的 hover-reveal、configurator animation）不在范围内。
- `{component.text-input}` 的 underline-only 样式之外，form validation state 未被提取；error / success state 是根据通用标准推断，而不是来自已分析 surface。
- Configurator surface（带 custom paint / interior picker 的 vehicle build page）不在分析 URL 集合中；它的 swatch grid、customization control 和 price-summary card 未在此记录。
- German-language newsroom（newsroom.bugatti.com/de）与英文 Bugatti.com surface 共用系统；未观察到 design-system-level 差异，只有语言本地化。
- 实际 Tourbillon page 在捕获截图中渲染为稀疏 minimal page，说明可能存在 lazy-loaded content 或 static screenshot 无法完整渲染的 interactive configurator-style UI；engine-spec layout 根据捕获到的 spec cell token，并结合通用 luxury-auto pattern 记录。