# Ferrari — Design System
> Official website for the luxury sports car manufacturer, showcasing their vehicles, racing activities, and lifestyle collections.
- **Canonical:** https://uiuxskills.com/library/ferrari
- **Source:** https://www.ferrari.com
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:27.226Z

---

---
version: alpha
name: Ferrari
description: Official website for the iconic Italian luxury sports car manufacturer.
tone: Bold, authoritative, and high-energy.
color-scheme: light
colors:
  primary: "#EB2323"
  secondary: "#F6E500"
  surface: "#FFFFFF"
  on-surface: "#000000"
  surface-container: "#F0F0F0"
  outline: "#FFCC00"
  error: "#FF5722"
  on-primary: "#FFFFFF"
  focus-ring: "#000000"
  divider: "#E0E0E0"
typography:
  display-lg:
    fontFamily: FerrariSans
    fontSize: 48px
  display-md:
    fontFamily: FerrariSans
    fontSize: 36px
  headline-lg:
    fontFamily: FerrariSans
    fontSize: 26px
  headline-md:
    fontFamily: FerrariSans
    fontSize: 24px
  headline-sm:
    fontFamily: FerrariSans
    fontSize: 20px
  body-md:
    fontFamily: FerrariSans
    fontSize: 16px
  body-sm:
    fontFamily: FerrariSans
    fontSize: 13px
  label-md:
    fontFamily: FerrariSans
    fontSize: 14px
  label-sm:
    fontFamily: FerrariSans
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 50%
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#C01C1C"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.divider}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.divider}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 300ms
  duration-medium: 600ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.1)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Ferrari's visual identity is defined by high-contrast, bold, and performance-oriented aesthetics. The brand uses a stark black-and-white palette punctuated by its signature 'Rosso Corsa' red, conveying speed, prestige, and Italian excellence.

## Colors

The color strategy relies on a high-contrast foundation to ensure maximum impact and readability, utilizing the iconic brand red as a functional accent.

