Ferrari
Identity
Automotive
Bundled OpenDesign package for Ferrari, derived from curated DESIGN.md, tokens.css, and components.html fixtures.
Typography
Ag
Ag
Ag
--text-4xl · 88pxThe quick brown fox--text-3xl · 62pxThe quick brown fox--text-2xl · 40pxThe quick brown fox--text-xl · 26pxThe quick brown fox--text-lg · 19pxThe quick brown fox--text-base · 16pxThe quick brown fox--text-sm · 14pxThe quick brown fox--text-xs · 12pxThe quick brown foxPalette
#0b0b0bPage background — defines the brand canvas.#171717Card / lifted container background.#23130fTertiary surface tier (kami warm-sand).#fffaf0Primary text color.#e8dcc8Secondary text tier (kami dark-warm).#a89f91Subtext / captions.#ffd200Tertiary FG / metadata tier (kami stone).#342a24Default border / card edge.#241f1bInner row separator that should not visually compete.#dc0000Brand accent. ≤2 visible uses per screen (lint enforced).#ffffffFG when --accent is the bg.#0f9d58Success state.#ffd200Warning state.#ff3b30Danger state.Also named in DESIGN.md
#da291cThe iconic Rosso Corsa — primary accent and CTA color. Used for the Subscribe button, key action triggers, an…#b01e0aDeeper variant of Ferrari Red for hover/pressed states and high-contrast contexts — adds dimensionality to th…#9d2211The most saturated dark red — used for active states and extra emphasis where even Dark Red needs more weight…#fff200Heritage accent from Ferrari's racing livery — reserved for special highlights and motorsport-related context…#f6e500Slightly warmer and more golden than Racing Yellow — used for secondary heritage accents and category markers…#000000Hero sections, cinematic backgrounds, and the dominant dark surface — the void that makes imagery and the Pra…#303030Secondary dark surface for footer regions, newsletter sections, and layered dark panels — slightly lifted fro…#d2d2d2Subtle alternate surface for dividers and border treatments on white panels (--f-color-ui-20#181818Primary body text color on light surfaces — slightly softened from absolute black for better readability (lin…#666666Secondary text and subdued UI labels — used where text needs to recede from the primary hierarchy (--f-color-…#8f8f8fTertiary text for metadata, timestamps, and supportive content (--f-color-black-50Imagery & layout
Radius
4px8px14px9999pxSpacing
--space-1 · 4px--space-2 · 8px--space-3 · 12px--space-4 · 16px--space-5 · 20px--space-6 · 24px--space-8 · 32px--space-12 · 48pxElevation
--elev-raisedLayout
Layout rules
- Base unit: 8px (detected system base)
- Scale: 1px, 2px, 4px, 5px, 6px, 9px, 10px, 11.2px, 12px, 13px, 15px, 16px, 19px, 20px, 25px
- Button padding: 12px vertical, 10px horizontal — compact and precise
- Section padding: Generous vertical spacing (40–80px estimated) between major content blocks
- Card gaps: 16–20px between grid items
- Footer padding: 25px horizontal sections within the dark footer block