Ferrari Design System

---

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}"

---

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

**FerrariSans** is the licensed single sans family across every text role. Fallback: `-apple-system, system-ui, sans-serif`. No display/body family split.

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

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

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.

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 |

| 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.

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

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

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

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

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

| 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. |

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.