Ferrari

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

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 80px | 500 | 1.05 | -1.6px | Homepage hero h1 |

| `{typography.display-xl}` | 56px | 500 | 1.1 | -1.12px | Subsidiary heroes |

| `{typography.display-lg}` | 36px | 500 | 1.2 | -0.36px | Section heads, livery band |

| `{typography.display-md}` | 26px | 500 | 1.5 | 0.195px | Sub-section heads |

| `{typography.title-md}` | 18px | 700 | 1.2 | 0 | Component titles |

| `{typography.title-sm}` | 16px | 500 | 1.4 | 0.08px | List labels |

| `{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 captions |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 1.1px | Section labels, badges |

| `{typography.button}` | 14px | 700 | 1.0 | 1.4px (uppercase) | CTA pill labels |

| `{typography.nav-link}` | 13px | 600 | 1.4 | 0.65px (uppercase) | Top-nav menu items |

| `{typography.number-display}` | 80px | 700 | 1.0 | -1.6px | Race position highlights, spec values |

Principles

• **Display weight stays at 500.** Editorial confidence, not bombastic. The cinematic photography is doing the visual heavy-lifting — type doesn't need to compete.
• **CTA labels are uppercase with 1.4px tracking.** Luxury-precision feel.
• **Nav labels are uppercase with 0.65px tracking.** Consistent with CTA voice.
• **Negative letter-spacing on display only.** -0.36px to -1.6px on display sizes; body stays at 0.

Note on Font Substitutes

FerrariSans is licensed. Open-source substitute: **Inter** at weight 500 with letter-spacing -1%, or **Söhne** for closer humanist proportions.

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:** `{spacing.xxl}` (96px) for major bands; `{spacing.super}` (128px) reserved for hero band depth.

Grid & Container

• Max content width: ~1280px on editorial bands. Hero photography goes full-bleed.
• Editorial body: 12-column grid.
• Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids, 4-up for preowned listing tiles.
• Footer: 5-column at desktop.

Whitespace Philosophy

Generous editorial pacing. Cinematic hero photography occupies generous viewport real-estate; body sections sit in tighter editorial layouts beneath. The canvas-light editorial bands (preowned, pricing) carry tighter density than the dark cinema bands.

Elevation & Depth

The system uses **photographic depth + brightness-step** elevation. No drop shadows except a single soft-small `{shadow.small}` documented in extracted tokens.

| Level | Treatment | Use |

|---|---|---|

| Flat (canvas) | `{colors.canvas}` (#181818) | Body bands, footer |

| Card | `{colors.canvas-elevated}` (#303030) | Driver cards, livery plates |

| Light band | `{colors.canvas-light}` (#ffffff) | Preowned listings, pricing |

| Hairline border | 1px `{colors.hairline}` or `{colors.hairline-on-light}` | Card outlines, dividers |

| Soft drop | `0 4px 8px rgba(0,0,0,0.1)` | Hovered cards (single shadow tier) |

| Photographic | Full-bleed cinema imagery | Hero band, livery photographs |

Decorative Depth

• **Full-bleed cinema photography** is the brand's primary depth treatment.
• **Brand red gradient** (`linear-gradient(180deg, #a00c01, #da291c 64%)`): The Rosso Corsa gradient used inside accent bands and CTA hover states.
• **Dark grey gradient** (`linear-gradient(180deg, #3c3c3c, #030303 64%)`): Atmospheric darken used at section transitions.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Every CTA, card, band — dominant radius |

| `{rounded.xs}` | 2px | Tight badges (rare) |

| `{rounded.sm}` | 4px | Form inputs |

| `{rounded.md}` | 6px | Compact cards (rare) |

| `{rounded.lg}` | 8px | Mobile-only collapse cards |

| `{rounded.xl}` | 12px | Modal/dialog corners (rare) |

| `{rounded.full}` | 9999px | Avatar plates, badge pills |

The radius vocabulary is **sharp by default**. Sharp 0px corners are the brand button shape — never rounded pills. Pill geometry is reserved for badge labels only.

Components

Top Navigation

**`top-nav-on-dark`** — Default top nav on dark hero pages. Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Cavallino mark left, primary horizontal menu (Models / F1 / Lifestyle / Owners / Preowned), language picker + utilities right. Menu items render uppercase with 0.65px tracking.

**`top-nav-on-light`** — White-canvas variant for editorial light bands.

Buttons

**`button-primary`** — The 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 with 1px white border. Background transparent, text `{colors.ink}`, 1px white border, same sharp 0px corners.

**`button-outline-on-light`** — Transparent with 1px ink border on light bands.

**`button-tertiary-text`** — Inline text link, uppercase tracking.

Hero Bands

**`hero-band-cinema`** — Full-bleed cinematic photograph. Background `{colors.canvas}` underneath, but the photo fills the viewport. Display headline floats over the bottom of the photo or sits in a tight band beneath, in `{typography.display-mega}` (80px / 500 / -1.6px). One primary CTA + one outline CTA. Zero padding — the photo fills edge-to-edge.

**`hero-band-light`** — White-canvas variant for editorial bands. 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 fills the top edge-to-edge; title + body sit beneath in tight typography.

**`feature-card-light`** — White-canvas variant. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, rounded `{rounded.none}`, padding 32px.

**`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 Surfaces

**`livery-band`** — A full-width Rosso Corsa accent band. Background `{colors.primary}`, text `{colors.ink}`, type `{typography.display-lg}`, 96px padding. Used as a standout livery callout between dark editorial bands.

**`preowned-listing-card`** — Used in the preowned Ferrari listing grid. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, rounded `{rounded.none}`, padding 24px. Layout: car photo top + model name + year/mileage + price.

Spec & Race Surfaces

**`spec-cell`** — Technical spec callout. Transparent background, value in `{typography.number-display}` (80px / 700 / -1.6px white), label below in `{typography.caption-uppercase}`.

**`race-position-cell`** — F1 driver finishing position. Same number-display geometry but text in `{colors.primary}` Rosso Corsa for the brand's racing identity.

**`race-calendar-row`** — Hairline-divided row in the F1 race calendar. Layout: date column left, race name + circuit middle, results column right.

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.

**`text-input-on-light`** — White-canvas variant.

**`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. The only place pill geometry is used.

Newsletter / CTA / Footer

**`newsletter-input-band`** — Newsletter signup band. Background `{colors.canvas-elevated}`, padding 32px, rounded `{rounded.sm}`. Holds an inline email input + primary CTA.

**`cta-band-dark`** — Pre-footer band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single Rosso Corsa CTA. 96px padding.

**`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

• Reserve `{colors.primary}` (Rosso Corsa) for primary CTAs, the Cavallino mark, and F1 race-position highlights.
• Set every CTA at `{rounded.none}` (0px sharp corners) — the brand's signature precision.
• Render CTA labels in uppercase with 1.4px tracking via `{typography.button}`.
• Pair every hero with a full-bleed cinematic photograph — the photograph IS the depth.
• Use the explicit 8px spacing ladder (`xxxs` through `super`) rather than ad-hoc px values.
• Keep display weight at 500 — never bold.

Don't

• Don't introduce a saturated brand color other than Rosso Corsa.
• Don't use rounded or pill CTAs — sharp 0px corners are the brand button.
• Don't bold display copy. The cinematic photography does the visual heavy-lifting.
• Don't use Hypersail yellow outside the Hypersail sailing program context.
• Don't use pure black canvas. The brand canvas is `{colors.canvas}` (#181818) — slightly warm.
• Don't add drop shadow tiers. Photography + brightness-step elevation carry the depth.
• Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 640px | Hero photograph crops vertically; 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 | Full hero h1 80px; feature card grid 3-up; preowned listing 4-up. |

| Wide | > 1280px | Editorial body content caps at 1280px; hero photography continues full-bleed. |

Touch Targets

• Primary CTA at 48px height — at WCAG AAA (44 × 44).
• Nav items render uppercase with 0.65px tracking, padded for an effective 48px tap area.

Collapsing Strategy

• Top nav switches to hamburger below 768px.
• Hero photograph reframes per breakpoint via art direction — desktop carries wide cinematic; mobile crops tighter or shifts to vertical.
• Feature card grid: 4-up → 3-up → 2-up → 1-up.
• F1 driver cards: 2-up at desktop, 1-up at mobile.

Iteration Guide

1. Focus on a single component at a time.

2. CTAs default to `{rounded.none}` (0px sharp). Cards use `{rounded.none}` too. Pill is reserved for badges.

3. Variants live as separate entries inside `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. FerrariSans 500 for display, 400/700 for body. Uppercase + tracking on CTAs and nav.

7. Rosso Corsa stays scarce — primary CTAs, Cavallino, race-position highlights only.

8. Use the explicit 8px named spacing ladder.

Known Gaps

• FerrariSans is a licensed typeface; Inter at weight 500 is the documented substitute.
• Animation timings (hero parallax, livery band entrance, race position counter) out of scope.
• In-product surfaces (preowned configurator, F1 telemetry overlays) only partially captured via marketing surfaces.
• Form validation states beyond focus not visible on captured surfaces.
• Hypersail yellow tokens are extracted but only appear in the Hypersail sailing program context — documented as scoped accents.

개요

Ferrari의 마케팅 사이트는 영화 사설처럼 읽혀집니다. 일반적인 자동차 OEM 사이트보다 고급 잡지가 펼쳐져 있는 곳에 더 가깝습니다. 기본 캔버스는 순수한 흰색 표시 유형을 유지하는 **검은색에 가까운** (`{colors.canvas}` — #181818)입니다. 흰색 캔버스 띠는 특정 편집 내용(중고 목록, 가격표, 딜러 표면) 내에서만 나타납니다. 단일 브랜드 전압은 기본 CTA, Cavallino 마크 및 Formula 1 경주 위치 하이라이트에 거의 사용되지 않는 상징적인 페라리 레이싱 레드인 **Rosso Corsa**(`{colors.primary}` — #da291c)입니다.

유형은 **FerrariSans**를 적당한 가중치(디스플레이 500, 본문 400)의 단일 산즈 제품군으로 실행합니다. CTA 라벨은 넉넉한 추적(1.1-1.4px)으로 대문자로 렌더링됩니다. 브랜드는 굵은 표시 문구를 절대 사용하지 않습니다.

브랜드의 가장 강력한 시각적 시그니처는 **풀 블리드 영화 영웅 사진**입니다. 페이지 상단 이미지에는 크롬과 경쟁하지 않고 자동차 사진, 모델 세부 정보 또는 트랙사이드 상징이 표시됩니다. 헤드라인은 사진 하단 위에 떠 있거나 사진 아래에 꽉 조이는 띠 모양으로 표시됩니다. 간격은 명시적인 8px 토큰 래더를 따릅니다: `xxxs` 4 / `xxs` 8 / `xs` 16 / `sm` 24 / `md` 32 / `lg` 48 / `xl` 64 / `xxl` 96 / `super` 128.

**주요 특징:**

• 단일 악센트: 기본 CTA, Cavallino, F1 경주 위치 하이라이트를 위한 `{colors.primary}`(Rosso Corsa #da291c). 거의 사용되지 않았습니다.
• 검정색에 가까운 캔버스(#181818) — 절대 순수한 검정색이 아닙니다. 흰색 캔버스 밴드는 편집 컨텍스트 내에서만 사용됩니다.
• 단일 산세 제품군: 모든 텍스트 역할에 걸쳐 FerrariSans가 있습니다.
• 표시 가중치는 500으로 유지되며 굵게 표시되지 않습니다.
• CTA 라벨은 1.4px 추적으로 대문자를 렌더링합니다.
• 모든 CTA, 카드 및 밴드의 날카로운 `{rounded.none}`(0px) 모서리 — 고급 자동차 정밀도.
• 풀블리드 시네마틱 영웅 사진이 페이지 크롬입니다.
• 이름이 지정된 스케일(xxxs부터 super까지)이 있는 명시적인 8px 간격 토큰 사다리.
• 헤어라인 + 사진 깊이 — 그림자 계층이 없습니다.

색상

브랜드 및 액센트

• **Rosso Corsa** (`{colors.primary}` — #da291c): 상징적인 페라리 레이싱 레드. 기본 CTA 필, Cavallino 마크, F1 드라이버 위치 하이라이트. 거의 사용되지 않았습니다.
• **Rosso Corsa Active** (`{colors.primary-active}` — #b01e0a): 프레스 상태.
• **Rosso Corsa Hover-darker** (`{colors.primary-hover}` — #9d2211): 완전성을 위해 문서화되었습니다. 마우스오버 금지 정책에 따라 미리보기 HTML에서는 사용되지 않습니다.
• **Hypersail Yellow** (`{colors.accent-yellow-hypersail}` — #fff200) + **Yellow** (`{colors.accent-yellow}` — #f6e500): Hypersail 항해 프로그램과 글로벌 포커스 링 색상을 위해 예약된 하위 브랜드 액센트입니다. 주요 자동차 팔레트의 일부가 아닙니다.

표면

• **캔버스** (`{colors.canvas}` — #181818): 거의 검정색에 가까운 페이지 바닥 — 결코 순수한 검정색이 아니며 약간의 따뜻함이 있습니다.
• **Canvas Elevated** (`{colors.canvas-elevated}` — #303030): 어두운 캔버스에 카드와 패널이 있습니다.
• **캔버스 라이트**(`{colors.canvas-light}` — #ffffff): 흰색 편집 밴드(중고 목록, 가격).
• **Surface Card** (`{colors.surface-card}` — #303030): 캔버스 상승과 동일 — 드라이버 카드, 상징 사진 플레이트.
• **표면 소프트 라이트** (`{colors.surface-soft-light}` — #f7f7f7): 라이트 편집 교대 밴드.
• **표면 강한 빛** (`{colors.surface-strong-light}` — #ebebeb): 밝은 캔버스 구분선, 배지.

헤어라인

• **헤어라인** (`{colors.hairline}` — #303030): 어두운 부분에 1px 구분선 — `{colors.canvas-elevated}`와 동일한 16진수입니다.
• **Hairline On Light** (`{colors.hairline-on-light}` — #d2d2d2): 밝은 밴드의 1px 구분선.
• **Hairline Soft** (`{colors.hairline-soft}` — #ebebeb): 더 가벼운 구분선.

텍스트

• **잉크** (`{colors.ink}` — #ffffff): 디스플레이, 본문은 어두운 부분을 강조합니다.
• **본문**(`{colors.body}` — #969696): 어두운 기본 실행 텍스트입니다.
• **Body Strong** (`{colors.body-strong}` — #ffffff): 잉크와 동일합니다.
• **Body On Light** (`{colors.body-on-light}` — #181818): 밝은 띠의 기본 텍스트입니다.
• **음소거** (`{colors.muted}` — #666666): 부제목, 캡션이 어두움.
• **음소거 소프트** (`{colors.muted-soft}` — #8f8f8f): 링크 텍스트가 비활성화되었습니다.
• **On Primary** (`{colors.on-primary}` — #ffffff): Rosso Corsa의 흰색 텍스트입니다.

의미론

• **정보** (`{colors.semantic-info}` — #4c98b9): 정보 배지, 설명선 배경.
• **성공** (`{colors.semantic-success}` — #03904a): 확인.
• **경고** (`{colors.semantic-warning}` — #f13a2c): 유효성 검사 경고.

타이포그래피

글꼴 계열

**FerrariSans**는 모든 텍스트 역할에 걸쳐 라이선스가 부여된 단일 산세 제품군입니다. 대체: `-apple-system, system-ui, sans-serif`. 디스플레이/바디 패밀리 분할이 없습니다.

계층 구조

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | 사용 |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 80px | 500 | 1.05 | -1.6px | 홈페이지 히어로 h1 |

| `{typography.display-xl}` | 56px | 500 | 1.1 | -1.12px | 자회사 영웅 |

| `{typography.display-lg}` | 36px | 500 | 1.2 | -0.36px | 섹션 헤드, ​​정복 밴드 |

| `{typography.display-md}` | 26px | 500 | 1.5 | 0.195px | 하위 부문장 |

| `{typography.t

概要

フェラーリのマーケティング サイトは映画のような社説で、典型的な自動車 OEM サイトというよりも高級雑誌の見開きに近いものになっています。ベース キャンバスは **黒に近い** (`{colors.canvas}` — #181818) で、純粋な白の表示タイプを保持します。白いキャンバスのバンドは、特定の編集コンテキスト (中古品のリスト、価格表、ディーラーの表面) 内でのみ表示されます。単一ブランドのボルテージは **Rosso Corsa** (`{colors.primary}` — #da291c) です。これは象徴的なフェラーリのレーシングレッドで、プライマリー CTA、Cavallino マーク、F1 のレースポジションのハイライトにはほとんど使用されません。

Type は、控えめな重みで **FerrariSans** を単一のサンファミリーとして実行します。ディスプレイ 500、本体 400 です。CTA ラベルは、十分なトラッキング (1.1 ～ 1.4 ピクセル) を使用して大文字で表示されます。このブランドは決して大胆なコピーを使用しません。

このブランドの最も強力な視覚的特徴は、**映画のようなフルブリードのヒーロー写真**です。ページのトップの画像には、車の写真、モデルの詳細、またはトラックサイドのカラーリングが、それと競合するクロムなしで表示されています。見出しは写真の下部に浮かんだり、その下のきつい帯の中に収まったりします。間隔は明示的な 8px トークン ラダーに従います: `xxxs` 4 / `xxs` 8 / `xs` 16 / `sm` 24 / `md` 32 / `lg` 48 / `xl` 64 / `xxl` 96 / `super` 128。

**主な特徴:**

• 単一のアクセント: プライマリー CTA、Cavallino、F1 レースポジションのハイライト用の「{colors.primary}」 (Rosso Corsa #da291c)。ほとんど使用されていません。
• ほぼ黒のキャンバス (#181818) — 決して純粋な黒ではありません。白いキャンバスのバンドは編集コンテキスト内でのみ使用されます。
• 家族のない独身者: すべてのテキストの役割にわたって FerrariSans。
• 表示ウェイトは 500 のままです。決して太字ではありません。
• CTA ラベルは 1.4 ピクセルのトラッキングで大文字をレンダリングします。
• すべての CTA、カード、バンドの鋭い `{rounded.none}` (0px) コーナー — 高級自動車の精度。
• フルブリードシネマティックヒーロー写真はページクロームです。
• 名前付きスケール (xxxs から super) を使用した明示的な 8 ピクセル間隔のトークン ラダー。
• ヘアライン + 写真の奥行き — ドロップ シャドウ層はありません。

色

ブランドとアクセント

• **Rosso Corsa** (`{colors.primary}` — #da291c): 象徴的なフェラーリのレーシングレッド。プライマリーCTAフィル、カバリーノマーク、F1ドライバーポジションハイライト。ほとんど使用されていません。
• **Rosso Corsa Active** (`{colors.primary-active}` — #b01e0a): 状態を押します。
• **Rosso Corsa Hover-dark** (`{colors.primary-hover}` — #9d2211): 完全を期すために文書化されています。ホバー禁止ポリシーに従って、これはプレビュー HTML では使用されません。
• **ハイパーセイル イエロー** (`{colors.accent- yellow-hypersail}` — #fff200) + **イエロー** (`{colors.accent- yellow}` — #f6e500): ハイパーセイル セーリング プログラムとグローバル フォーカス リングの色用に予約されたサブブランド アクセント。主要な自動車パレットの一部ではありません。

表面

• **キャンバス** (`{colors.canvas}` — #181818): 黒に近いページフロア — 決して純粋な黒ではなく、わずかに暖かみがあります。
• **キャンバス エレベーテッド** (`{colors.canvas-elevated}` — #303030): ダーク キャンバス上のカードとパネル。
• **Canvas Light** (`{colors.canvas-light}` — #ffffff): 白い編集バンド (中古品リスト、価格設定)。
• **Surface Card** (`{colors.surface-card}` — #303030): Canvas-elevated と同じ — ドライバー カード、カラー写真プレート。
• **Surface Soft Light** (`{colors.surface-soft-light}` — #f7f7f7): ライトの編集用交互バンド。
• **Surface Strong Light** (`{colors.surface-strong-light}` — #ebebeb): ライト キャンバスの仕切り、バッジ。

ヘアライン

• **ヘアライン** (`{colors.hairline}` — #303030): ダークの 1 ピクセルの分割線 — `{colors.canvas-elevated}` と同じ 16 進数。
• **ライト上のヘアライン** (`{colors.hairline-on-light}` — #d2d2d2): ライト バンド上の 1 ピクセルの分割線。
• **Hairline Soft** (`{colors.hairline-soft}` — #ebebeb): より軽いディバイダー。

テキスト

• **インク** (`{colors.ink}` — #ffffff): ディスプレイ、暗い部分を強調したボディ。
• **本文** (`{colors.body}` — #969696): 暗い色のデフォルトのランニングテキスト。
• **ボディ ストロング** (`{colors.body-strong}` — #ffffff): インクと同じ。
• **Body On Light** (`{colors.body-on-light}` — #181818): ライト バンド上のデフォルトのテキスト。
• **ミュート** (`{colors.muted}` — #666666): 暗闇での字幕、キャプション。
• **ミュート ソフト** (`{colors.muted-soft}` — #8f8f8f): リンク テキストを無効にしました。
• **プライマリ上** (`{colors.on-primary}` — #ffffff): ロッソ コルサの白いテキスト。

セマンティック

• **情報** (`{colors.semantic-info}` — #4c98b9): 情報バッジ、吹き出しの背景。
• **成功** (`{colors.semantic-success}` — #03904a): 確認。
• **警告** (`{colors.semantic-warning}` — #f13a2c): 検証の警告。

タイポグラフィー

フォントファミリー

**FerrariSans** は、あらゆるテキストの役割にわたってライセンスを取得した、家族を持たない独身者です。フォールバック: `-apple-system、system-ui、sans-serif`。ディスプレイ/本体のファミリー分割はありません。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 |使用 |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 80ピクセル | 500 | 1.05 | -1.6ピクセル |ホームページ ヒーロー h1 |

| `{typography.display-xl}` | 56ピクセル | 500 | 1.1 | -1.12ピクセル |サブヒーロー |

| `{typography.display-lg}` | 36ピクセル | 500 | 1.2 | -0.36ピクセル |課長、カラーバンド |

| `{typography.display-md}` | 26ピクセル | 500 | 1.5 | 0.195ピクセル |サブセクションの責任者 |

| `{タイポグラフィ.t