What is Ferrari's primary brand color?

Ferrari's brand color is Rosso Corsa — #da291c, the racing red the marque has used since the 1920s. It appears scarcely across the design system: primary CTA fills, the Cavallino Rampante mark, and Formula 1 race-position highlights. The press state darkens to #b01e0a. Most pages are 90% near-black canvas (#181818) plus white FerrariSans type, with Rosso Corsa acting as the single voltage that focuses the eye on one action at a time. The brand never introduces a secondary saturated color in the main automotive context.

Is Ferrari's design system dark by default?

Yes — the canvas is near-black at #181818 (slightly warm, never pure black), and white-canvas bands appear only inside specific editorial contexts like preowned listings, pricing tables, and dealer surfaces. The system inverts that pattern for a small set of components (button-outline-on-light, text-input-on-light, hero-band-light, feature-card-light, preowned-listing-card), but the dominant page chrome is the dark canvas with full-bleed cinematic photography above it.

What typography does Ferrari use, and what should I use if FerrariSans isn't available?

Ferrari runs FerrariSans as the single sans family across every text role — display, body, navigation, captions, microcopy. Display weight stays at 500 (never bold), body at 400, and CTA / nav labels at 600–700 uppercase with 1.4px and 0.65px tracking. The spec walks through 14 type tokens with a peak at 80px / 500 for the homepage hero. FerrariSans is licensed; Inter at weight 500 with letter-spacing -1% is the documented open-source substitute, or Söhne for closer humanist proportions.

Why does Ferrari use sharp 0px corners on every button and card?

Sharp 0px corners (rounded.none) are the brand's signature precision — luxury-automotive engineering reads as exact lines rather than friendly curves. Every CTA, card, hero band, livery accent, and preowned listing carries 0px radius. Pill geometry (rounded.full at 9999px) appears in exactly one place: the badge-pill component used for small uppercase labels. Form inputs are the only exception at rounded.sm (4px). The rule is intentional — pills would soften the racing-precision language the brand has built since the 1947 Cavallino mark.

Can I use this DESIGN.md to build a React car-configurator or luxury site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Ferrari's restraint (single Rosso Corsa accent, near-black canvas, FerrariSans 500 display, sharp 0px corners, full-bleed photography) rather than a generic dark theme. You can also paste the tokens directly into Tailwind config or CSS variables. The 25 components cover most of what a luxury-automotive marketing or configurator surface needs — hero band, feature cards, driver cards, spec cells, race-calendar rows, preowned listings, newsletter band, and dark footer.

What's missing from this DESIGN.md spec?

A few things, documented in the Known Gaps section: FerrariSans is a licensed typeface (Inter at weight 500 is the substitute); animation timings for hero parallax, livery-band entrance, and race-position counters are out of scope; in-product surfaces like the preowned configurator and F1 telemetry overlays are only partially captured via marketing pages; form validation states beyond focus weren't visible on captured surfaces; and the Hypersail yellow tokens (#fff200 / #f6e500) are extracted but only appear inside the Hypersail sailing program — not part of the main automotive palette.

Ferrari Design System

Ferrari's design system as a DESIGN.md file.

About Ferrari DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source ferrari.com

Automotive
Consumer Electronics

Ferrari's marketing site does not behave like a typical car-OEM site. It behaves like a luxury magazine spread. The canvas is near-black at #181818 — slightly warm, never pure black — holding pure white FerrariSans display type at a restrained 500 weight. The only saturated color in the system is Rosso Corsa at #da291c, the racing red Ferrari has used since the 1920s, and it appears scarcely: primary CTAs, the Cavallino mark, and Formula 1 race-position numbers. Everything else is photography. Full-bleed cinematic hero shots — car details, livery panels, trackside frames — carry the visual weight, while typography stays quiet beneath. The discipline is the point.

This page packages the system into a single DESIGN.md file using the Google Labs open spec. Inside: 23 color tokens grouped into brand, surface, hairline, text, and semantic; 14 typography tokens running through FerrariSans at 500 for display and 400/700 for body; 7 corner-radius values capped by a dominant 0px sharp default; 9 spacing tokens on an explicit 8px ladder (xxxs 4px through super 128px); and 25 components covering top nav, buttons, hero bands, feature and driver cards, livery accent bands, preowned listing cards, spec cells, race-position cells, race-calendar rows, forms, badges, newsletter inputs, and the dark CTA and footer.

Feed the file to Claude, Cursor, or GitHub Copilot, and the AI writes React components that read as Ferrari — sharp 0px corners, uppercase tracked CTAs, FerrariSans 500 display, scarce Rosso Corsa — rather than a generic dark-mode SaaS theme. Reference the tokens directly in Tailwind config or CSS variables. Or use it as a design audit: most automotive sites copy the dark canvas but miss the restraint that makes it work. Ferrari's strength is what it refuses to do.

What makes it distinct

Single accent voltageRosso Corsa (#da291c) reserved for primary CTAs, the Cavallino, and F1 race-position highlights
Near-black canvas (#181818)never pure black, slightly warm; white bands appear only inside preowned and pricing surfaces
Sharp 0px corners on every CTA, card, and bandpill geometry is reserved for badge labels only
Display weight stays at 500uppercase CTA labels carry 1.4px tracking; the cinematic photography does the visual heavy-lifting
Explicit 8px spacing ladder with named scalexxxs 4px through super 128px, no ad-hoc px values

Live at ferrari.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ferrari.com

Explore Ferrari

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Ferrari design system FAQ

Common questions about Ferrari's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Ferrari.com

The live brand site — see the cinematic hero photography and Rosso Corsa CTAs in production context.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Ferrari in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→