automotive Color System
Ferrari's website is a digital editorial — a curated magazine where the Prancing Horse brand is pres...
Ferrari's website is a digital editorial — a curated magazine where the Prancing...
Ferrari uses #DA291C as the primary accent for interactive elements
Carefully selected 8 colors for automotive applications
Uses gradient
#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)
/* Ferrari Color System */
:root {
--ferrari-ferrari-red: #DA291C;
--ferrari-pure-white: #FFFFFF;
--ferrari-dark-red: #B01E0A;
--ferrari-deep-red: #9D2211;
--ferrari-racing-yellow: #FFF200;
--ferrari-modena-yellow: #F6E500;
--ferrari-absolute-black: #000000;
--ferrari-dark-surface: #303030;
}
/* Example usage */
.ferrari-button-primary {
background-color: var(--ferrari-ferrari-red);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}BMW's website is automotive engineering made visual — a design system that commu...
Lamborghini's website is a cathedral of darkness — a digital stage where jet-bla...
Renault's website is a vibrant digital showroom that balances French automotive ...
Tesla's website is an exercise in radical subtraction — a digital showroom where...