packages/shared-skills/skills/frontend/references/design/ferrari.md
Ferrari's website is a digital editorial — a curated magazine where the Prancing Horse brand is presented with the gravitas of an art institution and the precision of Italian coachwork. The page opens onto an expanse of absolute black, broken only by the iconic Prancing Horse emblem floating alone in its own atmosphere. Below, the content unfolds in dramatic alternations between inky-dark cinematic sections and crisp white editorial panels. This chiaroscuro rhythm — darkness yielding to light, machinery yielding to human story — feels more like paging through a Ferrari yearbook than scrolling a commercial website. Every section is a curated vignette: a concept car dissolving from shadow, two F1 drivers posed with sculptural stillness, a lineup of production models arranged in a jewel-toned parade.
The color language is monastically restrained for a brand built on speed and emotion. Ferrari Red (#DA291C) appears with almost surgical sparseness — reserved for the Subscribe CTA and accent moments that need to command immediate attention. The vast majority of the interface lives in black, white, and a carefully calibrated gray scale (from #303030 dark surfaces through #8F8F8F mid-tones to #D2D2D2 light borders). Two yellows — Racing Yellow (#FFF200) and the deeper Modena Yellow (#F6E500) — exist in the token system as heritage accents for special contexts, honoring Ferrari's racing provenance. The restraint means that when red does appear, it carries the weight of the entire brand.
Typography relies on FerrariSans — a proprietary sans-serif family with medium-weight headings (500–700) and compact proportions. Display text runs at 24–26px for section titles, while the UI chrome lives at 12–16px in weights ranging from regular to bold. A secondary "Body-Font" custom typeface handles captions and utility text, rendered in uppercase with wide letter-spacing (1px) to create a label-like editorial quality. This two-font system — FerrariSans for narrative authority, Body-Font for structural annotation — gives the site a print-magazine hierarchy. No text decoration is gratuitous. Letter-spacing is tight for headlines and deliberately expanded for labels, creating a visual rhythm that alternates between urgency and composure.
Key Characteristics:
#DA291C) used with extreme sparseness — accent, not atmosphere#DA291C): The iconic Rosso Corsa — primary accent and CTA color. Used for the Subscribe button, key action triggers, and brand moments where maximum visual authority is needed. The single most important color in the system (--f-color-accent-100)#FFFFFF): Primary surface for editorial content panels, navigation text on dark backgrounds, and button fills. The canvas that provides breathing room between dark cinematic sections (--f-color-ui-0)#B01E0A): Deeper variant of Ferrari Red for hover/pressed states and high-contrast contexts — adds dimensionality to the brand color without introducing a new hue (--f-color-accent-90)#9D2211): The most saturated dark red — used for active states and extra emphasis where even Dark Red needs more weight (--f-color-accent-80)#FFF200): Heritage accent from Ferrari's racing livery — reserved for special highlights and motorsport-related contexts (--f-color-yellow-hypersail)#F6E500): Slightly warmer and more golden than Racing Yellow — used for secondary heritage accents and category markers (--f-color-yellow)#000000): Hero sections, cinematic backgrounds, and the dominant dark surface — the void that makes imagery and the Prancing Horse emblem float#303030): Secondary dark surface for footer regions, newsletter sections, and layered dark panels — slightly lifted from pure black for depth differentiation (--f-color-ui-90)#D2D2D2): Subtle alternate surface for dividers and border treatments on white panels (--f-color-ui-20)hsla(0, 0%, 7%, 0.8)): Semi-transparent near-black for modal overlays and image caption backgrounds (--f-color-overlay-darker)#181818): Primary body text color on light surfaces — slightly softened from absolute black for better readability (link default color)#666666): Secondary text and subdued UI labels — used where text needs to recede from the primary hierarchy (--f-color-black-60)#8F8F8F): Tertiary text for metadata, timestamps, and supportive content (--f-color-black-50)#969696): Placeholder text and disabled state indicators (--f-color-black-55)#F13A2C): Accessible warning state — brighter and more orange-shifted than Ferrari Red to differentiate semantic alerts from brand expression (--f-color-accessible-warning)#03904A): Confirmation and positive status indicators (--f-color-accessible-success)#4C98B9): Informational callouts, tooltips, and neutral status messaging (--f-color-accessible-info)#3860BE): Interactive hover state for text links — a dignified navy-blue that signals interactivity without competing with Ferrari Redhsla(0, 0%, 7%, 0.8)) creates depth through transparency layering over imagery| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Section Title | 26px (1.63rem) | 500 | 1.20 | normal | FerrariSans, primary editorial headings on white backgrounds |
| Card Heading | 24px (1.50rem) | 400 | normal | normal | FerrariSans, content card titles |
| Subheading | 18px (1.13rem) | 700 | 1.20 (tight) | normal | FerrariSans, bold subsection labels |
| UI Heading | 16px (1.00rem) | 500 | 1.40 | 0.08px | FerrariSans, component headings and nav items |
| Body Bold | 16px (1.00rem) | 700 | 1.30 (tight) | normal | FerrariSans, emphasized inline text |
| Button Label | 16px (1.00rem) | 400 | normal | 1.28px | FerrariSans, primary button text with wide tracking |
| Small Button | 14.4px (0.90rem) | 700 | 1.00 (tight) | normal | FerrariSans, compact action buttons |
| Nav Link | 13px (0.81rem) | 600 | 1.20 (tight) | 0.13px | FerrariSans, navigation and footer links |
| Caption | 13px (0.81rem) | 400 | 1.50 | 0.195px | FerrariSans/Body-Font, metadata and descriptions |
| Micro Button | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | FerrariSans, small CTA with wide tracking |
| Label Upper | 12px (0.75rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase labels and category tags |
| Micro Label | 11px (0.69rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase smallest annotation text |
| Cookie Text | 45px (2.81rem) | 400 | 1.50 | 0.195px | Arial, consent dialog oversized button text |
text-transform: uppercase with expanded letter-spacing (1px) to create a visually distinct label layer that reads as "informational overlay" rather than primary contentFerrari's buttons are minimal white rectangles with near-zero radius — the CTA philosophy is "architecture, not decoration."
Primary CTA (White) — The default action button:
#FFFFFF, text #000000, fontSize 16px (FerrariSans), letterSpacing 1.28px, padding 12px 10px, borderRadius 2px, border 1px solid #000000#1EAEDB (Teal), text #FFFFFF, opacity 0.9#1EAEDB, text #FFFFFF, border 1px solid #FFFFFF, outline 2px solid #000000, opacity 0.9Subscribe CTA (Red) — The high-emphasis action button:
#DA291C (Ferrari Red), text #FFFFFF, borderRadius 2px, padding 12px 10pxGhost Button (White Border) — For dark backgrounds:
#FFFFFF, border 1px solid #FFFFFF, borderRadius 2px, padding 12px 10px#1EAEDB (Teal), text #FFFFFF, opacity 0.9Text Link — Inline navigation:
#181818 (on light surfaces) or #FFFFFF (on dark), no border, no background#3860BE (Link Hover Blue), decoration removes underlineEditorial Card (Content sections):
Dark Cinematic Card (Hero/feature sections):
#000000 (Absolute Black)Vehicle Lineup (Model carousel):
Newsletter Input (Footer section):
#CCCCCC#969696 (Silver Gray)Cookie Consent (Modal):
rgb(153, 153, 153) 1px 1px 1px 0px#303030 (Dark Surface) with category links in Body-Font uppercaseFerrari treats white space as a gallery wall. Each section — whether a concept car render on black void or a pair of F1 drivers on neutral gray — is given its own "room" of breathing space. The alternating black/white sections create a pacing rhythm: dark = immersive moment, white = editorial content, dark = immersive moment. This cadence makes scrolling feel like turning pages in a luxury publication. White space between editorial cards is moderate (not Tesla-extreme) because Ferrari is telling stories, not exhibiting single objects.
| Value | Context |
|---|---|
| 1px | Subtle softening on small inline elements (spans) |
| 2px | Default for buttons, inputs, and interactive elements — barely perceptible, razor-precision |
| 8px | Modal dialogs and overlay containers — the "softest" structural radius |
| 50% | Circular elements: carousel dots, avatar thumbnails, slider handles |
| Level | Treatment | Use |
|---|---|---|
| Level 0 (Flat) | No shadow, no border | Default state for all content sections and cards |
| Level 1 (Subtle) | rgb(153, 153, 153) 1px 1px 1px 0px | Rare — cookie consent dialogs and dropdown menus |
| Level 2 (Overlay) | hsla(0, 0%, 7%, 0.8) backdrop | Modal overlays and image caption backgrounds |
| Level 3 (Border) | 1px solid #CCCCCC | Input fields, form containers — depth through delineation not shadow |
Ferrari's approach to elevation is nearly as flat as Tesla's, but with a different rationale. Where Tesla avoids shadows for minimalism, Ferrari avoids them because the editorial photography provides all the visual depth needed. The single shadow token (rgb(153, 153, 153) 1px 1px 1px 0px) is extremely subtle — a 1-pixel whisper used only in utilitarian contexts like consent dialogs. The site communicates hierarchy through three strategies:
--f-color-overlay-darker at 80% opacity creates depth without shadow#DA291C) sparingly — only for primary CTAs and brand-critical moments. Its power comes from restraint#181818 (Near Black) for body text instead of pure #000000 — the subtle warmth improves readability#FFF200, #F6E500) strictly for motorsport and racing heritage contexts#3860BE) for anything other than interactive hover states — it's not a brand color#F13A2C warning is deliberately different from #DA291C brand red| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≤375px | Single-column, minimal padding (12px), stacked navigation, hero text scales to ~18px, full-width CTAs |
| Mobile | 376–600px | Single-column, slightly larger padding (16px), hamburger nav, body text at 13px |
| Tablet Small | 601–768px | 2-column editorial grid begins, hero images maintain full-width, footer switches to 2-column |
| Tablet | 769–960px | Full 2-column layout, carousel shows 3 vehicles, padding increases to 20px |
| Desktop | 961–1280px | Full navigation, 2-column editorial with larger imagery, vehicle lineup shows 5 models |
| Large Desktop | 1281–1920px | Maximum content width, generous whitespace, hero photography at full cinematic scale |
object-fit: cover to maintain cinematic compositionWhen refining existing screens generated with this design system: