Ferrari

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

## 概览
Ferrari 的 marketing site 读起来像 cinematic editorial，更接近 luxury-magazine spread，而不是典型 car-OEM site。Base canvas 是 **near-black**（`{colors.canvas}` — #181818），承载 pure white display type；white-canvas band 只出现在特定 editorial context（preowned listing、pricing table、dealer surface）中。唯一 brand voltage 是 **Rosso Corsa**（`{colors.primary}` — #da291c），也就是标志性的 Ferrari racing red，只克制用于 primary CTA、Cavallino mark 和 Formula 1 race-position highlight。

Type 使用 **FerrariSans** 作为唯一 sans family，并保持 modest weight：display 500，body 400。CTA label 使用 uppercase，并带宽松 tracking（1.1-1.4px）。品牌从不使用 bold display copy。

品牌最强的 visual signature 是 **full-bleed cinematic hero photograph**：页面顶部 imagery 展示 car photography、model detail 或 trackside livery，没有任何 chrome 与之竞争。Headline 漂浮在照片底部，或位于照片下方紧凑 band 中。Spacing 遵循明确的 8px token ladder：`xxxs` 4 / `xxs` 8 / `xs` 16 / `sm` 24 / `md` 32 / `lg` 48 / `xl` 64 / `xxl` 96 / `super` 128。

**Key Characteristics:**
- 单一 accent：`{colors.primary}`（Rosso Corsa #da291c），用于 primary CTA、Cavallino 和 F1 race-position highlight。使用克制。
- Near-black canvas（#181818），绝不使用 pure black。White-canvas band 只出现在 editorial context 中。
- 单一 sans family：所有 text role 都使用 FerrariSans。
- Display weight 保持 500，绝不 bold。
- CTA label 使用 uppercase，并带 1.4px tracking。
- 每个 CTA、card 和 band 都使用 sharp `{rounded.none}` (0px) corner，体现 luxury-automotive precision。
- Full-bleed cinematic hero photography 就是 page chrome。
- 使用明确命名的 8px spacing token ladder（xxxs 到 super）。
- Hairline + photographic depth，不使用 drop shadow tier。

## Colors

