Design Token Catalog

Design System Inspired by Ferrari

A visual reference generated from DESIGN.md — every color, type rule, and component token documented

Precision Engineering Meets Editorial Design
Subscribe Configure

Color Palette

Every color extracted from Ferrari's design system with semantic names, hex values, and functional roles.

Primary
Ferrari Red
#DA291C
Primary CTA and brand accent (--f-color-accent-100)
Pure White
#FFFFFF
Primary surface for editorial panels (--f-color-ui-0)
Secondary & Accent
Dark Red
#B01E0A
Hover/pressed states (--f-color-accent-90)
Deep Red
#9D2211
Active states, extra emphasis (--f-color-accent-80)
Racing Yellow
#FFF200
Heritage racing accent (--f-color-yellow-hypersail)
Modena Yellow
#F6E500
Secondary heritage accent (--f-color-yellow)
Surface & Background
Absolute Black
#000000
Hero sections, cinematic backgrounds
Dark Surface
#303030
Footer, newsletter sections (--f-color-ui-90)
Light Gray Surface
#D2D2D2
Dividers, border treatments (--f-color-ui-20)
Neutrals & Text
Near Black
#181818
Primary body text on light surfaces
Dark Gray
#666666
Secondary text, subdued labels (--f-color-black-60)
Mid Gray
#8F8F8F
Tertiary text, metadata (--f-color-black-50)
Silver Gray
#969696
Placeholder, disabled states (--f-color-black-55)
Border Gray
#CCCCCC
Input borders, form containers
Semantic
Warning Red
#F13A2C
Accessible warning state (--f-color-accessible-warning)
Success Green
#03904A
Positive status (--f-color-accessible-success)
Info Blue
#4C98B9
Informational callouts (--f-color-accessible-info)
Link Hover Blue
#3860BE
Interactive hover state for text links
Teal
#1EAEDB
Button hover state

Typography Scale

FerrariSans for headings and editorial content, Body-Font for labels and captions. Rendered with DM Sans and Barlow Condensed as Google Font substitutes.

Section Title — The Art of Engineering
Section Title — 26px / 500 / 1.20 LH / normal — FerrariSans
Card Heading — Concept Revealed
Card Heading — 24px / 400 / normal LH / normal — FerrariSans
Subheading — Maranello Edition
Subheading — 18px / 700 / 1.20 LH / normal — FerrariSans
UI Heading — Vehicle Configuration
UI Heading — 16px / 500 / 1.40 LH / 0.08px — FerrariSans
Body Bold — Performance Specifications
Body Bold — 16px / 700 / 1.30 LH / normal — FerrariSans
Button Label — Configure
Button Label — 16px / 400 / normal LH / 1.28px — FerrariSans
Small Button — Discover More
Small Button — 14.4px / 700 / 1.00 LH / normal — FerrariSans
Nav Link — Models & Range
Nav Link — 13px / 600 / 1.20 LH / 0.13px — FerrariSans
Caption — Photographed at the Fiorano test circuit during the annual event, showcasing the latest innovations in motorsport technology.
Caption — 13px / 400 / 1.50 LH / 0.195px — FerrariSans/Body-Font
Micro Button
Micro Button — 12px / 700 / 1.00 LH / 0.96px — FerrariSans
Label Upper — Motorsport Heritage
Label Upper — 12px / 400 / 1.27 LH / 1px / uppercase — Body-Font
Micro Label — Racing Division
Micro Label — 11px / 400 / 1.27 LH / 1px / uppercase — Body-Font

Button Variants

All button variants from the design system. Ferrari's CTA philosophy: architecture, not decoration.

Primary CTA (White)
Subscribe CTA (Red)
Text Link View Details
On Dark Background
Ghost Button (White Border)
Subscribe CTA (Red)
Text Link (White) View All

Card Examples

Editorial cards and dark cinematic cards — the two primary container treatments.

Motorsport
Championship Season Highlights
A curated look back at the defining moments from this season's racing campaign across Formula 1 and endurance events.
Concept
Vision GT Unveiled
The latest concept from the Maranello design studio merges aerodynamic precision with sculptural beauty.
Heritage
Celebrating 75 Years of Excellence
From the 125 S to the SF-23 — tracing the evolution of engineering artistry that defines the Prancing Horse.

Form Elements

Input fields, labels, and states — following Ferrari's transparent-background input treatment with precise 2px radius.

Please enter a valid phone number

Spacing Scale

Base unit: 8px. The full spacing scale extracted from Ferrari's design tokens.

1px
2px
4px
5px
6px
9px
10px
12px
13px
15px
16px
19px
20px
25px

Border Radius Scale

Ferrari's precision engineering aesthetic demands near-zero border-radius. The 2px default is razor-sharp.

1px Inline Elements
2px Buttons, Inputs
8px Dialogs, Modals
50% Dots, Avatars

Elevation & Depth

Ferrari communicates hierarchy through surface color contrast and photography, not shadows. The single shadow token is a 1-pixel whisper.

Level 0 — Flat
No shadow, no border. Default for all content sections and cards.
Level 1 — Subtle
1px whisper shadow. Rare — cookie consent dialogs and dropdown menus.
Level 2 — Overlay
hsla(0,0%,7%,0.8) backdrop. Modal overlays and image captions.
Level 3 — Border
1px solid #CCCCCC. Input fields and form containers — depth through delineation.