ferrari
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 v
colors
#da291c #b01e0a #9d2211 #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
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
… components
display headline
body copy from ferrari tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#da291c",
font: ""FerrariSans", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on ferrari's visual identity.