法拉利 Ferrari

version: alpha name: Ferrari-design-analysis description: A luxury-automotive brand whose marketing surfaces read as cinematic editorial. The base canvas is near-black (#181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables). The single brand voltage is Rosso Corsa (#da291c) — the iconic Ferrari racing red — used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights. Type runs FerrariSans at modest weights (display 500, body 400) — never bombastic. Spacing follows an explicit 8px token ladder (xxxs 4px through super 128px); generous editorial pacing throughout. The brand's strongest visual signature is the full-bleed cinematic hero photograph that fills the viewport top with car photography, model details, or trackside livery — followed by a tighter editorial body layout below.

colors: primary: "#da291c" primary-active: "#b01e0a" primary-hover: "#9d2211" ink: "#ffffff" body: "#969696" body-strong: "#ffffff" body-on-light: "#181818" muted: "#666666" muted-soft: "#8f8f8f" hairline: "#303030" hairline-on-light: "#d2d2d2" hairline-soft: "#ebebeb" canvas: "#181818" canvas-elevated: "#303030" canvas-light: "#ffffff" surface-card: "#303030" surface-soft-light: "#f7f7f7" surface-strong-light: "#ebebeb" on-primary: "#ffffff" on-dark: "#ffffff" on-light: "#181818" accent-yellow-hypersail: "#fff200" accent-yellow: "#f6e500" semantic-info: "#4c98b9" semantic-success: "#03904a" semantic-warning: "#f13a2c"

typography: display-mega: fontFamily: "'FerrariSans', -apple-system, system-ui, sans-serif" fontSize: 80px fontWeight: 500 lineHeight: 1.05 letterSpacing: -1.6px display-xl: fontFamily: "'FerrariSans', sans-serif" fontSize: 56px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.12px display-lg: fontFamily: "'FerrariSans', sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.36px display-md: fontFamily: "'FerrariSans', sans-serif" fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.195px title-md: fontFamily: "'FerrariSans', sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0 title-sm: fontFamily: "'FerrariSans', sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08px body-md: fontFamily: "'FerrariSans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "'FerrariSans', sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "'FerrariSans', sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "'FerrariSans', sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 1.1px textTransform: uppercase button: fontFamily: "'FerrariSans', sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 1.4px textTransform: uppercase nav-link: fontFamily: "'FerrariSans', sans-serif" fontSize: 13px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.65px textTransform: uppercase number-display: fontFamily: "'FerrariSans', sans-serif" fontSize: 80px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.6px

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

spacing: xxxs: 4px xxs: 8px xs: 16px sm: 24px md: 32px lg: 48px xl: 64px xxl: 96px super: 128px

components: top-nav-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px top-nav-on-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.body-on-light}" 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-outline-on-dark: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px height: 48px button-outline-on-light: backgroundColor: transparent textColor: "{colors.body-on-light}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px height: 48px button-tertiary-text: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" hero-band-cinema: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: 0 hero-band-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.body-on-light}" typography: "{typography.display-xl}" padding: 96px feature-card-photo: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 0 feature-card-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.body-on-light}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 32px livery-band: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px preowned-listing-card: backgroundColor: "{colors.canvas-light}" textColor: "{colors.body-on-light}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 24px spec-cell: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.number-display}" padding: 24px 0 race-position-cell: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.number-display}" race-calendar-row: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 16px 0 driver-card: backgroundColor: "{colors.canvas-elevated}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px text-input-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 14px 16px height: 48px text-input-on-light: backgroundColor: "{colors.canvas-light}" textColor: "{colors.body-on-light}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 14px 16px height: 48px badge-pill: backgroundColor: "{colors.canvas-elevated}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.full}" padding: 4px 12px cta-band-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px newsletter-input-band: backgroundColor: "{colors.canvas-elevated}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 32px footer-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px 48px footer-link: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.body-sm}"

Overview

Ferrari's marketing site reads as cinematic editorial — closer to a luxury-magazine spread than a typical car-OEM site. The base canvas is near-black ({colors.canvas} — #181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables, dealer surfaces). The single brand voltage is Rosso Corsa ({colors.primary} — #da291c), the iconic Ferrari racing red, used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights.

