---
version: alpha
name: Ferrari
description: "A Rosso coupé tearing down a mountain road under Maranello black."
colors:
  on-surface-variant: "#d2d2d2"
  on-surface: "#181818"
  surface: "#ffffff"
  outline: "#303030"
  primary: "#da291c"
  rosso-deep: "#b01e0a"
  rosso-dark: "#9d2211"
  corsa: "#a00c01"
  grey-55: "#969696"
  grey-50: "#8f8f8f"
  grey-10: "#f7f7f7"
  background-10: "#ebebeb"
  pure-black: "#000000"
  modena-yellow: "#f6e500"
typography:
  micro-caption:
    fontFamily: FerrariSans
    fontSize: 7px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.05em
  fine-label:
    fontFamily: FerrariSans
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.05em
  cta-nav-link:
    fontFamily: FerrariSans
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-small:
    fontFamily: FerrariSans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: FerrariSans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  subheading-eyebrow:
    fontFamily: FerrariSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
  display-headline:
    fontFamily: FerrariSans
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
rounded:
  buttons-cards-containers-media: 0px
  circular-controls: 9999px
spacing:
  xxxs: 4px
  xxs: 8px
  xs: 16px
  s: 24px
  m: 32px
  l: 48px
  xl: 64px
  xxl: 96px
  super: 128px
---
# Ferrari — Style Reference
> A Rosso coupé tearing down a mountain road under Maranello black.

**Theme:** mixed

Ferrari's system is built on total restraint punctuated by one uncompromising note of red. The canvas is a two-register affair: a cinematic near-black hero where full-bleed video of the car IS the design, and a bone-white editorial body where content breathes. There is exactly one brand color — Rosso `#da291c` (`--f-color-accent-100`) — and it is rationed: a chapter marker, a focus ring, a gradient down the flank of a hero, never a filled button. Type is FerrariSans and FerrariSans alone: uppercase, tracked, and set in a tight display weight for the "START YOUR ENGINE" headline over a quiet small-caps eyebrow. Geometry is severe — corners are square (`0px`) everywhere except the circular media controls and carousel dots, which are true circles (`9999px`). The prancing horse, in white, is the only ornament the system permits.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Rosso (Ferrari Red) | `#da291c` | `--f-color-accent-100` | THE brand color; chapter markers, focus ring, hero gradients — never a filled CTA, never body text. Rationed to a single accent per view. |
| Rosso Deep | `#b01e0a` | `--f-color-accent-90` | Pressed/darker accent state; lower stop of red transitions. |
| Rosso Dark | `#9d2211` | `--f-color-accent-80` | Deepest accent tone; hover on red surfaces. |
| Corsa (Gradient Top) | `#a00c01` | *(in `--f-color-gradient-red`)* | Upper stop of the signature red flank gradient, into `#da291c`. |
| White | `#ffffff` | `--f-color-global-white` | Hero text, the prancing horse mark, nav; the light-body canvas. |
| Ferrari Black | `#181818` | `--f-color-global-black` / `--f-color-ui-100` | Primary ink on light; the near-black chrome ground. |
| Ink 90 | `#303030` | `--f-color-black-90` / `--f-color-ui-90` | Hairline borders, dividers, secondary dark surfaces. |
| Grey 55 | `#969696` | `--f-color-black-55` | Muted labels. |
| Grey 50 | `#8f8f8f` | `--f-color-black-50` / `--f-color-ui-50` | Secondary body text, disabled, meta. |
| Grey 20 | `#d2d2d2` | `--f-color-black-20` | Light borders, inactive control fills. |
| Grey 10 | `#f7f7f7` | `--f-color-black-10` / `--f-color-ui-10` | Lightest raised surface on the white body. |
| Background 10 | `#ebebeb` | `--f-color-background-10` | Sunk light surface / section band. |
| Pure Black | `#000000` | — | Overlay scrims and true-black video mattes. |
| Modena Yellow | `#f6e500` | `--f-color-yellow` | Heritage shield yellow; sparing highlight, never a text color. |

