{"id":"80164adf-a898-4f7c-bce7-12f3f62e1649","name":"Ferrari","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","colors":[{"name":"Obsidian Black","hex":"#000000","role":"Page backgrounds, navigation bars, dramatic photographic backdrops for product showcases.","group":"neutral","cssVariable":"--color-obsidian-black"},{"name":"Polar White","hex":"#ffffff","role":"Primary text, prominent page sections, content cards, and interactive elements – providing crisp contrast against dark backgrounds.","group":"neutral","cssVariable":"--color-polar-white"},{"name":"Shadow Graphite","hex":"#181818","role":"Secondary text in navigation, footer elements, and subtle background shading to create depth without overt shadows.","group":"neutral","cssVariable":"--color-shadow-graphite"},{"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","cssVariable":"--color-steel-gray"},{"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","cssVariable":"--color-ash-mist"},{"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","cssVariable":"--color-rosso-corsa"}],"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"}],"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."]}}