Dark Mode
Design System Inspired by Ferrari

# 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.

First Name
Last Name
Email (Focus State)
Phone (Error State) Please enter a valid phone number
Message

## 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 border. Input fields and form containers — depth through delineation.