### Brand & Accent
- **Rosso Corsa** (`{colors.primary}` — #da291c): 标志性的 Ferrari racing red。用于 primary CTA fill、Cavallino mark 和 F1 driver-position highlight。使用克制。
- **Rosso Corsa Active** (`{colors.primary-active}` — #b01e0a): Press state。
- **Rosso Corsa Hover-darker** (`{colors.primary-hover}` — #9d2211): 为完整性记录；根据 no-hover policy，preview HTML 中不使用。
- **Hypersail Yellow** (`{colors.accent-yellow-hypersail}` — #fff200) + **Yellow** (`{colors.accent-yellow}` — #f6e500): 保留给 Hypersail sailing program 和 global focus-ring color 的 sub-brand accent。不是 main automotive palette 的一部分。

### Surface
- **Canvas** (`{colors.canvas}` — #181818): Near-black page floor，绝不是 pure black，带轻微 warmth。
- **Canvas Elevated** (`{colors.canvas-elevated}` — #303030): Dark canvas 上的 card 和 panel。
- **Canvas Light** (`{colors.canvas-light}` — #ffffff): White editorial band（preowned listing、pricing）。
- **Surface Card** (`{colors.surface-card}` — #303030): 与 canvas-elevated 相同，用于 driver card、livery photo plate。
- **Surface Soft Light** (`{colors.surface-soft-light}` — #f7f7f7): Light editorial alternating band。
- **Surface Strong Light** (`{colors.surface-strong-light}` — #ebebeb): Light-canvas divider、badge。

### Hairlines
- **Hairline** (`{colors.hairline}` — #303030): 1px divider on dark — same hex as `{colors.canvas-elevated}`.
- **Hairline On Light** (`{colors.hairline-on-light}` — #d2d2d2): 1px divider on light bands.
- **Hairline Soft** (`{colors.hairline-soft}` — #ebebeb): Lighter divider.

### Text
- **Ink** (`{colors.ink}` — #ffffff): Dark 上的 display 和 body emphasis。
- **Body** (`{colors.body}` — #969696): Dark 上的 default running-text。
- **Body Strong** (`{colors.body-strong}` — #ffffff): 与 ink 相同。
- **Body On Light** (`{colors.body-on-light}` — #181818): Light band 上的 default text。
- **Muted** (`{colors.muted}` — #666666): Dark 上的 sub-title、caption。
- **Muted Soft** (`{colors.muted-soft}` — #8f8f8f): Disabled link text。
- **On Primary** (`{colors.on-primary}` — #ffffff): Rosso Corsa 上的 white text。

### Semantic Colors
- **Info** (`{colors.semantic-info}` — #4c98b9): Info badges, callout backgrounds.
- **Success** (`{colors.semantic-success}` — #03904a): Confirmation.
- **Warning** (`{colors.semantic-warning}` — #f13a2c): Validation warnings.

## Typography

### Font Family
**FerrariSans** 是所有 text role 中唯一授权 sans family。Fallback: `-apple-system, system-ui, sans-serif`。没有 display/body family split。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-mega}` | 80px | 500 | 1.05 | -1.6px | Homepage hero h1 |
| `{typography.display-xl}` | 56px | 500 | 1.1 | -1.12px | Subsidiary hero |
| `{typography.display-lg}` | 36px | 500 | 1.2 | -0.36px | Section head、livery band |
| `{typography.display-md}` | 26px | 500 | 1.5 | 0.195px | Sub-section head |
| `{typography.title-md}` | 18px | 700 | 1.2 | 0 | Component title |
| `{typography.title-sm}` | 16px | 500 | 1.4 | 0.08px | List label |
| `{typography.body-md}` | 14px | 400 | 1.5 | 0 | Default body |
| `{typography.body-sm}` | 13px | 400 | 1.5 | 0 | Footer body |
| `{typography.caption}` | 12px | 400 | 1.4 | 0 | Photo caption |
| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 1.1px | Section label、badge |
| `{typography.button}` | 14px | 700 | 1.0 | 1.4px (uppercase) | CTA pill label |
| `{typography.nav-link}` | 13px | 600 | 1.4 | 0.65px (uppercase) | Top-nav menu item |
| `{typography.number-display}` | 80px | 700 | 1.0 | -1.6px | Race position highlight、spec value |

### Principles
- **Display weight 保持 500。** 这是 editorial confidence，不是 bombastic。Cinematic photography 已经承担视觉重量，type 不需要竞争。
- **CTA label 使用 uppercase 和 1.4px tracking。** 形成 luxury-precision feel。
- **Nav label 使用 uppercase 和 0.65px tracking。** 与 CTA voice 保持一致。
- **Negative letter-spacing 只用于 display。** Display size 上为 -0.36px 到 -1.6px；body 保持 0。

### Font Substitutes
FerrariSans 是授权字体。Open-source substitute：weight 500 的 **Inter**，搭配 letter-spacing -1%；或使用 **Söhne** 获得更接近的 humanist proportion。

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxxs}` 4px · `{spacing.xxs}` 8px · `{spacing.xs}` 16px · `{spacing.sm}` 24px · `{spacing.md}` 32px · `{spacing.lg}` 48px · `{spacing.xl}` 64px · `{spacing.xxl}` 96px · `{spacing.super}` 128px.
- **Section padding:** Major band 使用 `{spacing.xxl}` (96px)；`{spacing.super}` (128px) 保留给 hero band depth。

### Grid & Container
- Editorial band 上 max content width 约 1280px。Hero photography full-bleed。
- Editorial body: 12-column grid。
- Feature card grid: hero split 在 desktop 为 2-up，benefit grid 为 3-up，preowned listing tile 为 4-up。
- Footer: desktop 为 5-column。

### Whitespace Philosophy
宽松的 editorial pacing。Cinematic hero photography 占据大量 viewport real-estate；body section 在下方使用更紧的 editorial layout。Canvas-light editorial band（preowned、pricing）比 dark cinema band 有更高 density。

## Elevation & Depth

系统使用 **photographic depth + brightness-step** elevation。除 extracted token 中记录的单一 soft-small `{shadow.small}` 外，不使用 drop shadow。

| Level | Treatment | 用途 |
|---|---|---|
| Flat (canvas) | `{colors.canvas}` (#181818) | Body band、footer |
| Card | `{colors.canvas-elevated}` (#303030) | Driver card、livery plate |
| Light band | `{colors.canvas-light}` (#ffffff) | Preowned listing、pricing |
| Hairline border | 1px `{colors.hairline}` 或 `{colors.hairline-on-light}` | Card outline、divider |
| Soft drop | `0 4px 8px rgba(0,0,0,0.1)` | Hovered card（单一 shadow tier） |
| Photographic | Full-bleed cinema imagery | Hero band、livery photograph |

### Decorative Depth
- **Full-bleed cinema photography** 是品牌主要 depth treatment。
- **Brand red gradient** (`linear-gradient(180deg, #a00c01, #da291c 64%)`): Rosso Corsa gradient，用于 accent band 和 CTA hover state。
- **Dark grey gradient** (`linear-gradient(180deg, #3c3c3c, #030303 64%)`): 用于 section transition 的 atmospheric darken。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | 每个 CTA、card、band；主导 radius |
| `{rounded.xs}` | 2px | Tight badge（少见） |
| `{rounded.sm}` | 4px | Form input |
| `{rounded.md}` | 6px | Compact card（少见） |
| `{rounded.lg}` | 8px | Mobile-only collapse card |
| `{rounded.xl}` | 12px | Modal/dialog corner（少见） |
| `{rounded.full}` | 9999px | Avatar plate、badge pill |

Radius vocabulary 是 **sharp by default**。Sharp 0px corner 是品牌 button shape，绝不用 rounded pill。Pill geometry 只保留给 badge label。

## Components

### Top Navigation

**`top-nav-on-dark`** — Dark hero page 上的 default top nav。Background `{colors.canvas}`、text `{colors.ink}`、height 64px。Layout：Cavallino mark 在左，primary horizontal menu（Models / F1 / Lifestyle / Owners / Preowned）居中，language picker + utilities 在右。Menu item 使用 uppercase 和 0.65px tracking。

**`top-nav-on-light`** — Editorial light band 使用的 white-canvas variant。

### Buttons

**`button-primary`** — Signature Rosso Corsa CTA。Background `{colors.primary}`、text `{colors.on-primary}`、type `{typography.button}`（14px / 700 / 1.4px tracking，uppercase）、padding 14px × 32px、height 48px、**rounded `{rounded.none}`（0px，sharp corners）**。

**`button-primary-active`** — Press state。Background `{colors.primary-active}`。

**`button-outline-on-dark`** — Transparent，并带 1px white border。Background transparent、text `{colors.ink}`、1px white border，同样 sharp 0px corner。

**`button-outline-on-light`** — Light band 上的 transparent button，带 1px ink border。

**`button-tertiary-text`** — Inline text link，使用 uppercase tracking。

### Hero Bands

**`hero-band-cinema`** — Full-bleed cinematic photograph。底层 background 为 `{colors.canvas}`，但 photo 填满 viewport。Display headline 使用 `{typography.display-mega}`（80px / 500 / -1.6px），漂浮在 photo 底部，或位于下方紧凑 band 中。包含一个 primary CTA + 一个 outline CTA。Zero padding，photo edge-to-edge 填满。

**`hero-band-light`** — Editorial band 使用的 white-canvas variant。Background `{colors.canvas-light}`、text `{colors.body-on-light}`、padding 96px。

### Cards

**`feature-card-photo`** — Image-first card。Background `{colors.canvas}`、text `{colors.ink}`、rounded `{rounded.none}`。Image 在顶部 edge-to-edge 填充；title + body 以 tight typography 位于下方。

**`feature-card-light`** — White-canvas variant。Background `{colors.canvas-light}`、text `{colors.body-on-light}`、rounded `{rounded.none}`、padding 32px。用于更高信息密度的 editorial surface。

**`driver-card`** — F1 driver portrait card。Background `{colors.canvas-elevated}`、text `{colors.ink}`、rounded `{rounded.none}`、padding 24px。Layout：driver portrait + name + race number + team badge。用于把车队人物信息做成清晰的 editorial block。

### Editorial Surfaces

**`livery-band`** — Full-width Rosso Corsa accent band。Background `{colors.primary}`、text `{colors.ink}`、type `{typography.display-lg}`、padding 96px。用于 dark editorial band 之间的突出 livery callout。

**`preowned-listing-card`** — 用于 preowned Ferrari listing grid。Background `{colors.canvas-light}`、text `{colors.body-on-light}`、rounded `{rounded.none}`、padding 24px。Layout：顶部 car photo + model name + year/mileage + price。

### Spec & Race Surfaces

**`spec-cell`** — Technical spec callout。Transparent background，value 使用 `{typography.number-display}`（80px / 700 / -1.6px white），label 位于下方并使用 `{typography.caption-uppercase}`。

**`race-position-cell`** — F1 driver finishing position。使用相同 number-display geometry，但 text 使用 `{colors.primary}` Rosso Corsa，以承载品牌 racing identity。

**`race-calendar-row`** — F1 race calendar 中的 hairline-divided row。Layout：date column 在左，race name + circuit 在中间，results column 在右。

### Forms & Tags

**`text-input-on-dark`** — Background `{colors.canvas}`、text `{colors.ink}`、rounded `{rounded.sm}` (4px)、padding 14px × 16px、height 48px、1px `{colors.hairline}` border。用于 dark surface 上的简洁表单输入。

**`text-input-on-light`** — White-canvas variant，用于 preowned、dealer 和 light editorial band。

**`badge-pill`** — Small uppercase pill。Background `{colors.canvas-elevated}`、text `{colors.ink}`、type `{typography.caption-uppercase}`（11px / 600 / 1.1px tracking，uppercase）、rounded `{rounded.full}` (9999px)、padding 4px × 12px。这是唯一使用 pill geometry 的地方。

### Newsletter / CTA / Footer

**`newsletter-input-band`** — Newsletter signup band。Background `{colors.canvas-elevated}`、padding 32px、rounded `{rounded.sm}`。承载 inline email input + primary CTA。

**`cta-band-dark`** — Pre-footer band。Background `{colors.canvas}`，centered display headline 使用 `{typography.display-lg}`，只放一个 Rosso Corsa CTA。Padding 96px。

**`footer-dark`** — Closing dark footer。Background `{colors.canvas}`、text `{colors.body}`。5-column link list。64×48px padding。

**`footer-link`** — Background transparent、text `{colors.body}`、type `{typography.body-sm}`。

## Do's and Don'ts

### Do
- 将 `{colors.primary}`（Rosso Corsa）保留给 primary CTA、Cavallino mark 和 F1 race-position highlight。
- 每个 CTA 都使用 `{rounded.none}`（0px sharp corner），这是品牌 signature precision。
- CTA label 通过 `{typography.button}` 渲染为 uppercase，并带 1.4px tracking。
- 每个 hero 都搭配 full-bleed cinematic photograph；photograph 本身就是 depth。
- 使用明确的 8px spacing ladder（`xxxs` 到 `super`），不要使用 ad-hoc px value。
- Display weight 保持 500，绝不 bold。

### Don't
- 不要引入 Rosso Corsa 之外的 saturated brand color。
- 不要使用 rounded 或 pill CTA；sharp 0px corner 才是品牌 button。
- 不要 bold display copy。Cinematic photography 承担视觉 heavy-lifting。
- 不要在 Hypersail sailing program 语境之外使用 Hypersail yellow。
- 不要使用 pure black canvas。品牌 canvas 是 `{colors.canvas}` (#181818)，略暖。
- 不要添加 drop shadow tier。Photography + brightness-step elevation 承担 depth。
- 不要从 third-party widget（cookie consent、OneTrust）提取 CTA color。品牌 CTA color 以真实 product CTA 为准，而不是 injected modal。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 640px | Hero photograph 垂直裁切；hero h1 80→32px；feature card grid 1-up；nav hamburger；preowned listing 1-up。 |
| Tablet | 640–1024px | Hero h1 56px；feature card grid 2-up；preowned listing 2-up。 |
| Desktop | 1024–1280px | 完整 hero h1 80px；feature card grid 3-up；preowned listing 4-up。 |
| Wide | > 1280px | Editorial body content capped at 1280px；hero photography 继续 full-bleed。 |

### Touch Targets
- Primary CTA 高度 48px，达到 WCAG AAA（44 × 44）。
- Nav item 使用 uppercase 和 0.65px tracking，并通过 padding 达到 effective 48px tap area。

### Collapsing Strategy
- Top nav 在 768px 以下切换为 hamburger。
- Hero photograph 通过 art direction 根据 breakpoint 重新取景：desktop 使用 wide cinematic，mobile 使用更紧 crop 或转为 vertical。
- Feature card grid: 4-up → 3-up → 2-up → 1-up。
- F1 driver card: desktop 为 2-up，mobile 为 1-up。

## Iteration Guide

1. 每次聚焦单个 component。
2. CTA 默认使用 `{rounded.none}`（0px sharp）。Card 也使用 `{rounded.none}`。Pill 只保留给 badge。
3. Variant 作为 `components:` 内的独立条目存在。
4. 所有地方使用 `{token.refs}`，不要 inline hex。
5. 不记录 hover state。
6. Display 使用 FerrariSans 500，body 使用 400/700。CTA 和 nav 使用 uppercase + tracking。
7. Rosso Corsa 保持稀缺，只用于 primary CTA、Cavallino、race-position highlight。
8. 使用明确命名的 8px spacing ladder。

## Known Gaps

- FerrariSans 是授权 typeface；weight 500 的 Inter 是已记录 substitute。
- Animation timing（hero parallax、livery band entrance、race position counter）不在范围内。
- In-product surface（preowned configurator、F1 telemetry overlay）只通过 marketing surface 部分捕获。
- Focus 之外的 form validation state 在捕获 surface 中不可见。
- Hypersail yellow token 已提取，但只出现在 Hypersail sailing program 语境中，因此记录为 scoped accent。