## Tokens — Typography
### FerrariSans — the ONLY typeface: nav, eyebrow, display headline, links; uppercase and tracked. · `--f-ferrari-font`
- **Substitute:** Neue Haas Grotesk Display, Söhne, Helvetica Now Display
- **Weights:** 400 (Regular), 500 (Medium); a 700 body-medium cut is loaded for emphasis
- **Sizes:** 7px, 9px, 11px, 12px, 13px, 16px measured; ~26px display for the hero headline *(from branding metadata)*
- **Line height:** tight — display is set near 1.0–1.1; body ~1.4
- **Letter spacing:** nav and eyebrow labels are set uppercase with positive tracking *(inferred from screenshot)*; display headline near-neutral
- **Role:** carries the entire voice. FerrariSans in Medium 500 delivers the "START YOUR ENGINE" display; Regular 400 handles small-caps eyebrows ("Sports Cars"), nav, and CTA links.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro caption | 7px | 1.3 | +tracked | `--text-7` |
| Fine label | 9px | 1.3 | +tracked | `--text-9` |
| CTA / nav link | 11px | 1.4 | +tracked uppercase | `--text-11` |
| Body small | 12px | 1.4 | normal | `--text-12` |
| Body | 13px | 1.4 | normal | `--text-13` |
| Subheading / eyebrow | 16px | 1.25 | slight | `--text-16` |
| Display headline | ~26px | 1.05 | tight | `--text-display` *(inferred)* |

## Tokens — Spacing & Shapes
**Base unit:** 8px (with a 4px half-step)   **Density:** comfortable, cinematic — generous vertical air around a single focal object

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xxxs | 4px | `--f-space-xxxs` |
| xxs | 8px | `--f-space-xxs` |
| xs | 16px | `--f-space-xs` |
| s | 24px | `--f-space-s` |
| m | 32px | `--f-space-m` |
| l | 48px | `--f-space-l` |
| xl | 64px | `--f-space-xl` |
| xxl | 96px | `--f-space-xxl` |
| super | 128px | `--f-space-super` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, cards, containers, media | `0px` (square — the default everywhere) |
| Circular controls (media pause, carousel dots, arrow buttons) | `9999px` / `100%` (`--f-radius-full`) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Small | `0px 4px 8px 0px rgba(0,0,0,.1)` | `--f-shadow-small` |

### Layout
- **Page max-width:** full-bleed (hero is edge-to-edge video); body content contained
- **Section gap:** `--f-space-xxl` (96px) to `--f-space-super` (128px)
- **Card padding:** `--f-space-s` (24px) to `--f-space-m` (32px)
- **Element gap:** `--f-space-xs` (16px)

## Components
### Prancing Horse Mark
**Role:** the sole brand ornament — top-left of every view.
White (`#ffffff`) SVG cavallino rampante, links to home. No wordmark alongside; the horse alone is the signature. Never recolored.

### Primary Nav
**Role:** top-level wayfinding across a transparent chrome bar over the hero.
Uppercase FerrariSans links (RACING · SPORTS CARS · COLLECTIONS · EXPERIENCES · ABOUT US) in white `#ffffff`, ~11px, tracked, spaced generously. No fills, no borders, no active pill — hover is a quiet luminance shift.

### Hero Eyebrow
**Role:** section/category label above the display headline.
Small FerrariSans (~16px, weight 500) in white — e.g. "Sports Cars". Sits directly over the big headline as a quiet super-label, centered.

### Hero Display Headline
**Role:** the one loud statement per hero.
Uppercase FerrariSans Medium, ~26px+, white `#ffffff`, tight leading — "START YOUR ENGINE". Centered over full-bleed video, no box, no scrim behind the type itself.

### Text-Link CTA
**Role:** the primary call-to-action — a link, not a filled button.
Uppercase FerrariSans (~11–13px, weight 400) in white, e.g. "DISCOVER THE FERRARI LINE UP", paired with a circular outline arrow to its right. Padding is minimal (`5px 0`); `0px` radius on the text itself. Ferrari deliberately has no filled primary button — the CTA reads as editorial, not commerce.

