Ferrari Design System
Dark · Generated 15/04/2026 · 30 colors · 44 type tokens · 57 spacing steps · 22 breakpoints · 10 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
Dark Gray (base)
#181818
Dark Gray 5
#222222
Dark Gray 4
#333333
Dark Gray 3
#555555
Dark Gray 2
#666666
White
#FFFFFF
Light Gray
#DDDDDD
Ferrari Red
#DA291C
Text Colors
Mid Gray
#999999
Mid Gray 2
#8F8F8F
Light Gray 3
#E4E4E4
Red (accent)
#FF0000
Dark Gray 6
#656565
Border Colors
Light Gray 2
#CCCCCC
Mid Gray 4
#A0A0A0
Cyan
#32AE88
Light Gray 5
#D8D8D8
Light Gray 6
#D1D1D1
Light Gray 7
#BBBBBB
Semantic & Accent Colors
Red 2
#EB2323
Dark Blue
#27455C
Blue
#3860BE
Blue 2
#146FF8
Green
#468254
Dark Blue 2
#2E3644
Typography
Base Font · Times / Serif
Times Serif
The passion of our engineers. The artistry of our designers. The soul of Ferrari.
Regular · 400 Bold · 700
Brand Font · FerrariSans / Arial
FERRARI SANS
SF90 · SF-23 · Purosangue · Roma · Portofino M
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
La Rossa
font-size-26px · 26px · Bold · Times · letter-spacing: 0.96px · line-height: 34px
The Prancing Horse
font-size-21px · 21.3333px · Bold · Times · letter-spacing: 0.96px · line-height: 32px
Maranello · Since 1947
font-size-18px · 18px · Semibold · FerrariSans · letter-spacing: 0.195px · line-height: 25px
Engineering excellence in every detail — from the drawing board to the track.
font-size-16px · 16px · Regular · FerrariSans · letter-spacing: 0.13px · line-height: 21.6px
Specifications and technical details for the 2026 model year range of vehicles.
font-size-5xl · 14px · Regular · FerrariSans · letter-spacing: 0.08px · line-height: 19.5px
Technical notes, pricing, and availability subject to change without notice.
font-size-lg · 12px · Regular · FerrariSans · letter-spacing: 0.08px · line-height: 17.6px
CONFIGURATOR · RACING · COLLECTION
font-size-sm · 10px · Semibold · FerrariSans · letter-spacing: 1.28px · line-height: 13.5px
Line Heights
tight
12px
snug
13.5px
normal
15.24px
relaxed
15.6px
loose
17.6px
lh-6
19.5px
lh-7
20.8px
lh-8
21.6px
lh-9
24px
lh-10
25px
lh-11
32px
lh-13
39px
Letter Spacing
Body Tight
letter-spacing-tight
0.08px · body copy, descriptions
FERRARI LABEL
letter-spacing-wider
0.96px · brand labels, headings
UPPERCASE UI
letter-spacing-widest
1px · uppercase UI labels
CATEGORY NAV
letter-spacing-ls-6
1.28px · navigation, category labels
Spacing
Spacing Scale
57 tokens — 0.07px → 226.5px
0.07
1
3.5
5
6
8
10
11.4
15.7
16
17.6
18.8
20
20.7
22.4
24
25
30
32
33.8
37.1
40
42.7
47.5
48
50
51
53.5
55.6
58.3
62.1
63.8
64
226.5
Borders
Border Radii
SM
1px
MD
2px
LG
2.5px
XL
3px
2XL
8px
Full
17px
R7
20px
R8
50%
R9
50px
R10
100%
Border Widths
Hairline
1px · standard
Thin
2px · emphasis
Base
6px · brand dividers
Thick
12px · Ferrari red accent bar
The thick 12px border at Ferrari red is the most visually distinctive token — used as the signature red accent stripe on hero banners and section dividers.
Shadows / Elevation
Shadow Tokens
5 levels
shadow-sm
Crisp offset
rgb(153,153,153) 1px 1px 1px — sharp 1px shadow for subtle element lift
shadow-md
Ambient glow
rgba(0,0,0,.2) 0px 0px 18px — large diffuse shadow for modals and overlays
shadow-lg
Thin lift
rgb(153,153,153) 0px 2px 10px -3px — soft upward lift for cards and inputs
shadow-xl
Corner accent
rgb(199,197,199) -3px -3px 5px -2px — top-left corner highlight effect
shadow-5
Halo glow
rgb(199,197,199) 0px 0px 12px 2px — even surrounding glow for floating UI
Z-Index
LayerValueUsage
z-1 · Background-1Background decorations behind content
z-2 · Base1Default content layer
z-3 · Raised3Slightly elevated UI elements
z-4 · Sticky20Sticky elements, inline overlays
z-5 · Navigation100Sticky headers, primary navigation
z-6 · Dropdown200Dropdowns, context menus, mega-nav
z-7 · Flyout700Flyout panels, secondary overlays
z-8 · Drawer750Side drawers, off-canvas menus
z-9 · Modal1000Modals, lightboxes, video overlays
z-10 · Config6000Car configurator UI — proprietary layer
z-11 · Critical9999Critical system alerts and banners
z-12 · Cookie10000Cookie consent banner
z-13 · Legal10100Legal notices and compliance UI
z-14 · Chat10101Live chat widget layer 1
z-15 · Chat+10102Live chat widget layer 2
z-16 · Chat++10103Live chat widget layer 3 (top)
z-17 · Override99999999Emergency override layer
z-18 · Max-32147483645Near-max int priority layer
z-19 · Max-22147483646Second-to-max int priority
z-20 · Max2147483647Maximum browser integer — absolute top
Breakpoints
📱
breakpoint-xs
320px
Small phones — iPhone SE, minimum supported width
📱
breakpoint-sm
375px
Standard phones — iPhone 6/7/8, baseline mobile
📱
breakpoint-md
400px
Large phones — Android standard sizes
📱
breakpoint-lg → bp-14
425–768px
Large phones to tablets — 6 granular breakpoints for precise layout shifts
💻
bp-15 → bp-18
812–961px
Tablets to small desktops — 4 breakpoints covering landscape tablets
🖥️
bp-19 → bp-22
1200–1920px
Desktop to 4K — 4 breakpoints optimizing Ferrari's cinematic full-bleed imagery at ultra-wide resolutions
Opacity
Opacity Tokens
1 token defined — opacity-70 (0.7)
opacity-70
70% — overlays, hover states, disabled elements
Ferrari defines a single opacity token. Additional opacity values are applied programmatically through component-specific CSS rather than as design tokens.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-mid-gray--color-black7.37:1AAA
--color-mid-gray--color-dark-gray6.23:1AA
--color-mid-gray--color-white2.85:1Fail
--color-mid-gray--color-dark-gray-22.02:1Fail
--color-mid-gray--color-light-gray2.1:1Fail
--color-mid-gray-2--color-black6.49:1AA
--color-mid-gray-2--color-dark-gray5.49:1AA
--color-mid-gray-2--color-white3.23:1AA Large
--color-mid-gray-2--color-dark-gray-21.78:1Fail
--color-mid-gray-2--color-light-gray2.38:1Fail
--color-light-gray-3--color-black16.52:1AAA
--color-light-gray-3--color-dark-gray13.97:1AAA
--color-light-gray-3--color-white1.27:1Fail
--color-light-gray-3--color-dark-gray-24.52:1AA
--color-light-gray-3--color-light-gray1.07:1Fail
--color-red--color-black5.25:1AA
--color-red--color-dark-gray4.44:1AA Large
--color-red--color-white4:1AA Large
--color-red--color-dark-gray-21.44:1Fail
--color-red--color-light-gray2.94:1Fail
--color-dark-gray-6--color-black3.6:1AA Large
--color-dark-gray-6--color-dark-gray3.05:1AA Large
--color-dark-gray-6--color-white5.83:1AA
--color-dark-gray-6--color-dark-gray-21.02:1Fail
--color-dark-gray-6--color-light-gray4.29:1AA Large
CSS Variables Reference
Background Colors
Black--color-black#000000
Dark Gray (base)--color-dark-gray#181818
Dark Gray 5--color-dark-gray-5#222222
Dark Gray 7--color-dark-gray-7#303030
Dark Gray 4--color-dark-gray-4#333333
Dark Gray 3--color-dark-gray-3#555555
Dark Gray 2--color-dark-gray-2#666666
White--color-white#FFFFFF
Light Gray--color-light-gray#DDDDDD
Mid Gray 3--color-mid-gray-3#ABABAB
Ferrari Red--color-red-accent#DA291C
Red 2--color-red-2#EB2323
Dark Blue--color-dark-blue#27455C
Green--color-green#468254
White 3--color-white-3#F4F4F4
Blue 2--color-blue-2#146FF8
Blue--color-blue#3860BE
Text & Border Colors
Mid Gray--color-mid-gray#999999
Mid Gray 2--color-mid-gray-2#8F8F8F
Light Gray 3--color-light-gray-3#E4E4E4
Red (text accent)--color-red#FF0000
Dark Gray 6--color-dark-gray-6#656565
Light Gray 2 (border)--color-light-gray-2#CCCCCC
Mid Gray 4 (border)--color-mid-gray-4#A0A0A0
Cyan (border)--color-cyan#32AE88
Light Gray 5--color-light-gray-5#D8D8D8
Light Gray 6--color-light-gray-6#D1D1D1
Light Gray 4 (shadow)--color-light-gray-4#C7C5C7
Light Gray 7--color-light-gray-7#BBBBBB
Dark Blue 2 (fill)--color-dark-blue-2#2E3644
Typography
Base (Times)--font-family-baseTimes, serif
Brand (FerrariSans)--font-family-2FerrariSans, Arial
Body (Arial)--font-family-3Arial, Helvetica
Fallback (Helvetica)--font-family-4Helvetica, Arial
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs (7px)--font-size-2xs7px
xs (9px)--font-size-xs9px
sm (10px)--font-size-sm10px
base (11px)--font-size-base11px
lg (12px)--font-size-lg12px
xl (13px)--font-size-xl13px
16px--font-size-16px16px
18px--font-size-18px18px
21px--font-size-21px21.3333px
26px--font-size-26px26px
Tight (0.08px)--letter-spacing-tight0.08px
Wider (0.96px)--letter-spacing-wider0.96px
Widest (1px)--letter-spacing-widest1px
LS-6 (1.28px)--letter-spacing-ls-61.28px
Spacing (selected)
1 (0.07px)--space-10.07px
2 (1px)--space-21px
5 (5px)--space-55px
16 (10px)--space-1610px
96 (16px)--space-9616px
192 (20px)--space-19220px
25 (24px)--space-2524px
26 (25px)--space-2625px
27 (30px)--space-2730px
28 (32px)--space-2832px
37 (40px)--space-3740px
44 (48px)--space-4448px
45 (50px)--space-4550px
61 (226.5px)--space-61226.5px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base6px
Thick (red bar)--border-width-thick12px
SM--radius-sm1px
MD--radius-md2px
XL--radius-xl3px
2XL--radius-2xl8px
Full--radius-full17px
R7--radius-r720px
R8--radius-r850%
R9--radius-r950px
R10--radius-r10100%
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow250ms
Slower--duration-slower300ms
Duration 6--duration-6400ms
Duration 7--duration-7500ms
Ease Out--easing-ease-outease-out
Linear--easing-linearlinear
Ease In--easing-ease-inease-in
Muted--opacity-7070%
Background--z-1-1
Base--z-21
Navigation--z-5100
Dropdown--z-6200
Modal--z-91000
Configurator--z-106000
Cookie/Legal--z-1210000
Maximum Int--z-202147483647
Phone min--breakpoint-xs320px
Phone std--breakpoint-sm375px
Tablet--breakpoint-bp-14768px
Desktop HD--breakpoint-bp-191200px
4K / Cinema--breakpoint-bp-221920px
DESIGN SYSTEM PREVIEW · FERRARI · GENERATED 15/04/2026 · 30 COLOR TOKENS · 16 FONT-SIZE · 5 FONT-FAMILY · 4 FONT-WEIGHT · 13 LINE-HEIGHT · 6 LETTER-SPACING · 57 SPACING · 10 RADIUS · 4 BORDER-WIDTH · 5 SHADOW · 7 DURATION · 3 EASING · 20 Z-INDEX · 22 BREAKPOINTS · 1 OPACITY