Type runs FerrariSans as the single sans family at modest weights — display 500, body 400. CTA labels render in uppercase with generous tracking (1.1-1.4px). The brand never uses bold display copy.

The brand's strongest visual signature is the full-bleed cinematic hero photograph — top-of-page imagery shows car photography, model details, or trackside livery without any chrome competing with it. Headlines float over the bottom of the photo or sit in a tight band beneath. Spacing follows the explicit 8px token ladder: xxxs 4 / xxs 8 / xs 16 / sm 24 / md 32 / lg 48 / xl 64 / xxl 96 / super 128.

Key Characteristics:

• Single accent: {colors.primary} (Rosso Corsa #da291c) for primary CTAs, the Cavallino, F1 race-position highlights. Used scarcely.
• Near-black canvas (#181818) — never pure black. White-canvas bands only inside editorial contexts.
• Single sans family: FerrariSans across every text role.
• Display weight stays at 500 — never bold.
• CTA labels render uppercase with 1.4px tracking.
• Sharp {rounded.none} (0px) corners on every CTA, card, and band — luxury-automotive precision.
• Full-bleed cinematic hero photography is the page chrome.
• Explicit 8px spacing token ladder with named scale (xxxs through super).
• Hairlines + photographic depth — no drop shadow tiers.

Colors

Brand & Accent

• Rosso Corsa ({colors.primary} — #da291c): The iconic Ferrari racing red. Primary CTA fill, Cavallino mark, F1 driver-position highlights. Used scarcely.
• Rosso Corsa Active ({colors.primary-active} — #b01e0a): Press state.
• Rosso Corsa Hover-darker ({colors.primary-hover} — #9d2211): Documented for completeness; per the no-hover policy this is not used in preview HTML.
• Hypersail Yellow ({colors.accent-yellow-hypersail} — #fff200) + Yellow ({colors.accent-yellow} — #f6e500): Sub-brand accents reserved for the Hypersail sailing program and the global focus-ring color. Not part of the main automotive palette.

Surface

• Canvas ({colors.canvas} — #181818): Near-black page floor — never pure black, slight warmth.
• Canvas Elevated ({colors.canvas-elevated} — #303030): Cards and panels on dark canvas.
• Canvas Light ({colors.canvas-light} — #ffffff): White editorial bands (preowned listings, pricing).
• Surface Card ({colors.surface-card} — #303030): Same as canvas-elevated — driver cards, livery photo plates.
• Surface Soft Light ({colors.surface-soft-light} — #f7f7f7): Light editorial alternating band.
• Surface Strong Light ({colors.surface-strong-light} — #ebebeb): Light-canvas dividers, badges.

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): Display, body emphasis on dark.
• Body ({colors.body} — #969696): Default running-text on dark.
• Body Strong ({colors.body-strong} — #ffffff): Same as ink.
• Body On Light ({colors.body-on-light} — #181818): Default text on light bands.
• Muted ({colors.muted} — #666666): Sub-titles, captions on dark.
• Muted Soft ({colors.muted-soft} — #8f8f8f): Disabled link text.
• On Primary ({colors.on-primary} — #ffffff): White text on Rosso Corsa.

Semantic

• 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 is the licensed single sans family across every text role. Fallback: -apple-system, system-ui, sans-serif. No display/body family split.

Hierarchy

原则

• 展示字重保持 500。 编辑式自信，不浮夸。电影感摄影承担视觉重负 —— 字体无需与之竞争。
• CTA 标签大写配 1.4px 字距。 豪华精准感。
• 导航标签大写配 0.65px 字距。 与 CTA 声调一致。
• 负字距仅用于展示字。 展示尺寸 -0.36px 到 -1.6px；正文保持 0。

字体替代说明

FerrariSans 是授权字体。开源替代：Inter 字重 500，字距 -1%，或 Söhne 以接近更近的人文比例。

布局

间距系统

• 基础单位： 4px。
• Token： {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。
• 章节内边距： {spacing.xxl}（96px）用于主章节；{spacing.super}（128px）保留给 hero 带深度。

网格与容器

• 最大内容宽：编辑带约 1280px。Hero 摄影为满版。
• 编辑正文：12 栏网格。
• 功能卡栅格：桌面 2 栏（hero 分屏）、3 栏（收益栅格）、4 栏（二手列表）。
• 页脚：桌面 5 栏。

留白哲学

慷慨的编辑式节奏。电影感 hero 摄影占据慷慨的视口不动产；正文章节在下方以更紧凑的编辑布局安放。画布浅的编辑带（二手、价格）比深色电影带更紧。

层次与深度

系统使用摄影深度 + 亮度阶梯式层次。除提取的 token 中记录的一个柔小 {shadow.small} 外，没有投影。

装饰性深度

• 满版电影摄影是品牌主要的深度处理。
• 品牌红渐变（linear-gradient(180deg, #a00c01, #da291c 64%)）：用于点缀带和 CTA 悬停态的 Rosso Corsa 渐变。
• 深灰渐变（linear-gradient(180deg, #3c3c3c, #030303 64%)）：用于章节过渡的氛围暗化。

形状

圆角等级

圆角词汇默认锋利。锋利的 0px 角是品牌按钮形状 —— 从不用圆胶囊。胶囊几何仅留给徽标标签。

组件

顶部导航

top-nav-on-dark —— 深色 hero 页的默认顶栏。底色 {colors.canvas}，文字 {colors.ink}，高 64px。布局：左侧 Cavallino 标、中左主菜单（Models / F1 / Lifestyle / Owners / Preowned）、右侧语言选择器 + 工具。菜单项大写配 0.65px 字距渲染。

top-nav-on-light —— 用于编辑浅带的白画布变体。

按钮

button-primary —— 标志性 Rosso Corsa CTA。底色 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button}（14px / 700 / 1.4px 字距，大写），内边距 14px × 32px，高 48px，圆角 {rounded.none}（0px —— 锋利角）。

button-primary-active —— 按下态。底色 {colors.primary-active}。

button-outline-on-dark —— 透明配 1px 白边。底色透明，文字 {colors.ink}，1px 白边，同一锋利 0px 角。

button-outline-on-light —— 浅带上的透明配 1px 墨色边。

button-tertiary-text —— 行内文字链接，大写字距。

Hero 带

hero-band-cinema —— 满版电影感照片。底色 {colors.canvas} 在下，但照片填满视口。展示标题浮在照片底部或坐于其下紧凑带中，用 {typography.display-mega}（80px / 500 / -1.6px）。一个主 CTA + 一个描边 CTA。零内边距 —— 照片填满边到边。

hero-band-light —— 用于编辑带的白画布变体。底色 {colors.canvas-light}，文字 {colors.body-on-light}，内边距 96px。

卡片

feature-card-photo —— 图像优先卡。底色 {colors.canvas}，文字 {colors.ink}，圆角 {rounded.none}。图像填满顶部边到边；标题 + 正文在下方以紧凑字体排版。

feature-card-light —— 白画布变体。底色 {colors.canvas-light}，文字 {colors.body-on-light}，圆角 {rounded.none}，内边距 32px。

driver-card —— F1 车手肖像卡。底色 {colors.canvas-elevated}，文字 {colors.ink}，圆角 {rounded.none}，内边距 24px。布局：车手肖像 + 名字 + 车号 + 车队徽章。

编辑表面

livery-band —— 全宽 Rosso Corsa 点缀带。底色 {colors.primary}，文字 {colors.ink}，字体 {typography.display-lg}，96px 内边距。用于深色编辑带之间的醒目的涂装横幅。

preowned-listing-card —— 用于二手 Ferrari 列表栅格。底色 {colors.canvas-light}，文字 {colors.body-on-light}，圆角 {rounded.none}，内边距 24px。布局：车辆照片在顶部 + 车型名 + 年份/里程 + 价格。

规格与比赛表面

spec-cell —— 技术规格突出。透明底，值用 {typography.number-display}（80px / 700 / -1.6px 白），标签在下方用 {typography.caption-uppercase}。

race-position-cell —— F1 车手完赛位置。同一 number-display 几何，但文字用 {colors.primary} Rosso Corsa 以体现品牌的赛车身份。

race-calendar-row —— F1 赛历中的细线分隔行。布局：日期列在左、比赛名 + 赛道在中、结果列在右。

表单与标签

text-input-on-dark —— 底色 {colors.canvas}，文字 {colors.ink}，圆角 {rounded.sm}（4px），内边距 14px × 16px，高 48px，1px {colors.hairline} 边框。

text-input-on-light —— 白画布变体。

badge-pill —— 小型大写胶囊。底色 {colors.canvas-elevated}，文字 {colors.ink}，字体 {typography.caption-uppercase}（11px / 600 / 1.1px 字距，大写），圆角 {rounded.full}（9999px），内边距 4px × 12px。唯一使用胶囊几何的地方。

订阅 / CTA / 页脚

newsletter-input-band —— 订阅条带。底色 {colors.canvas-elevated}，内边距 32px，圆角 {rounded.sm}。包含行内邮箱输入 + 主 CTA。

cta-band-dark —— 页脚前带。底色 {colors.canvas}，居中展示标题用 {typography.display-lg}，单一 Rosso Corsa CTA。96px 内边距。

footer-dark —— 收尾深色页脚。底色 {colors.canvas}，文字 {colors.body}。5 栏链接列表。64×48px 内边距。

footer-link —— 底色透明，文字 {colors.body}，字体 {typography.body-sm}。

推荐与避免

推荐

• 把 {colors.primary}（Rosso Corsa）留给主 CTA、Cavallino 标和 F1 比赛位置突出。
• 每个 CTA 用 {rounded.none}（0px 锋利角）—— 品牌的标志性精准。
• CTA 标签用 {typography.button} 大写配 1.4px 字距渲染。
• 每个 hero 配满版电影感照片 —— 照片就是深度。
• 使用明确的 8px 间距阶梯（xxxs 到 super）而非临时 px 值。
• 展示字重保持 500 —— 绝不粗体。

避免

• 不要在 Rosso Corsa 之外引入其他饱和品牌色。
• 不要用圆角或胶囊 CTA —— 锋利 0px 角是品牌按钮。
• 不要加粗展示字。电影感摄影承担视觉重负。
• 不要在 Hypersail 帆船项目语境之外使用 Hypersail 黄。
• 不要用纯黑画布。品牌画布是 {colors.canvas}（#181818）—— 略暖。
• 不要增加投影等级。摄影 + 亮度阶梯式层次承担深度。
• 不要从第三方 widget（cookie 同意、OneTrust）抽取 CTA 色。品牌的 CTA 色是实际产品 CTA 出现的色，不是注入模态上的色。

响应式行为

断点

触控目标

• 主 CTA 48px 高 —— 达 WCAG AAA（44 × 44）。
• 导航项大写配 0.65px 字距渲染，加内边距形成 48px 有效点击区。

折叠策略

• 顶栏在 768px 以下切为汉堡菜单。
• Hero 照片通过艺术指导按断点重新构图 —— 桌面承载宽电影感；手机裁剪更紧或转为纵向。
• 功能卡栅格：4 栏 → 3 栏 → 2 栏 → 1 栏。
• F1 车手卡：桌面 2 栏，手机 1 栏。

迭代指南

1. 一次专注一个组件。
2. CTA 默认 {rounded.none}（0px 锋利）。卡片也用 {rounded.none}。胶囊仅留给徽标。
3. 变体作为独立条目存在于 components: 内。
4. 始终用 {token.refs} —— 绝不内联 hex。
5. 悬停态永不入文档。
6. FerrariSans 500 用于展示，400/700 用于正文。CTA 和导航大写 + 字距。
7. Rosso Corsa 保持稀缺 —— 仅用于主 CTA、Cavallino、比赛位置突出。
8. 使用明确的 8px 命名间距阶梯。

已知缺口

• FerrariSans 是授权字体；Inter 500 是文档化替代。
• 动效时长（hero 视差、涂装带入场、比赛位置计数器）不在范围内。
• 产品内表面（二手配置器、F1 遥测叠加）仅通过营销表面部分捕获。
• 超出聚焦态的表单校验态在截取表面上不可见。
• Hypersail 黄 token 已提取但仅出现在 Hypersail 帆船项目语境中 —— 记录为作用域点缀。