# Design Reference - Ferrari
> 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.

## Source
- Original site: https://ferrari.com
- Captured: 2026-04-11T16:27:33.690Z

## Tags
- high-contrast
- monochromatic
- luxury
- performance
- precision
- minimal
- engineered
- dramatic

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Obsidian Black | `#000000` | neutral | Page backgrounds, navigation bars, dramatic photographic backdrops for product showcases. |
| Polar White | `#ffffff` | neutral | Primary text, prominent page sections, content cards, and interactive elements – providing crisp contrast against dark backgrounds. |
| Shadow Graphite | `#181818` | neutral | Secondary text in navigation, footer elements, and subtle background shading to create depth without overt shadows. |
| Steel Gray | `#303030` | neutral | Minor dividers, borders, and backgrounds for less prominent UI elements, establishing a subtle hierarchy within dark themes. |
| Ash Mist | `#8f8f8f` | neutral | Supportive text, icon fills, and subtle hints where softer contrast is desired, such as secondary information or disabled states. |
| Rosso Corsa | `#FF0000` | brand | Accent color for interactive elements, progress indicators, underlines on active navigation items - the iconic visual signature of the brand, used sparingly for impact. |

## 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; 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 And Radius
```json
{
  "spacing": {
    "radius": {
      "all": "0px"
    },
    "elementGap": "10px",
    "sectionGap": "48px",
    "cardPadding": "20px"
  },
  "radius": {
    "all": "0px"
  }
}
```

## Component Patterns
- name: Hero Slide Indicator & CTA
- name: News Feature Card
- name: Navigation Link Group & Carousel Pagination
- 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

## 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.

## Don't
- 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.