Design System Analysis of Ferrari

Luxury-automotive brand as cinematic editorial. Near-black canvas, Rosso Corsa accent, FerrariSans at modest weights with uppercase tracked CTAs and sharp 0px corners.

01 — Color Palette

Rosso Corsa + near-black + light editorial

Single brand voltage on a near-black canvas. White editorial bands inside specific contexts (preowned, pricing).

Brand

primary (Rosso Corsa)
#da291c
Iconic Ferrari racing red. Primary CTAs, Cavallino, F1 race-position.
primary-active
#b01e0a
Press state.
accent-yellow-hypersail
#fff200
Hypersail program only.
accent-yellow (focus)
#f6e500
Global focus-ring color.

Surface

canvas
#181818
Near-black page floor.
canvas-elevated
#303030
Cards on dark canvas.
canvas-light
#ffffff
White editorial bands.
surface-soft-light
#f7f7f7
Light alternating band.
surface-strong-light
#ebebeb
Light dividers.

Text & Hairlines

ink
#ffffff
Display, body emphasis on dark.
body
#969696
Default running-text on dark.
muted
#666666
Sub-titles, captions.
muted-soft
#8f8f8f
Disabled link text.
hairline
#303030
1px divider on dark.
hairline-on-light
#d2d2d2
1px divider on light.

Semantic

success
#03904a
Confirmation.
info
#4c98b9
Info badges.
warning
#f13a2c
Validation warnings.
02 — Typography

FerrariSans 500 + uppercase CTAs

Single sans family. Display sits at weight 500. CTA labels uppercase with 1.4px tracking — luxury precision.

display-mega80px / 500 / 1.05 / -1.6px
Ferrari Hypersail
display-xl56px / 500 / 1.1 / -1.12px
Tribute to Niki Lauda
display-lg36px / 500 / 1.2 / -0.36px
Section heading
display-md26px / 500 / 1.5 / 0.195px
Sub-section heading
title-md18px / 700 / 1.2
Component title
body-md14px / 400 / 1.5
Default body text on near-black canvas. Editorial pacing.
body-sm13px / 400 / 1.5
Footer body, fine print.
caption-uppercase11px / 600 / 1.4 / 1.1px
Section label
button14px / 700 / 1.0 / 1.4px (uppercase)
Discover
nav-link13px / 600 / 1.4 / 0.65px (uppercase)
Models · Formula 1 · Lifestyle · Owners
number-display80px / 700 / 1.0 / -1.6px
P1
03 — Buttons

Sharp 0px corners, uppercase tracked labels

Every CTA is sharp-cornered. The brand never uses rounded pills.

button-primary
Rosso Corsa / 0px / 48px / uppercase 1.4px
button-primary-active
Deeper red press state.
button-outline-on-dark
Transparent + 1px white border.
button-outline-on-light
Transparent + 1px ink border on light.
button-tertiary-text
Inline ink uppercase tracked text.
04 — Feature Cards

Photo-first cinematic cards

Image fills the top edge-to-edge; meta sits beneath. Sharp 0px corners.

Greatest Hits

Iconic moments from Ferrari's racing history.

Restored, Just as Niki Raced It

The 312T2 from the 1976 season returns to the track.

Replica 2026

The new road-legal grand tourer revealed.

05 — Livery Band (Rosso Corsa)

Brand-red atmospheric callout

A full-width Rosso Corsa accent band used between dark editorial sections.

75

Years of Racing Excellence

06 — Tech Specs

Number-display values on hairline-divided cells

Spec values render in number-display 80px / 700 white; labels in caption-uppercase 1.1px tracking.

340
km/h Top Speed
2.5
sec 0-100 km/h
1000
cv Power
V12
Engine Layout
07 — F1 Drivers

Driver portrait cards

CL
P1

Charles Leclerc

Ferrari · #16
CS
P3

Carlos Sainz

Ferrari · #55
08 — F1 Race Calendar

Race position highlights

Hairline-divided rows. Race-position cells render in Rosso Corsa using `number-display` typography — the brand's racing identity.

14 Mar
Bahrain Grand Prix
Bahrain International Circuit
P1
21 Mar
Saudi Arabian GP
Jeddah Corniche Circuit
P3
04 Apr
Australian GP
Albert Park Circuit
P2
18 Apr
Chinese GP
Shanghai International Circuit
P1
09 — Preowned Listings

White editorial band

Preowned Ferrari listings sit on a white canvas band — the only place pure-white surface dominates.

Ferrari Roma
2022 · 12,400 km
€189,000
F8 Tributo
2021 · 8,200 km
€259,000
Portofino M
2023 · 4,600 km
€212,000
812 GTS
2022 · 9,800 km
€349,000
10 — Forms

Inputs

11 — Badges

Pill geometry only here — every other component is sharp-cornered.

NewF1LimitedHypersail
12 — Spacing Scale

Explicit 8px ladder: xxxs · xxs · xs · sm · md · lg · xl · xxl · super.

xxxs · 4
xxs · 8
xs · 16
sm · 24
md · 32
lg · 48
xl · 64
xxl · 96
super · 128
13 — Border Radius

Sharp 0px corners are the brand button. Pill is reserved for badges only.

0 · none
2 · xs
4 · sm
6 · md
8 · lg
12 · xl
full
14 — Elevation & Depth

Photographic depth + brightness-step elevation. Single soft-small shadow tier.

Flat / Canvas

Body bands, footer.

Card

canvas-elevated #303030 — driver cards, livery plates.

Light band

White editorial — preowned, pricing.

Soft drop

0 4px 8px rgba(0,0,0,0.1). Single shadow tier.

15 — Responsive Behavior
NameWidthKey Changes
Mobile< 640pxHero crops vertically; hero h1 80→32px; feature grid 1-up; nav hamburger; preowned 1-up.
Tablet640–1024pxHero h1 56px; feature grid 2-up; preowned 2-up.
Desktop1024–1280pxFull hero h1 80px; feature grid 3-up; preowned 4-up.
Wide> 1280pxEditorial body caps at 1280px; hero photography full-bleed.
375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

Touch Targets

Collapsing Strategy