*   Primary (#EB2323): The iconic Ferrari red (Rosso Corsa) used for primary branding and CTAs.
*   Secondary (#F6E500): The traditional yellow accent color used in the Ferrari crest and secondary highlights.
*   Surface (#FFFFFF): Clean white background for maximum readability and luxury presentation.
*   On-surface (#000000): Primary text color for high contrast against white surfaces.
*   Surface-container (inferred) (#F0F0F0): Light gray used for subtle container backgrounds and section dividers.
*   Outline (#FFCC00): Accent border color for interactive elements.
*   Error (#FF5722): Semantic color for validation errors and alerts.
*   On-primary (inferred) (#FFFFFF): White text for use on primary red backgrounds.
*   Focus-ring (inferred) (#000000): High-contrast focus ring for accessibility.
*   Divider (inferred) (#E0E0E0): Subtle divider color for layout separation.

## Typography

The typography uses the proprietary FerrariSans family to maintain a consistent, technical, and authoritative voice across all touchpoints.

*   Display-lg (inferred): Large hero headlines for maximum impact.
*   Display-md (inferred): Secondary hero headlines.
*   Headline-lg: Primary section headers.
*   Headline-md: Card titles and sub-headers.
*   Headline-sm (inferred): Small section titles.
*   Body-md: Standard body copy.
*   Body-sm: Small print and metadata.
*   Label-md (inferred): Button and navigation labels.
*   Label-sm (inferred): Captions and small UI labels.

## Layout

The layout system is built on a high-impact, image-heavy grid that prioritizes visual storytelling. The section order follows a deliberate progression: hero, racing, sports-cars, collections, news, newsletter, and footer. Hero sections utilize a full-bleed image with a centered headline and a single primary CTA. The grid is fully responsive, collapsing modular card-based layouts into single columns on mobile devices, while maintaining generous spacing using the `{spacing.lg}` scale for section margins to ensure visual breathing room.

## Elevation & Depth

Depth is used sparingly to maintain a flat, modern aesthetic, with shadows applied only to lift interactive elements from the background.

*   elevation.sm: Subtle card lift.
*   elevation.md: Standard interactive card shadow.
*   elevation.lg: Modal or drawer overlay depth.

## Shapes

The design language is sharp and precise, mirroring the engineering rigor of the brand. Corners are generally square or feature very small radii to maintain a technical, high-performance look. The `{rounded.md}` token is the standard for cards, while `{rounded.sm}` is reserved for input fields and small UI elements.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-md}` text, designed for high-visibility actions. Secondary buttons use a transparent background with an `{colors.on-surface}` border, suitable for tertiary actions.

### Card
Cards utilize `{colors.surface}` with `{rounded.md}` corners. Elevated cards may use `{elevation.md}` to distinguish them from the background, ensuring content is modular and scannable.

### Input Field
Input fields are defined by a `{colors.surface}` background and `{rounded.sm}` corners. They must show the `{colors.focus-ring}` when active to meet accessibility requirements.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.secondary}` for primary CTAs. |
| Maintain high contrast with `{colors.on-surface}` on `{colors.surface}`. | Never place light text on `{colors.surface}` without contrast. |
| Apply `{rounded.md}` to all standard card components. | Avoid rounded corners larger than `{rounded.lg}` on cards. |
| Use `{typography.headline-lg}` for primary section headers. | Do not mix `{typography.body-md}` with decorative fonts. |
| Ensure all interactive elements have a `{colors.focus-ring}` state. | Do not use excessive drop shadows that conflict with the flat look. |
| Use `{spacing.lg}` for section margins. | Avoid crowding; respect the `{spacing.md}` minimum. |
| Use `{colors.error}` for validation alerts. | Do not use arbitrary colors for error states. |
| Apply `{elevation.md}` to interactive cards. | Do not apply elevation to static background elements. |

## Content Style

CTA labels are imperative and concise, utilizing verbs such as "Discover" or "Read more" to drive immediate user action.

Headings are phrased to be direct, aspirational, and brand-focused, reflecting the high-energy nature of the automotive industry.

The copy density is minimalist, prioritizing high-fidelity imagery and visual storytelling over long-form text to maintain a premium, luxury feel.

## Imagery & Icons

The imagery style is strictly photographic, featuring high-fidelity, professional automotive shots. Images are typically full-bleed or contained within sharp-cornered containers, with dramatic lighting that emphasizes vehicle materials and curves. Defer to the brand's existing asset library for all iconography and photography.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Ferrari, a bold and authoritative luxury sports car brand with a minimal, high-contrast aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.md}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only component variants defined under `components:`. Do not invent new button styles, card shapes, or badge types not listed in the spec.
3. Follow the Layout narrative: hero sections are full-bleed with a centered headline and a single primary CTA; section margins use `{spacing.lg}`; card grids collapse to a single column on mobile.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. using `{colors.secondary}` for a primary CTA), surface the conflict before proceeding.
5. Apply motion tokens `{motion.duration-short}` and `{motion.easing-standard}` to all transitions on interactive elements.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Cover hover, focus, and disabled states for interactive components where the spec defines them — including `{colors.focus-ring}` on all inputs and buttons.
- Use `{rounded.sm}` for inputs and small UI elements; `{rounded.md}` for cards; never exceed `{rounded.lg}` on cards.
- Apply `{elevation.md}` to interactive cards; reserve `{elevation.lg}` for modals and drawers.
- Use imperative, concise CTA copy ("Discover", "Read more") per the Content Style section.

**Must NOT:**
- Introduce colors, font families, radii, or spacing values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Apply `{colors.secondary}` to primary CTAs.
- Add emoji, filler text, or marketing copy beyond what the product team provides.
- Rewrite, replace, or invent page copy, headings, navigation items, or page sections.
- Apply elevation to static background elements.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, consistent with the Layout section's responsive guidance.
- For ambiguous color roles, default to `{colors.surface}` for backgrounds, `{colors.on-surface}` for text, and `{colors.primary}` for the primary action.