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 사이트보다 고급 잡지가 펼쳐져 있는 곳에 더 가깝습니다. 기본 캔버스는 순백색 디스플레이 유형을 유지하는 **검은색에 가까운** (`` — #181818)입니다. 흰색 캔버스 띠는 특정 편집 내용(중고 목록, 가격표, 딜러 표면) 내에서만 나타납니다. 단일 브랜드 전압은 기본 CTA, Cavallino 마크 및 Formula 1 레이스 위치 하이라이트에 거의 사용되지 않는 상징적인 페라리 레이싱 레드인 **Rosso Corsa**(`` — #da291c)입니다.

Type은 **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.

**주요 특성:**

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

색상

브랜드 및 액센트

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

표면

• **캔버스** (`` — #181818): 검정색에 가까운 페이지 바닥 — 절대 순수한 검정색이 아니며 약간의 따뜻함이 있습니다.
• **캔버스 상승**(`` — #303030): 어두운 캔버스의 카드 및 패널.
• **캔버스 라이트** (`` — #ffffff): 흰색 편집 밴드(중고 목록, 가격).
• **표면 카드** (`` — #303030): 캔버스 높이와 동일 — 드라이버 카드, 리버리 사진 플레이트.
• **표면 소프트 라이트**(`` — #f7f7f7): 라이트 편집 교대 밴드.
• **표면 강한 빛**(`` — #ebebeb): 밝은 캔버스 구분선, 배지.

헤어라인

• **가는 선** (`` — #303030): 어두운 부분에 1px 구분선 — ``.
과 동일한 16진수
• **밝은 헤어라인**(`` — #d2d2d2): 밝은 밴드의 1px 구분선.
• **헤어라인 소프트**(`` — #ebebeb): 더 가벼운 칸막이.

텍스트

• **잉크** (`` — #ffffff): 디스플레이, 어두운 부분에 본문 강조.
• **본문**(`` — #969696): 어두운 기본 실행 텍스트입니다.
• **바디 스트롱**(`` — #ffffff): 잉크와 동일합니다.
• **Body On Light** (`` — #181818): 밝은 띠의 기본 텍스트.
• **음소거됨**(`` — #666666): 부제목, 캡션이 어두움.
• **음소거 소프트**(`` — #8f8f8f): 링크 텍스트가 비활성화되었습니다.
• **기본**(`` — #ffffff): Rosso Corsa의 흰색 텍스트

의미

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

타이포그래피

글꼴군

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

계층

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

사용

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

| _`` | 80px | 500 | 1.05 | -1.6px | 홈페이지 히어로 h1 |

| _`` | 56px | 500 | 1.1 | -1.12px | 자회사 히어로 |

| _`` | 36px | 500 | 1.2 | -0.36px | 섹션 헤드, 상징 밴드 |

| _`` | 26px | 500 | 1.5 | 0.195px | 하위 섹션 머리 |

| _`` | 18px | 700 | 1.2 | 0 | 구성요소 제목 |

| _`` | 16px | 500 | 1.4 | 0.08px | 라벨 목록 |

| _`` | 14px | 400 | 1.5 | 0 | 기본 본문 |

| _`` | 13px | 400 | 1.5 | 0 | 바닥글 본문 |

| _`` | 12px | 400 | 1.4 | 0 | 사진 캡션 |

| _`` | 11px | 600 | 1.4 | 1.1픽셀 | 섹션 라벨, 배지 |

| _`` | 14px | 700 | 1.0 | 1.4px(대문자) | CTA 알약 라벨 |

| _`` | 13px | 600 | 1.4 | 0.65px(대문자) | 상단 탐색 메뉴 항목 |

| _`` | 80px | 700 | 1.0 | -1.6px | 레이스 포지션 하이라이트, 사양 값 |

원칙

• **디스플레이 가중치는 500으로 유지됩니다.** 과장된 것이 아닌 편집상의 자신감입니다. 영화 사진은 시각적으로 힘든 작업을 수행하므로 활자 경쟁이 필요하지 않습니다.
• **CTA 라벨은 1.4px 추적으로 대문자입니다.** 고급스럽고 정밀한 느낌.
• **탐색 라벨은 0.65px 추적으로 대문자입니다.** CTA 음성과 일치합니다.
• **디스플레이에만 음수 문자 간격이 있습니다.** 디스플레이 크기에서 -0.36px ~ -1.6px; 본문은 0.
에 유지됩니다.

글꼴 대체에 대한 참고사항

FerrariSans is licensed. 오픈 소스 대체: **Inter**(가중치 500, 문자 간격 -1%) 또는 **Söhne**(더 가까운 인본주의적 비율).

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 16px · `` 24px · `` 32px · `` 48px · `` 64px · `` 96px · `` 128px.
• **섹션 패딩:** 주요 밴드의 경우 ``(96px); ``(128px)은 히어로 밴드 깊이용으로 예약되어 있습니다.

그리드 및 컨테이너

• 최대 콘텐츠 너비: 편집 밴드에서 최대 1280픽셀. 영웅 사진이 본격화됩니다.
• 편집 본문: 12열 그리드.
• 기능 카드 그리드: 영웅 분할을 위한 데스크탑의 2-up, 혜택 그리드의 3-up, 중고 목록 타일의 4-up.
• 바닥글: 데스크탑의 5열.

공백 철학

풍부한 편집 속도. 영화 같은 영웅 사진은 넉넉한 뷰포트 공간을 차지합니다. 본문 섹션은 아래에 더 엄격한 편집 레이아웃에 있습니다. 캔버스 라이트 편집용 밴드(중고, 가격 책정)는 다크 시네마 밴드보다 밀도가 더 높습니다.

고도 및 깊이

시스템은 **사진 심도 + 밝기 단계** 고도를 사용합니다. 추출된 토큰에 문서화된 단일의 작은 ``을 제외하고는 그림자가 없습니다.

| 레벨 | 치료 | |

사용

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

| 플랫(캔버스) | _`` (#181818) | 바디 밴드, 바닥글 |

| 카드 | _`` (#303030) | 드라이버 카드, 상징 플레이트 |

| 라이트 밴드 | _`` (#ffffff) | 중고 목록, 가격 |

| 헤어라인 테두리 | 1px `` 또는 `` | 카드 개요, 구분선 |

| 소프트 드롭 | _`0 4px 8px rgba(0,0,0,0.1)` | 마우스오버된 카드(단일 섀도우 계층) |

| 사진 | 풀블리드 영화 이미지 | 히어로밴드, 리버리 사진 |

장식적 깊이

• **풀 블리드 영화 사진**은 브랜드의 기본 심도 처리입니다.
• **브랜드 빨간색 그라데이션**(`linear-gradient(180deg, , 64%)`): 악센트 밴드 및 CTA 호버 상태 내부에 사용되는 Rosso Corsa 그라데이션입니다.
• **어두운 회색 그라데이션** (`linear-gradient(180deg, , 64%)`): 섹션 전환에 대기 어둡게 사용됩니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 0픽셀 | 모든 CTA, 카드, 밴드 — 주요 반경 |

| _`` | 2픽셀 | 꽉 끼는 배지(드물게) |

| _`` | 4픽셀 | 양식 입력 |

| _`` | 6픽셀 | 컴팩트 카드(희귀) |

| _`` | 8픽셀 | 모바일 전용 축소 카드 |

| _`` | 12px | 모달/대화상자 모서리(드물게) |

| _`` | 9999px | 아바타 플레이트, 배지 알약 |

반경 어휘는 **기본적으로 샤프**입니다. 날카로운 0px 모서리는 브랜드 버튼 모양이며 결코 둥근 알약이 아닙니다. 알약 모양은 배지 라벨용으로만 예약되어 있습니다.

구성요소

상단 탐색

**`top-nav-on-dark`** — 다크 히어로 페이지의 기본 상단 탐색입니다. 배경 ``, 텍스트 ``, 높이 64px. 레이아웃: Cavallino 마크 왼쪽, 기본 가로 메뉴(모델/F1/라이프스타일/소유자/중고), 언어 선택기 + 유틸리티 오른쪽. 메뉴 항목은 0.65px 추적으로 대문자로 렌더링됩니다.

**`top-nav-on-light`** — 편집용 라이트 밴드용 흰색 캔버스 변형.

버튼

_**`button-primary`** — 서명 Rosso Corsa CTA. 배경 ``, 텍스트 ``, 유형 ``(14px / 700 / 1.4px 추적, 대문자), 패딩 14px × 32px, 높이 48px, **둥근 ``(0px — 날카로운 모서리)**.

_**`button-primary-active`** — 프레스 상태. 배경 ``.

**`button-outline-on-dark`** — 1px 흰색 테두리가 있는 투명합니다. 배경 투명, 텍스트 ``, 1px 흰색 테두리, 동일한 날카로운 0px 모서리.

**`button-outline-on-light`** — 밝은 띠에 1px 잉크 테두리가 있는 투명.

**`button-tertiary-text`** — 인라인 텍스트 링크, 대문자 추적.

히어로 밴드

**`hero-band-cinema`** — 풀 블리드 영화 사진. 배경은 `` 아래에 있지만 사진이 뷰포트를 채웁니다. 표시 헤드라인은 ``(80px / 500 / -1.6px) 형식으로 사진 하단 위에 떠 있거나 아래에 꽉 조여진 밴드에 표시됩니다. 기본 CTA 1개 + 개요 CTA 1개. 제로 패딩 - 사진이 가장자리까지 채워집니다.

**`hero-band-light`** — 편집 밴드용 흰색 캔버스 변형입니다. 배경 ``, 텍스트 ``, 패딩 96px.

카드

**`feature-card-photo`** — 이미지 우선 카드. 배경 ``, 텍스트 ``, 반올림 ``. 이미지가 위쪽 가장자리에서 가장자리까지 채워집니다. 제목과 본문은 타이트한 타이포그래피로 아래에 있습니다.

**`feature-card-light`** — 흰색 캔버스 변형. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 32px.

**`driver-card`** — F1 드라이버 초상화 카드. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 24px. 레이아웃: 운전자 초상화 + 이름 + 경주 번호 + 팀 배지.

사설 표면

**`livery-band`** — 전폭 Rosso Corsa 액센트 밴드. 배경 ``, 텍스트 ``, 유형 ``, 96px 패딩. 어두운 편집 밴드 사이에서 눈에 띄는 상징 설명선으로 사용됩니다.

**`preowned-listing-card`** — 중고 Ferrari 목록 그리드에 사용됩니다. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 24px. 레이아웃: 차량 사진 상단 + 모델명 + 연식/마일리지 + 가격.

사양 및 레이스 표면

**`spec-cell`** — 기술 사양 설명선. 투명한 배경, `` 값(80px / 700 / -1.6px 흰색), 아래 라벨 ``.

**`race-position-cell`** — F1 드라이버 마무리 위치. 동일한 숫자 표시 기하학이지만 브랜드의 레이싱 아이덴티티를 위해 `` Rosso Corsa의 텍스트입니다.

**`race-calendar-row`** — F1 경주 달력의 헤어라인으로 구분된 행. 레이아웃: 왼쪽 날짜 열, 경주 이름 + 서킷 중간, 결과 열 오른쪽.

양식 및 태그

**`text-input-on-dark`** — 배경 ``, 텍스트 ``, 반올림 ``(4px), 패딩 14px × 16px, 높이 48px, 1px `` 테두리.

**`text-input-on-light`** — 흰색 캔버스 변형.

**`badge-pill`** — 작은 대문자 알약입니다. 배경 ``, 텍스트 ``, 유형 ``(11px / 600 / 1.1px 추적, 대문자), 반올림 ``(9999px), 패딩 4px × 12px. 알약 기하학이 사용되는 유일한 장소입니다.

뉴스레터/CTA/바닥글

**`newsletter-input-band`** — 뉴스레터 가입 밴드. 배경 ``, 패딩 32px, 반올림 ``. 인라인 이메일 입력 + 기본 CTA를 보유합니다.

**`cta-band-dark`** — 프리풋터 밴드. 배경 ``, ``의 중앙 디스플레이 헤드라인, 단일 Rosso Corsa CTA. 96px 패딩.

**`footer-dark`** — 어두운 바닥글을 닫습니다. 배경 ``, 텍스트 ``. 5열 링크 목록. 64×48px 패딩.

**`footer-link`** — 배경 투명, 텍스트 ``, 유형 ``.

해야 할 일과 하지 말아야 할 일

하라

• 기본 CTA, Cavallino 마크 및 F1 레이스 포지션 하이라이트를 위해 ``(Rosso Corsa)를 예약하세요.
• 모든 CTA를 ``(0px 날카로운 모서리)로 설정하세요. 이는 브랜드의 시그니처 정밀도입니다.
• ``을 통해 1.4px 추적을 사용하여 CTA 라벨을 대문자로 렌더링합니다.
• 모든 영웅을 풀 블리드 영화 사진과 결합하세요. 사진이 바로 깊이입니다.
• 임시 픽셀 값 대신 명시적인 8px 간격 사다리(`xxxs`~`super`)를 사용하세요.
• 표시 가중치를 500으로 유지하고 굵게 표시하지 마세요.

하지 마세요

• Rosso Corsa 외에 포화도가 높은 브랜드 색상을 소개하지 마세요.
• 둥글거나 알약 CTA를 사용하지 마세요. 날카로운 0px 모서리가 브랜드 버튼입니다.
• 표시 사본을 굵은 글씨로 표시하지 마세요. 영화 사진은 시각적으로 큰 부담을 줍니다.
• Hypersail 항해 프로그램 컨텍스트 외부에서 Hypersail yellow를 사용하지 마십시오.
• 순수한 검정색 캔버스를 사용하지 마세요. 브랜드 캔버스는 `` (#181818) — 약간 따뜻합니다.
• 그림자 계층을 추가하지 마세요. 사진 + 밝기 단계 높이가 깊이를 전달합니다.
• 타사 위젯(쿠키 동의, OneTrust)에서 CTA 색상을 추출하지 마세요. 브랜드의 CTA 색상은 삽입된 모달이 아닌 실제 제품 CTA에 표시되는 색상입니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일 | _< 640px | Hero photograph crops vertically; hero h1 80→32px; feature card grid 1-up; nav hamburger; preowned listing 1-up. |

| 태블릿 | 640~1024px | 영웅 h1 56px; 기능 카드 그리드 2업; 중고 목록 2-up. |

| 데스크탑 | 1024~1280px | 전체 영웅 h1 80px; 기능 카드 그리드 3업; 중고 목록 4-up. |

| 와이드 | > 1280px | 편집 본문 콘텐츠는 1280px로 제한됩니다. 영웅 사진은 계속해서 본격화됩니다. |

터치 대상

• 48픽셀 높이의 기본 CTA — WCAG AAA(44 × 44).
• Nav 항목은 0.65px 추적으로 대문자를 렌더링하고 효과적인 48px 탭 영역을 위해 패딩 처리되었습니다.

축소 전략

• 상위 탐색은 768px 미만의 햄버거로 전환됩니다.
• 영웅 사진은 아트 디렉션을 통해 중단점별로 재구성됩니다. 데스크탑은 넓은 영화를 전달합니다. 모바일은 더 촘촘하게 자르거나 수직으로 이동합니다.
• 기능 카드 그리드: 4개 → 3개 → 2개 → 1개.
• F1 드라이버 카드: 데스크톱에서는 2업, 모바일에서는 1업.

반복 가이드

1. 한 번에 하나의 구성요소에 집중하세요.

2. CTA의 기본값은 ``(0px 선명)입니다. 카드도 ``을 사용합니다. 알약은 배지용으로 예약되어 있습니다.

3. 변형은 __CODEBCK_717___.

내부에 별도의 항목으로 존재합니다.

4. 어디에서나 ``을 사용하세요. 16진수 인라인은 사용하지 마세요.

5. 호버 상태는 문서화되지 않았습니다.

6. 디스플레이용 FerrariSans 500, 바디용 400/700. CTA 및 탐색의 대문자 + 추적

7. Rosso Corsa는 여전히 부족합니다. 기본 CTA, Cavallino, 레이스 포지션 하이라이트만 해당됩니다.

8. 명시적인 8px 이름의 간격 사다리를 사용하세요.

알려진 격차

• FerrariSans는 라이선스를 받은 서체입니다. 무게 500의 인터는 문서화된 대체 선수입니다.
• 애니메이션 타이밍(영웅 시차, 리버리 밴드 입장, 레이스 위치 카운터)이 범위를 벗어났습니다.
• 제품 내 표면(중고 구성기, F1 원격 측정 오버레이)은 마케팅 표면을 통해 부분적으로만 캡처되었습니다.
• 초점을 벗어난 양식 유효성 검사 상태는 캡처된 표면에 표시되지 않습니다.
• Hypersail 노란색 토큰은 추출되지만 Hypersail 항해 프로그램 컨텍스트에서만 나타납니다. 범위가 지정된 악센트로 문서화되어 있습니다.

概要

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

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

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

_**主な特徴:**

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

色

ブランドとアクセント_

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

サーフェス

• **キャンバス** (`` — #181818): 黒に近いページ床 — 決して真っ黒ではなく、わずかに温かみがあります。
• **キャンバス エレベーテッド** (`` — #303030): ダーク キャンバス上のカードとパネル。
• **キャンバス ライト** (`` — #ffffff): 白いエディトリアル バンド (中古品リスト、価格設定)。
• **表面カード** (`` — #303030): キャンバスエレベートと同じ — ドライバー カード、カラー写真プレート。
• **Surface Soft Light** (`` — #f7f7f7): ライト編集用交互バンド。
• **表面強い光** (`` — #ebebeb): ライトキャンバスの仕切り、バッジ。

ヘアライン

• **ヘアライン** (`` — #303030): 暗い上の 1 ピクセルの分割線 — `` と同じ六角形。
• **ライト上のヘアライン** (`` — #d2d2d2): ライト バンド上の 1 ピクセルの分割線。
• **ヘアライン ソフト** (`` — #ebebeb): より軽いディバイダー。

テキスト

• **インク** (`` — #ffffff): ディスプレイ、暗い部分を強調したボディ。
• **本文** (`` — #969696): ダーク色のデフォルトのランニングテキスト。
• **ボディ ストロング** (`` — #ffffff): インクと同じ。
• **ライト上のボディ** (`` — #181818): ライト バンド上のデフォルトのテキスト。
• **ミュート** (`` — #666666): 暗いところでは字幕、キャプションが表示されます。
• **ミュートソフト** (`` — #8f8f8f): リンクテキストが無効になりました。
• **プライマリ** (`` — #ffffff): ロッソ コルサの白いテキスト。

セマンティック

• **情報** (`` — #4c98b9): 情報バッジ、吹き出しの背景。
• **成功** (`` — #03904a): 確認。
• **警告** (`` — #f13a2c): 検証警告。

タイポグラフィ

フォント ファミリー

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

階層_

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

を使用します

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

| `` | 80ピクセル | 500 | 1.05 | -1.6ピクセル |ホームページのヒーロー h1 |

| `` | 56ピクセル | 500 | 1.1 | -1.12ピクセル |補助ヒーロー |

| `` | 36ピクセル | 500 | 1.2 | -0.36ピクセル |セクション責任者、カラーバンド |

| `` | 26ピクセル | 500 | 1.5 | 0.195ピクセル |サブセクションの見出し |

| `` | 18ピクセル | 700 | 1.2 | 0 |コンポーネントのタイトル |

| `` | 16ピクセル | 500 | 1.4 | 0.08ピクセル |リストラベル |

| `` | 14ピクセル | 400 | 1.5 | 0 |デフォルトの本文 |

| `` | 13ピクセル | 400 | 1.5 | 0 |フッター本文 |

| `` | 12ピクセル | 400 | 1.4 | 0 |写真のキャプション |

| `` | 11ピクセル | 600 | 1.4 | 1.1ピクセル |セクションのラベル、バッジ |

| `` | 14ピクセル | 700 | 1.0 | 1.4px (大文字) | CTA 錠剤ラベル |

| `` | 13ピクセル | 600 | 1.4 | 0.65px (大文字) |トップナビゲーション メニュー項目 |

| `` | 80ピクセル | 700 | 1.0 | -1.6ピクセル |レース順位のハイライト、スペック値 |

原則

• **表示ウェイトは 500 のままです。** 大げさではなく、編集者に自信を持っています。映画のような写真は視覚的な重労働を行っています。文字を競合させる必要はありません。
• **CTA ラベルは大文字で、1.4 ピクセルのトラッキングが可能です。** 高級感があり、高精度です。
• **ナビゲーション ラベルは大文字で、0.65 ピクセルのトラッキングが行われます。** CTA の音声と一致します。
• **表示時のみ負の文字間隔。** 表示サイズでは -0.36px ～ -1.6px。本文は 0.
のままです

_フォントの代替に関する注意

FerrariSans はライセンスを取得しています。オープンソースの代替品: **Inter** (ウェイト 500、文字間隔 -1%)、または **Söhne** (人文主義的な比率に近づける)。

レイアウト

間隔システム

• **基本単位:** 4px.
• **トークン:** `` 4px · `` 8px · `` 16px · `` 24px · `` 32px · `` 48px · `` 64px · `` 96px · `` 128px.
• **セクション パディング:** メジャー バンドの場合は `` (96px)。 `` (128px) はヒーロー バンドの深度用に予約されています。

グリッドとコンテナ

• _コンテンツの最大幅: 編集バンド上で最大 1280 ピクセル。ヒーロー写真は全力で撮影されます。
• 編集本文: 12 列グリッド。
• フィーチャー カード グリッド: ヒーロー スプリットの場合はデスクトップで 2 アップ、特典グリッドの場合は 3 アップ、中古品リスト タイルの場合は 4 アップ。
• フッター: デスクトップでは 5 列。

ホワイトスペースの哲学

_寛大な編集ペース。映画のようなヒーローの写真は、ビューポートの広い領域を占めます。本文セクションは、その下のより緊密な編集レイアウトに配置されます。 キャンバスライトのエディトリアル バンド (中古品、価格設定) は、暗い映画のバンドよりも密度が高くなります。

標高と深さ

_システムは **写真の深度 + 明るさのステップ** 高度を使用します。抽出されたトークンに文書化された 1 つのソフトで小さい `` を除き、ドロップ シャドウはありません。

|レベル |治療 | |

を使用します

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

|フラット（キャンバス） | `` (#181818) |ボディバンド、フッター |

|カード | `` (#303030) |ドライバー カード、カラーリング プレート |

|ライトバンド | `` (#ffffff) |中古品のリスト、価格 |

|ヘアラインボーダー | ヘアラインボーダー1px `` または `` |カードのアウトライン、仕切り |

|ソフトドロップ | `0 4px 8px rgba(0,0,0,0.1)` |ホバーされたカード (単一シャドウ層) |

|写真 |フルブリードの映画画像 |ヒーローバンド、カラーリングの写真 |

装飾の深さ_

• **フルブリードのシネマ写真**は、ブランドの主要な深度処理です。
• **ブランドの赤のグラデーション** (`linear-gradient(180deg, , 64%)`): アクセント バンドと CTA ホバー状態の内部で使用される Rosso Corsa のグラデーション。
• **ダークグレーのグラデーション** (`linear-gradient(180deg, , 64%)`): セクションの遷移で使用される大気の暗さ。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 0ピクセル |すべての CTA、カード、バンド — 支配的な半径 |

| `` | 2ピクセル |タイトなバッジ (レア) |

| `` | 4ピクセル |フォーム入力 |

| `` | 6ピクセル |コンパクト カード (レア) |

| `` | 8ピクセル |モバイル専用折りたたみカード |

| `` | 12ピクセル |モーダル/ダイアログ コーナー (まれ) |

| `` | 9999ピクセル |アバター プレート、バッジ錠剤 |

_RADIUS ボキャブラリーは **デフォルトでシャープ**です。シャープな 0px の角はブランドのボタンの形状であり、決して丸い錠剤ではありません。ピルのジオメトリはバッジ ラベル専用に予約されています。

コンポーネント

トップナビゲーション_

**`top-nav-on-dark`** — ダーク ヒーロー ページのデフォルトのトップ ナビゲーション。背景__CODEBCK_640___、テキスト__CODEBCK_641___、高さ64ピクセル。レイアウト: Cavallino マーク左、メイン水平メニュー (モデル / F1 / ライフスタイル / オーナー / 中古)、言語ピッカー + ユーティリティ右。メニュー項目は 0.65 ピクセルのトラッキングで大文字を表示します。

_**`top-nav-on-light`** — エディトリアル ライト バンド用の白キャンバス バリアント。

ボタン

**`button-primary`** — Rosso Corsa の特徴的な CTA。背景 ``、テキスト ``、タイプ `` (14px / 700 / 1.4px トラッキング、大文字)、パディング 14px × 32px、高さ 48px、**丸め `` (0px — 鋭い角)**.

**`button-primary-active`** — プレス状態。背景 ``.

_**`button-outline-on-dark`** — 1 ピクセルの白い境界線が付いた透明。 背景は透明、テキスト ``、1 ピクセルの白い境界線、同じ鋭い 0 ピクセルの角。

**`button-outline-on-light`** — 明るいバンドに 1 ピクセルのインク境界線が付いた透明。

**`button-tertiary-text`** — インライン テキスト リンク、大文字の追跡。

ヒーローバンド

**`hero-band-cinema`** — フルブリードの映画のような写真。その下に背景__CODEBCK_655___がありますが、写真がビューポートいっぱいに表示されます。 `` (80px / 500 / -1.6px) で、見出しを写真の下に浮かせるか、その下の狭い範囲に表示します。プライマリ CTA 1 つ + アウトライン CTA 1 つ。パディングゼロ — 写真は端から端まで埋められます。

**`hero-band-light`** — 編集バンド用の白キャンバスのバリアント。背景__CODEBCK_658___、テキスト__CODEBCK_659___、パディング96px.

カード

**`feature-card-photo`** — 画像ファーストのカード。背景__CODEBCK_661___、テキスト__CODEBCK_662___、丸め__CODEBCK_663___。画像は上端から端まで表示されます。タイトルと本文はタイトなタイポグラフィで下に配置されます。

**`feature-card-light`** — ホワイトキャンバスのバリアント。背景__CODEBCK_665___、テキスト__CODEBCK_666___、角丸__CODEBCK_667___、パディング32ピクセル。

**`driver-card`** — F1 ドライバーのポートレート カード。背景__CODEBCK_669___、テキスト__CODEBCK_670___、丸め__CODEBCK_671___、パディング24ピクセル。レイアウト: ドライバーのポートレート + 名前 + レース番号 + チームバッジ。

編集面

**`livery-band`** — 全幅のロッソ コルサ アクセント バンド。背景__CODEBCK_673___、テキスト__CODEBCK_674___、タイプ__CODEBCK_675___、96ピクセルのパディング。ダーク色の編集バンド間の目立つカラーリングのコールアウトとして使用されます。

_**`preowned-listing-card`** — 中古フェラーリのリスト グリッドで使用されます。背景__CODEBCK_677___、テキスト__CODEBCK_678___、丸め__CODEBCK_679___、パディング24ピクセル。レイアウト: 車の写真トップ + モデル名 + 年式/走行距離 + 価格。

仕様およびレース サーフェス

**`spec-cell`** — 技術仕様のコールアウト。透明な背景、__CODEBCK_681___ (80px / 700 / -1.6px 白) の値、__CODEBCK_682___.

の下のラベル

_**`race-position-cell`** — F1 ドライバーのフィニッシュ位置。同じ番号表示ジオメトリですが、テキストは__CODEBCK_684___ ブランドのレーシング アイデンティティのロッソ コルサです。

**`race-calendar-row`** — F1 レース カレンダーのヘアラインで区切られた行。レイアウト: 日付列が左、レース名とサーキットが中央、結果列が右。

フォームとタグ

**`text-input-on-dark`** — 背景 ``、テキスト ``、角丸 `` (4 ピクセル)、パディング 14 ピクセル × 16 ピクセル、高さ 48 ピクセル、1 ピクセル `` 境界線。

**`text-input-on-light`** — ホワイトキャンバスのバリアント。

_**`badge-pill`** — 小さな大文字の錠剤。背景 ``、テキスト ``、タイプ `` (11px / 600 / 1.1px トラッキング、大文字)、丸め `` (9999px)、パディング 4px × 12px。唯一の場所の錠剤ジオメトリが使用されます。

ニュースレター / CTA / フッター

_**`newsletter-input-band`** — ニュースレター登録バンド。背景__CODEBCK_698___、パディング32ピクセル、角丸__CODEBCK_699___。インラインメール入力 + プライマリ CTA を保持します。

**`cta-band-dark`** — プレフッター バンド。背景__CODEBCK_701___、__CODEBCK_702___の中央に表示される見出し、単一のRosso Corsa CTA。 96 ピクセルのパディング。

**`footer-dark`** — ダークフッターを閉じます。背景__CODEBCK_704___、テキスト__CODEBCK_705___。 5列のリンクリスト。 64×48 ピクセルのパディング。

_**`footer-link`** - 背景透明、テキスト__CODEBCK_707___、タイプ__CODEBCK_708___.

推奨事項と禁止事項

_実行

• __CODEBCK_709___ (ロッソ コルサ) を主要な CTA、カヴァッリーノ マーク、F1 レース ポジション ハイライト用に予約してください。
• すべての CTA を `` (0px の鋭い角) に設定します。これは、ブランドの特徴である精度です。
• __CODEBCK_711___.
経由で 1.4 ピクセルの追跡を使用して CTA ラベルを大文字でレンダリングします
• すべてのヒーローをフルブリードの映画のような写真と組み合わせます。写真は奥行きです。
• アドホックなピクセル値ではなく、明示的な 8 ピクセル間隔ラダー (`xxxs` から `super`) を使用してください。
• 表示のウェイトを 500 に保ちます。決して太字にしないでください。

しないでください

• ロッソ コルサ以外の飽和したブランド カラーを導入しないでください。
• 丸い CTA や毛玉の CTA は使用しないでください。鋭い 0px の角がブランド ボタンです。
• コピーを太字で表示しないでください。映画のような写真は、視覚的な重労働を行います。
• Hypersail セーリング プログラムのコンテキスト外では Hypersail イエローを使用しないでください。
• 真っ黒なキャンバスは使用しないでください。ブランドのキャンバスは__CODEBCK_714___ (#181818) — ほんのり暖かいです。
• ドロップ シャドウ層を追加しないでください。写真 + 明るさの段階的な高度により、奥行きが生まれます。
• サードパーティのウィジェットから CTA カラーを抽出しないでください (Cookie 同意、OneTrust)。ブランドの CTA カラーは、挿入されたモーダルではなく、実際の商品 CTA に表示されるものです。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

|モバイル | < 640px | Hero photograph crops vertically; hero h1 80→32px; feature card grid 1-up; nav hamburger; preowned listing 1-up. |

|タブレット | 640–1024ピクセル |ヒーロー h1 56px;フィーチャーカードグリッド2アップ。中古出品2アップ。 |

|デスクトップ | 1024–1280ピクセル |フルヒーロー h1 80px;フィーチャーカードグリッド 3 アップ。中古出品4アップ。 |

|ワイド | > 1280ピクセル |編集本文のコンテンツの上限は 1280 ピクセルです。ヒーロー撮影はフルブリードで続きます。 |

タッチターゲット

• 高さ 48 ピクセルのプライマリ CTA — WCAG AAA (44 × 44)。
• Nav アイテムは、0.65 ピクセルのトラッキングで大文字をレンダリングし、有効な 48 ピクセルのタップ領域にパディングされます。

戦略の崩壊

• 上部のナビゲーションは 768 ピクセル以下のハンバーガーに切り替わります。
• ヒーローの写真はアート ディレクションを通じてブレークポイントごとにリフレームされます。デスクトップには幅広い映画のような雰囲気が漂います。モバイル クロップをよりタイトにするか、垂直方向にシフトします。
• フィーチャー カード グリッド: 4-up → 3-up → 2-up → 1-up.
• F1 ドライバー カード: デスクトップでは 2 アップ、モバイルでは 1 アップ。

反復ガイド

1.一度に 1 つのコンポーネントに注目してください。

2. CTA のデフォルトは `` (0px シャープ) です。カードも__CODEBCK_716___を使用します。ピルはバッジのために予約されています。

3.バリアントは、__CODEBCK_717___.

内の個別のエントリとして存在します。

4.どこでも `` を使用します。16 進数をインライン化しないでください。

5.ホバー状態は文書化されていません。

6.ディスプレイはFerrariSans 500、ボディは400/700。 大文字 + CTA およびナビゲーションでの追跡

7.ロッソ コルサは依然として希少です — 主要な CTA、カヴァッリーノ、レース順位のハイライトのみ。

8。明示的な 8 ピクセルの名前付き間隔ラダーを使用します。

既知のギャップ

• _FerrariSans はライセンスされた書体です。ウェイト 500 の Inter が文書化された代替品です。
• アニメーションのタイミング (ヒーローのパララックス、カラーリングバンドの入場、レースポジションカウンター) は範囲外です。
• 製品内サーフェス (中古コンフィギュレーター、F1 テレメトリ オーバーレイ) はマーケティング サーフェス経由で部分的にのみキャプチャされます。
• フォーカスを超えたフォーム検証状態は、キャプチャされたサーフェスには表示されません。
• Hypersail の黄色のトークンは抽出されますが、Hypersail セーリング プログラムのコンテキストにのみ表示され、スコープ付きアクセントとして文書化されます。

Accessibility Considerations

Ferrari's color system, anchored by #181818, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Ferrari's color system, anchored by #181818, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Ferrari's color system, anchored by #181818, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

• Volvo Design System
• Tesla Design System
• Nissan Design System
• Bmw Design System