A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Ferrari, in one page
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.
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 (
xxxsthroughsuper) 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.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Ferrari design language. Follow the measured tokens below — do not substitute your own palette.
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
Type:
- families: FerrariSans, -apple-system, Inter, Söhne
- scale: 11, 12, 13, 14, 16, 18, 26, 36, 56
- weights: 400, 500, 600, 700
Shape:
- radius: 0, 2, 4, 6, 8, 12
- elevation: Hairlines + photographic depth — no drop shadow tiers.
Spacing: 4, 8, 14, 16, 24, 32, 48, 64, 96, 128
Rules:
- 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.
Avoid:
- 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.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
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.
Components and layoutRead the full spec
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.
Responsive behaviourRead the full spec
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.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-ferrari {--page-bg: #181818;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #e7564b;
--link-hover-color: #e12c1e;
--border-color: #424242;
--card-bg: #181818;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #2a2a2a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #181818;
--footer-text-color: #aeaeae;
--button-bg: #da291c;
--button-text-color: #ffffff;
--button-hover-bg: #ad2116;
--button-border: none;
--button-border-radius: 6px;
--button-secondary-bg: #262626;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #343434;
--button-secondary-border: 1px solid #424242;
--prompt-bg: #242424;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 6px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- cursor 81.0%
- binance 80.3%
- tokyu 77.9%
- clay 77.6%
- kyocera museum 76.8%
Where this came from
- Source document
volt/design-md/ferrari/DESIGN.md· 23.6 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.