Untitled Design System
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 (#181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts. The brand's strongest visual signature is the full-bleed cinematic hero photograph. Spacing follows the explicit 8px token ladder.
Color Palette
Brand & Accent
Surface
Hairlines
Text
Semantic
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
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 (#181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts. The brand's strongest visual signature is the full-bleed cinematic hero photograph. Spacing follows the explicit 8px token ladder.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
hero-band-cinema
cinema
Elevation & Depth
Do's & Don'ts
Do
Don't
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.
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.
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.
Use with MCP
Don't have the MCP? Install it here