{"id":"80164adf-a898-4f7c-bce7-12f3f62e1649","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/80164adf-a898-4f7c-bce7-12f3f62e1649","originalSiteUrl":"https://ferrari.com","capturedAt":"2026-04-11T16:27:33.690Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Ferrari","summary":"Precision engineered machinery. Like the interior of a sleek, high-performance engine, where every component is black or silver, and only critical indicators glow red.","description":"This design system evokes precision engineering and focused luxury through a high-contrast, almost entirely achromatic palette. Deep blacks and stark whites create a dramatic stage for the content, focusing attention on high-performance imagery. Subtle gray variations provide surface differentiation, akin to different finishes on precision metal, rather than relying on chromatic accents for visual hierarchy. The custom typography, characterized by its wide letter-spacing, projects a sense of deliberate pacing and exclusivity, ensuring every word commands attention.","tags":["high-contrast","monochromatic","luxury","performance","precision","minimal","engineered","dramatic"],"industry":"other","colorScheme":"both","colors":[{"name":"Obsidian Black","hex":"#000000","role":"Page backgrounds, navigation bars, dramatic photographic backdrops for product showcases.","group":"neutral"},{"name":"Polar White","hex":"#ffffff","role":"Primary text, prominent page sections, content cards, and interactive elements – providing crisp contrast against dark backgrounds.","group":"neutral"},{"name":"Shadow Graphite","hex":"#181818","role":"Secondary text in navigation, footer elements, and subtle background shading to create depth without overt shadows.","group":"neutral"},{"name":"Steel Gray","hex":"#303030","role":"Minor dividers, borders, and backgrounds for less prominent UI elements, establishing a subtle hierarchy within dark themes.","group":"neutral"},{"name":"Ash Mist","hex":"#8f8f8f","role":"Supportive text, icon fills, and subtle hints where softer contrast is desired, such as secondary information or disabled states.","group":"neutral"},{"name":"Rosso Corsa","hex":"#FF0000","role":"Accent color for interactive elements, progress indicators, underlines on active navigation items - the iconic visual signature of the brand, used sparingly for impact.","group":"brand"}],"typography":[{"role":"Primary typeface for all body text, navigational links, buttons, and footers. The intentional wide letter-spacing across all sizes is a distinctive characteristic, giving each word room to breathe and contributing to the premium, measured feel.","sizes":"11px, 12px, 13px","family":"custom","weight":"","lineHeight":"1.27, 1.50, 1.78, 2.00","substitute":"Arial, Helvetica, sans-serif","letterSpacing":"0.0150em, 0.0220em, 0.0280em, 0.0830em, 0.0910em"}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.78},{"role":"body-sm","size":12,"lineHeight":1.78},{"role":"body","size":13,"lineHeight":1.78}],"spacing":{"radius":{"all":"0px"},"elementGap":"10px","sectionGap":"48px","cardPadding":"20px"},"radius":{"all":"0px"},"guidelines":{"do":["Do utilize a high-contrast palette of `Obsidian Black` (#000000) and `Polar White` (#ffffff) as the primary background and text colors to maintain a dramatic and luxurious feel.","Do apply `Rosso Corsa` (#FF0000) as the sole accent color, reserving it exclusively for interactive elements and key indicators to command attention.","Do apply custom `Body-Font` with generous letter-spacing (e.g., 0.0830em for navigation) for headlines and navigation to emphasize precision and exclusivity.","Do use a 'comfortably spaced' rhythm with `elementGap` of `10px` and `cardPadding` of `20px` to maintain order and focus.","Do maintain sharp, `0px` radius on all interactive elements and containers to reinforce the engineered aesthetic.","Do use the `Shadow Graphite` (#181818) and `Steel Gray` (#303030) as subtle surface variations rather than relying on drop shadows for depth."],"dont":["Don't introduce additional chromatic colors; the system is built on a black-and-white foundation with a single `Rosso Corsa` accent.","Don't use rounded corners or soft edges on any components; the design demands sharp, precise lines (`0px` radius).","Don't use drop shadows for elevation; rely on shifts in neutral background colors (`#000000`, `#181818`, `#ffffff`) to create hierarchy and depth.","Don't use tight letter-spacing; the custom `Body-Font`'s inherent wide spacing is a core part of the brand's typographic identity.","Don't embed images with external context; use tightly cropped, abstract, or studio-shot product imagery that isolates the subject.","Don't deviate from the `Body-Font` for text elements; the system relies on this single typeface for typographic consistency and brand identity."]},"components":[{"name":"Hero Slide Indicator & CTA","role":""},{"name":"News Feature Card","role":""},{"name":"Navigation Link Group & Carousel Pagination","role":""},{"name":"Ghost Navigation Link","role":"Primary navigation item"},{"name":"Hero Action Arrow Button","role":"Call to action in hero section"},{"name":"Minimal Pill Indicator","role":"Carousel/slider pagination"},{"name":"Feature Card Headline","role":"Editorial content headline"},{"name":"Body Text Paragraph","role":"Standard informational text"},{"name":"Footer Link","role":"Secondary navigation and informational links"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: `Polar White` (#ffffff)\n- Background (dark): `Obsidian Black` (#000000)\n- Background (light): `Polar White` (#ffffff)\n- CTA/Accent: `Rosso Corsa` (#FF0000)\n- Secondary Text/Icon: `Shadow Graphite` (#181818)\n\n### Example Component Prompts\n1. Create a full-width hero section: `Obsidian Black` (#000000) background. Centered primary heading: `Polar White` (#ffffff), custom `Body-Font` weight 400, size 48px, letter-spacing 0.091em. Below it, a 'Hero Action Arrow Button' (transparent, `Polar White` text, `Body-Font`, 0px radius, 5px vertical padding).\n2. Create a content card for an editorial feature: `Polar White` (#ffffff) background. 20px padding. Headline: `Shadow Graphite` (#181818), custom `Body-Font` weight 400, size 24px, letter-spacing 0.083em. Body text below: `Ash Mist` (#8f8f8f), custom `Body-Font` weight 400, size 12px, line-height 1.78, letter-spacing 0.015em. No border or shadow.\n3. Generate a horizontal pagination component for a carousel: Three 'Minimal Pill Indicators'. Two are filled `Ash Mist` (#8f8f8f), the third (active) is `Rosso Corsa` (#FF0000) filled. All are 0px radius.\n4. Design a footer section: `Obsidian Black` (#000000) background. Section gap around elements is 10px. Footernavigation links: `Shadow Graphite` (#181818), custom `Body-Font` weight 400, size 11px, letter-spacing 0.028em. Social media icons are `Polar White` (#ffffff)."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924835013-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924835013-thumb.jpg"},"similarStyleIds":["c9c5be5a-aaa1-4338-9681-8378d2e24fbd","98676f9d-5c41-413b-afdc-4a87deb154d6","b8899cbd-e2ca-4069-83cf-d8f8b0d71100","a5dc5626-1103-42e3-9edb-a6d52fb9a210","f11750fc-d7c0-4d26-b32a-3b1d2098ae34","96845df2-7ddb-420a-814e-c339f95a6554","8f623d19-51f6-4da2-bc45-05573cc98283","764b6a64-c233-4e0f-b8e1-bc01e2f8aa16","7266b546-2fb0-465c-acd6-79001c39829a","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","ccb67114-6da3-476a-8ca4-b348ab3d0a03","27a4a4fa-4b1a-4e7e-b2c3-3e5bf57f00e5","46f01790-e488-4aba-9236-02466b0fb3cd","67c60ee4-ac38-41ee-834e-ed2a92146417","a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","4d4772a3-e1da-415f-a6d7-658dcefdcecd","ab2a0b58-377d-4674-986e-4abbdf6c49ed","99820c01-a9a7-40a4-9d73-8c75b19e7e91","9c1ec0f7-f6fb-4388-9fde-760942dedbda","80085ab0-3123-4bf3-85e0-ea9a1438c2ab"],"exports":{"designMdUrl":"/references/refero/80164adf-a898-4f7c-bce7-12f3f62e1649/design.md","tokensJsonUrl":"/references/refero/80164adf-a898-4f7c-bce7-12f3f62e1649/tokens.json","tailwindV4Url":"/references/refero/80164adf-a898-4f7c-bce7-12f3f62e1649/tailwind-v4.css","cssVariablesUrl":"/references/refero/80164adf-a898-4f7c-bce7-12f3f62e1649/tailwind-v4.css"}}