### Circular Icon Button
**Role:** the arrow affordance beside a CTA, and standalone media controls.
A perfect circle (`9999px`) with a thin `#ffffff` hairline border (`#303030` on light), transparent fill, white chevron/glyph centered. The only rounded geometry in the system.

### Carousel Dots
**Role:** slide position for the hero video/story rotation.
Three small circles; active is a hollow ring, inactive are filled dots, all white. Centered near the bottom edge.

### Media Pause Control
**Role:** lets the visitor stop the auto-playing hero video.
Circular button, bottom-right, white pause glyph on transparent — respects the cinematic autoplay while giving control back.

### Chapter Marker
**Role:** the one place Rosso appears in running content.
`--f-color-chapter` resolves to `--f-color-accent-100` (`#da291c`) — used as a thin accent rule or index color for editorial chapters. This is the disciplined home of the red.

### Section (Light Body)
**Role:** editorial content zone beneath the dark hero.
White `#ffffff` / `#f7f7f7` surfaces, `#181818` ink, `#303030` hairlines, square corners. Type stays FerrariSans; spacing steps up to `--f-space-xxl`/`super` between blocks.

## Do's and Don'ts
### Do
- Let a single image or video BE the hero — full-bleed, edge to edge, type floating over it.
- Keep every corner square (`0px`) except true-circle media controls and dots (`9999px`).
- Ration Rosso `#da291c` to one accent per view: a chapter rule, a focus ring, a gradient flank.
- Set headlines uppercase in FerrariSans Medium with tight leading; keep eyebrows small and quiet above them.
- Use white for the prancing horse and all hero chrome; use `#181818` for ink on the light body.
- Move between the two registers cleanly: near-black cinematic hero → white editorial body.

### Don't
- Don't fill a button with Rosso — Ferrari has no red CTA; the primary action is a text link with a circle-arrow.
- Don't introduce a second brand color; Modena yellow `#f6e500` is heritage-only, never type.
- Don't round buttons or cards — rounded rectangles break the marque instantly.
- Don't crowd the hero with copy; one eyebrow + one headline + one link is the whole composition.
- Don't substitute a generic grotesk where FerrariSans is expected — the typeface is the identity.
- Don't add drop shadows beyond the single soft `--f-shadow-small`; depth comes from luminance, not shadow stacks.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Cinematic Ground | `#000000` / `#181818` | Full-bleed hero video matte and dark chrome. |
| 0 | Editorial Canvas | `#ffffff` | Light body content ground. |
| 1 | Raised Light | `#f7f7f7` | Lightest lifted surface on the white body. |
| 1 | Sunk Band | `#ebebeb` | Recessed section band. |
| — | Border | `#303030` (dark) / `#d2d2d2` (light) | Hairline dividers and control outlines. |

## Elevation
Depth is almost never conveyed by shadow. The dark hero uses luminance and gradient scrims — `--f-color-gradient-shadow-light` (`rgba(24,24,24,0)→rgba(24,24,24,.85)`) fades the bottom of imagery so white type reads; `--f-color-overlay` (`rgba(0,0,0,.3)`) is a light dim. The light body separates blocks with `#303030`/`#d2d2d2` hairlines and generous space, not boxes. The system ships exactly one real shadow (`--f-shadow-small`, a 4px/8px 10%-black lift) — used rarely. Elevation here is a step in brightness, not a cast shadow.

## Imagery
Imagery IS the product. The homepage is carried by full-bleed automotive video and photography — a Rosso coupé in motion against natural landscape and deep blue sky. Cars are shot in real environments (mountain roads, open sky), never on seamless studio backgrounds, and never with heavy graphic overlay. The prancing horse SVG is the only illustration. Icons are minimal line glyphs (chevron, pause) inside circular outlines. The design gets out of the way so the machine can be the hero.

## Layout
Full-bleed cinematic hero: video fills the viewport, transparent nav bar floats on top with the horse at top-left and tracked uppercase links across. The hero's textual composition is bottom-anchored and centered — eyebrow, display headline, text-link CTA stacked — with carousel dots and a pause control near the lower edge. Below the fold the register flips to a contained, white editorial body on the 8px spacing grid, sections separated by 96–128px of air. Everything is aligned to center or to a strict left margin; the grid is invisible and disciplined.

## Typography Voice
Ferrari runs a single typeface in two modes, and the contrast between them is the whole voice. **Loud mode:** FerrariSans Medium, uppercase, tight-leading display — "START YOUR ENGINE" — one statement, big, no decoration. **Quiet mode:** the same family at 7–16px, uppercase and positively tracked for nav and eyebrows, or sentence-case at 13px for body. There is no serif, no second family, no italic flourish — restraint is the message. The tracked-out uppercase small text reads as precision engineering; the tight-set display reads as speed. That tension — clinical labels around one explosive headline — is FerrariSans doing the brand's talking.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000`/`#181818` (cinematic hero) · `#ffffff` (editorial body)
- text: `#ffffff` on dark · `#181818` on light · muted `#8f8f8f`
- surface: `#f7f7f7` (raised light) · `#ebebeb` (sunk band)
- border: `#303030` (dark) · `#d2d2d2` (light)
- accent: `#da291c` (Rosso — rationed to chapter marks / focus / gradients)
- primary action: no distinct CTA color — the primary action is a white text link with a circular arrow

## Example Component Prompts
1. **Cinematic Hero**: Full-bleed autoplay video hero, `#000000` fallback ground. Transparent top nav: white prancing-horse SVG top-left, uppercase FerrariSans links (~11px, tracked) across. Bottom-centered stack: small-caps eyebrow (16px, white), uppercase display headline (~26px, FerrariSans Medium, white, tight leading), and a white text-link CTA with a `9999px` outline circle-arrow. Add carousel dots and a circular pause control near the lower edge. Square corners everywhere except the circles.
2. **Text-Link CTA**: Uppercase FerrariSans link, white `#ffffff`, ~12px, `0px` radius, minimal padding (`5px 0`), followed by a perfect-circle button (`9999px`) with a 1px white hairline border and a centered white chevron. No fill, no Rosso.
3. **Editorial Section (light)**: White `#ffffff` canvas, `#181818` FerrariSans ink, `#303030`/`#d2d2d2` hairline dividers, square corners, `--f-space-xxl` (96px) vertical rhythm. One thin Rosso `#da291c` chapter rule allowed per section.
4. **Nav Bar**: Transparent bar over media. White horse mark left; uppercase tracked links (RACING · SPORTS CARS · COLLECTIONS · EXPERIENCES · ABOUT US) right-of-center; no fills, no active pill, hover = subtle luminance shift.
5. **Circular Media Control**: `9999px` button, transparent fill, 1px white border, white pause/chevron glyph centered — the only rounded geometry permitted.

