Ferrari (inspired interpretation)

# Ferrari — Brand Spec

## 01 Brand Overview
Ferrari is the definitive luxury performance marque — Italian racing heritage rendered as cinematic, high-contrast digital theatre. The identity fuses the Prancing Horse's black-on-white authority with the unmistakable Rosso Corsa accent, positioning the brand at the intersection of motorsport legacy, engineering precision and exclusive craftsmanship. Every surface reads as a stage: full-bleed imagery, editorial restraint, and a single decisive burst of red.

## 02 Color Palette
```
- name: canvas
  role: bg
  light: oklch(100% 0 0)
  dark:  oklch(15% 0 0)
  hex:   #ffffff
```
```
- name: ink
  role: subject
  light: oklch(0% 0 0)
  dark:  oklch(0% 0 0)
  hex:   #000000
```
```
- name: primary
  role: accent
  light: oklch(58% 0.223 27)
  dark:  oklch(58% 0.223 27)
  hex:   #eb2323
```
```
- name: secondary
  role: highlight
  light: oklch(90% 0.181 100)
  dark:  oklch(90% 0.181 100)
  hex:   #f6e500
```
```
- name: accent
  role: surface
  light: oklch(56% 0.256 29)
  dark:  oklch(56% 0.256 29)
  hex:   #ff0000
```
```
- name: cta-ink
  role: shadow
  light: oklch(18% 0 0)
  dark:  oklch(18% 0 0)
  hex:   #181818
```

## 03 Typography
- Primary (display): `'FerrariSans', 'Helvetica Neue', Arial, sans-serif` — headlines, hero titles, all-caps section labels. A clean geometric-humanist grotesque; set uppercase with tight tracking for hero statements.
- Secondary (body): `'FerrariSans', 'Helvetica Neue', Arial, sans-serif` — running prose, news copy, captions. Regular weight, generous line-height for editorial calm.
- Mono (optional): `'FerrariSans', 'SF Mono', ui-monospace, monospace` — year markers, dates, race metadata numerics (e.g. "1951", "2000 · 2001").

## 04 Voice
### Values
"We race to win — engineering, passion and heritage fused into the pursuit of the extraordinary."

### Aesthetic
Cinematic contrast, editorial restraint, monochrome-with-a-single-red, motorsport gravitas, full-bleed drama, precision-engineered.

### Tone of Voice
Authoritative, passionate, exclusive, confident, heritage-proud.

## 05 Layout posture
- Full-bleed cinematic hero panels alternating black and white sections — high-drama vertical rhythm with hard section breaks.
- Centered, all-caps display titles with a small overline label ("Racing", "Collections") and a circular discover-arrow CTA.
- Zero-radius, dividerless composition — structure comes from tonal blocks and generous negative space, not lines.
- Signature flourish: a single Rosso Corsa card or button punctuating otherwise monochrome pages.

## 06 Anti-defaults
- Never rounds corners — radius is strictly 0px everywhere, including buttons and cards.
- Avoids multi-color palettes; red and yellow appear only as isolated accents against black/white, never blended.
- No drop-shadows or soft elevation — components sit flat on tonal fields.
- Avoids casual or playful copy; nothing diminutive or ironic.
- Typography inferred as FerrariSans grotesque from the site facts; letterform detail not fully legible in screenshots so fallbacks are Helvetica-class grotesques.

## 07 Logo
- The mark is the Cavallino Rampante — a solid, organic silhouette of a rearing prancing horse, hand-drawn in flat black with fine mane and tail detailing. Not a wordmark; a heraldic symbol.
- Provide black-on-light and white/knockout-on-dark variants only; the horse appears solid #000000 on white in the header.
- Clear-space: minimum one hoof-height of empty margin on all sides; minimum legible size ~24px tall for the standalone horse in nav.
- Never recolor the horse off-palette, never add gradients or the yellow shield background where the clean silhouette mark is specified.

## 08 Imagery
- High-production automotive and motorsport photography — full-bleed, dramatic low-key lighting, deep blacks (F1 tyre/hero shots).
- Archival black-and-white portraiture for heritage/champions content, treated with subtle grain and grayscale discipline.
- Reserve full-saturation color imagery for cars and partner/product cards; let editorial sections stay near-monochrome.
- Subjects: race cars, drivers, historic champions, craftsmanship close-ups. Avoid stock lifestyle imagery, clutter, or busy backgrounds.

## 09 UI Components
- CTAs come in two forms: solid red rectangular buttons (#eb2323 fill, white uppercase text, 0px radius) and outline circular icon-buttons wrapping a chevron/arrow ("DISCOVER", "READ MORE").
- Primary action buttons use near-black #181818 fill with white text — flat, no shadow, sharp corners.
- Cards are edge-to-edge rectangles with no radius and no border; the Rakuten partner card is a flat red rectangle with centered lockup.
- Nav is a thin fixed black bar with small-caps links (RACING, SPORTS CARS, COLLECTIONS) and a right-aligned SEARCH; secondary sub-nav bar holds a section title and hamburger.
- Carousels use minimal dot indicators plus flat left/right chevrons and a small pause control — restrained, monochrome controls.
- Hover/active states shift link opacity and reveal a thin underline accent rather than color-fill changes.

## 10 Iconography
- Line icons only — thin, uniform ~1.5px stroke, no fill (chevrons, arrows, social glyphs, accessibility figure).
- Chevron-in-circle is the recurring navigation metaphor; corners on the enclosing ring are perfectly circular while UI blocks stay square.
- Icons held to a small, consistent footprint (~16–20px) with literal, universally-legible metaphors.

## 11 Patterns & Data Visuals
- No charts or graphs; "data" is expressed as year labels and championship dates in small red or gray uppercase type (e.g. "2000 · 2001 · 2002").
- Champions gallery uses a rigid 3-up grid of grayscale photo tiles with name-over-image labels split bold/light (JODY SCHECKTER, NIKI LAUDA).
- Empty/ghost sections use very-low-contrast oversized display words ("NATURAL", "SKETCH BODY", "PAST") as background texture on black.
- Decorative motif: repeated horizontal name ribbons faintly tiled behind portraits; a thin red bottom-edge band as a page footer accent.

## 12 Spacing & Grid
- Airy, cinematic spacing built on a 10px base unit; hero and section blocks are tall and full-viewport, giving a slow, deliberate scroll rhythm.
- Content aligns to a 12-column grid with wide gutters; footer resolves into 5 evenly-spaced link columns.
- Section density is low — few elements per screen, large type, and heavy reliance on negative space over dividers.
- Radius scale is a flat 0px system-wide; the only curves are circular icon-buttons and carousel dots.

## 13 Products
- Racing: Scuderia Ferrari HP (service)
- SF-26 (product)
- Sports Cars (product)
- Races (service)
- Hypercar (product)
- Competizioni GT (product)
- History (service)
- Overview (service)