## Similar Brands
- **Aston Martin** — same discipline of a single luxury-automotive hero shot, restrained uppercase type, and near-total avoidance of filled buttons.
- **Bang & Olufsen** — cinematic full-bleed product imagery over near-black, one accent, square geometry, and generous silence.
- **Porsche** — clinical grotesk typography, disciplined grids, and a heritage color rationed rather than splashed.
- **Bottega Veneta** — luxury restraint where imagery is the entire message and typography whispers around it.
- **Leica** — one red dot as the only color note against black-and-silver precision — the exact "rationed red" discipline.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Accent (Rosso) */
  --f-color-accent-100: #da291c;
  --f-color-accent-90: #b01e0a;
  --f-color-accent-80: #9d2211;
  --f-color-chapter: var(--f-color-accent-100);
  --f-color-focus: #da291c;
  --f-color-accessible-warning: #f13a2c;

  /* Colors — Neutrals */
  --f-color-global-white: #ffffff;
  --f-color-global-black: #181818;
  --f-color-black-90: #303030;
  --f-color-black-60: #666666;
  --f-color-black-55: #969696;
  --f-color-black-50: #8f8f8f;
  --f-color-black-20: #d2d2d2;
  --f-color-black-10: #f7f7f7;
  --f-color-pure-black: #000000;

  /* Colors — UI roles */
  --f-color-ui-100: var(--f-color-global-black);
  --f-color-ui-90: var(--f-color-black-90);
  --f-color-ui-60: var(--f-color-black-60);
  --f-color-ui-50: var(--f-color-black-50);
  --f-color-ui-20: var(--f-color-black-20);
  --f-color-ui-10: var(--f-color-black-10);
  --f-color-ui-0: var(--f-color-global-white);

  /* Colors — Backgrounds */
  --f-color-background-0: var(--f-color-global-white);
  --f-color-background-10: #ebebeb;

  /* Colors — Heritage / accessible */
  --f-color-yellow: #f6e500;
  --f-color-yellow-hypersail: #fff200;
  --f-color-accessible-info: #4c98b9;
  --f-color-accessible-success: #03904a;

  /* Colors — Gradients & scrims */
  --f-color-gradient-red: linear-gradient(180deg, #a00c01, #da291c 64%);
  --f-color-gradient-dark-grey: linear-gradient(180deg, #3c3c3c, #030303 64%);
  --f-color-gradient-shadow-dark: linear-gradient(90deg, #121212, #161616);
  --f-color-gradient-shadow-light: linear-gradient(180deg, rgba(24,24,24,0), rgba(24,24,24,.85));
  --f-color-overlay: rgba(0,0,0,.3);
  --f-color-overlay-darker: hsla(0,0%,7%,.8);

  /* Typography — Families */
  --f-ferrari-font: 'FerrariSans', 'Neue Haas Grotesk Display', Helvetica, Arial, sans-serif;

  /* Typography — Scale */
  --text-7: 7px;
  --text-9: 9px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-16: 16px;
  --text-display: 26px;

  /* Spacing */
  --f-space-xxxs: 4px;
  --f-space-xxs: 8px;
  --f-space-xs: 16px;
  --f-space-s: 24px;
  --f-space-m: 32px;
  --f-space-l: 48px;
  --f-space-xl: 64px;
  --f-space-xxl: 96px;
  --f-space-super: 128px;

  /* Border Radius */
  --f-radius-square: 0px;
  --f-radius-full: 9999px;

  /* Shadow */
  --f-shadow-small: 0px 4px 8px 0px rgba(0,0,0,.1);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Accent (Rosso) */
  --color-accent-100: #da291c;
  --color-accent-90: #b01e0a;
  --color-accent-80: #9d2211;
  --color-focus: #da291c;
  --color-warning: #f13a2c;

  /* Colors — Neutrals */
  --color-white: #ffffff;
  --color-black: #181818;
  --color-pure-black: #000000;
  --color-ink-90: #303030;
  --color-grey-60: #666666;
  --color-grey-55: #969696;
  --color-grey-50: #8f8f8f;
  --color-grey-20: #d2d2d2;
  --color-grey-10: #f7f7f7;
  --color-background-10: #ebebeb;

  /* Colors — Heritage / accessible */
  --color-yellow: #f6e500;
  --color-yellow-hypersail: #fff200;
  --color-info: #4c98b9;
  --color-success: #03904a;

  /* Typography */
  --font-ferrari: 'FerrariSans', 'Neue Haas Grotesk Display', Helvetica, Arial, sans-serif;
  --text-7: 7px;
  --text-9: 9px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-16: 16px;
  --text-display: 26px;

  /* Spacing */
  --spacing-xxxs: 4px;
  --spacing-xxs: 8px;
  --spacing-xs: 16px;
  --spacing-s: 24px;
  --spacing-m: 32px;
  --spacing-l: 48px;
  --spacing-xl: 64px;
  --spacing-xxl: 96px;
  --spacing-super: 128px;

  /* Border Radius */
  --radius-square: 0px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-small: 0px 4px 8px 0px rgba(0,0,0,.1);
}
```