ferrari___style_reference:
  info: "> Monochrome gallery under spotlights — a completely achromatic interface that lets the cars carry all color through photography."

  theme: "mixed"

  info: "Ferrari's digital presence is a monochrome gallery under spotlights — a completely achromatic interface where the cars carry all color through photography, and the UI itself stays disciplined in pure black, white, and grayscale. Layouts are editorial: full-bleed dark cinematic heroes with centered all-caps titles, alternating into white content sections with generous breathing room and a rigid text-left/image-right rhythm. The visual language is restrained and confident — thin circular arrow CTAs, wide-tracked uppercase navigation, hairline borders, zero chromatic accents, and zero decorative gradients. Every surface decision defers to the photograph: the interface must never compete with the car."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, light section backgrounds, card surfaces, text on dark backgrounds |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Full-bleed dark hero and feature sections, deep navigation bar, primary text on light backgrounds |"
    info: "| Carbon Black | `#181818` | `--color-carbon-black` | Secondary dark surfaces, dark cards, footer backgrounds — sits one step lifted from pure black |"
    info: "| Graphite | `#303030` | `--color-graphite` | Elevated dark surfaces, dark borders, subtle dark-mode structure — one step lighter than Carbon |"
    info: "| Steel Gray | `#8f8f8f` | `--color-steel-gray` | Muted helper text, secondary icon strokes, subdued metadata on both light and dark surfaces |"

  tokens___typography:

    body_font___body_font___detected_in_extracted_data_but_not_described_by_ai____font_body_font:
      - "**Weights:** 400"
      - "**Sizes:** 9px, 11px, 12px, 13px"
      - "**Line height:** 1.27, 1.5, 1.78, 2"
      - "**Letter spacing:** 0.015, 0.022, 0.028, 0.083, 0.091"
      - "**Role:** Body-Font — detected in extracted data but not described by AI"

    ferrari_custom_sans_serif___single_weight_400_typeface_used_for_everything___navigation__headlines__body__labels__all_caps_headlines_and_nav_with_aggressive_positive_tracking_0_083_0_091em_is_the_signature_move__body_copy_uses_near_zero_or_slightly_positive_tracking_0_015_0_028em__absence_of_bold_light_weights_is_a_deliberate_editorial_choice__hierarchy_is_created_by_size_and_tracking__never_weight_contrast_____font_ferrari_custom_sans_serif:
      - "**Substitute:** Inter, Helvetica Neue, or Neue Haas Grotesk — pick something with clean geometric forms and even weight distribution at 400"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.27–2.00"
      - "**Letter spacing:** 0.0150em to 0.0910em — widest on small uppercase nav/label text (0.083–0.091em), tight on body copy"
      - "**Role:** Single weight 400 typeface used for everything — navigation, headlines, body, labels. All-caps headlines and nav with aggressive positive tracking (0.083–0.091em) is the signature move; body copy uses near-zero or slightly positive tracking (0.015–0.028em). Absence of bold/light weights is a deliberate editorial choice: hierarchy is created by size and tracking, never weight contrast."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.78 | — | `--text-caption` |"
      info: "| body-sm | 12px | 1.78 | — | `--text-body-sm` |"
      info: "| body | 13px | 1.78 | — | `--text-body` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 54 | 54px | `--spacing-54` |"
      info: "| 55 | 55px | `--spacing-55` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 123 | 123px | `--spacing-123` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px — sharp corners, no rounding on images or content cards |"
      info: "| images | 0px — full-bleed photography with no corner softening |"
      info: "| inputs | 0px |"
      info: "| buttons | 9999px — perfectly circular pill/button treatment |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80-120px"
      - "**Element gap:** 10-16px"

  components:

    dark_cinematic_hero:
      role: "Full-bleed opening section — establishes brand mood through photography"

      background: "#000000. Car photograph fills the viewport edge-to-edge with no border or radius. Small uppercase label (Racing) at ~11px, #ffffff, letter-spacing 0.091em, positioned above the headline. Display headline (SCUDERIA FERRARI) at ~32-42px, weight 400, #ffffff, all caps, letter-spacing ~0.05em, centered. Below headline: ghost text link with circular arrow button. No padding — content sits over the photograph with no container or surface treatment."

    navigation_bar:
      role: "Primary site navigation"

      background: "#181818. Height ~60px. Ferrari prancing horse logo at far left. Nav items: RACING, SPORTS CARS, COLECCIONES, EXPERIENCIAS, ABOUT US — all at ~11px, weight 400, #ffffff, uppercase, letter-spacing 0.091em, wide spacing between items. No dropdowns, no backgrounds, no borders — text floats on the dark bar."

    circular_arrow_cta:
      role: "Primary and secondary call-to-action button"

      border: "1px solid #ffffff, fully circular (border-radius: 9999px). Diameter ~40px. Contains a thin right-pointing arrow icon centered inside. No background fill — ghost/outlined style. Paired with uppercase text link (DESCUBRIR, LEER MÁS) in #ffffff or #000000 at ~11px, letter-spacing 0.091em, positioned to the left of the circle. The text and circle are horizontally aligned, baseline-matched."

    light_content_section:
      role: "Article or news content block on white canvas"

      background: "#ffffff. Split layout: left column ~45% with text, right column ~55% with photograph. Heading in all caps, weight 400, ~24-32px, #000000, tight letter-spacing. Body text at ~13px, weight 400, #181818, generous line-height 2.0. Photo on right: edge-to-edge, no radius, no border, no shadow. Vertical centering of text with image. Section padding: ~80-100px top and bottom."

    text_only_ghost_link:
      role: "Secondary navigation or inline action"

      info: "No background, no border, no underline. Uppercase text at ~11-12px, #000000 or #181818, letter-spacing 0.083-0.091em. May be paired with circular arrow CTA. Used for VER TODAS LAS NOTICIAS, LEER MÁS, DESCUBRIR actions."

    carousel_pagination_dots:
      role: "Slide position indicator"

      info: "Horizontal row of small circular dots (~8px diameter). Active dot: filled #d40000 or #000000 (ferrari red may appear here as the sole chromatic exception). Inactive dots: hollow or low-opacity #8f8f8f. Dots spaced ~10px apart, centered below the content. No numbers, no progress bar."

    full_bleed_editorial_image:
      role: "Photographic content showcase"

      info: "Edge-to-edge placement with 0px border-radius. No shadow, no border, no caption overlay. Images are always dark, atmospheric, and high-contrast — photographed in studio or cinematic environments. The image is the surface; the interface provides no frame."

    two_column_split_section:
      role: "Standard content layout pairing text and image"

      50_50_or_45_55_split__left: "text block with headline + body + CTA, right: photograph. Generous gutter of ~40-60px between columns. On mobile, stacks vertically with image below text. No background color change between sections — flow is seamless white-to-white, with rhythm created by spacing alone."

    footer_navigation_block:
      role: "Site-wide links and legal information"

      background: "#181818 or #000000. Link text at ~9-11px, #ffffff or #8f8f8f, uppercase, wide letter-spacing 0.091em. Links arranged in columns or horizontal groups. Hairline 1px border-top in #303030 to separate from content. Social/legal text at 9px caption scale."

    slide_navigation_arrows:
      role: "Carousel left/right controls"

      info: "Minimal chevron arrows (‹ ›) positioned at vertical center on left and right edges of the carousel area. No background, no button shape. Color: #000000 on light sections, #ffffff on dark sections. ~20px size, thin stroke. Invisible until hover."

  do_s_and_don_ts:

    do:
      - "Use only achromatic colors — black, white, and grayscale — throughout the entire interface. Let photography supply all chromatic energy."
      - "Set all navigation, labels, and headlines in ALL CAPS with letter-spacing between 0.083em and 0.091em — this wide tracking is the primary signature of the system."
      - "Use a single typeface at weight 400. Create hierarchy through size and tracking alone, never through bold/light weight contrast."
      - "Use circular (9999px radius) outlined arrow buttons for all CTAs — a 1px border circle with a thin arrow icon inside, never filled rectangles."
      - "Let images bleed to edges with 0px border-radius. No frames, no shadows, no rounded corners on photographs."
      - "Maintain generous vertical rhythm: 80-120px between sections, 10-16px between related elements, 15-20px horizontal padding in text blocks."
      - "Use #000000 for full-bleed dark stages and #181818 for dark surface layers one step back — create depth through grayscale, not shadow."

    don_t:
      - "Never introduce chromatic UI colors — no red buttons, no blue links, no colored badges. The system is intentionally 0% colorful."
      - "Never use bold or semibold weights. Weight 400 is the only weight in the system; hierarchy comes from size."
      - "Never add border-radius to images, cards, or content surfaces. All edges are sharp 0px corners."
      - "Never use filled rectangular buttons. All CTAs are ghost circular arrow buttons or plain text links."
      - "Never add drop shadows or box-shadows. Depth is communicated through grayscale layering, never elevation effects."
      - "Never use decorative gradients. The system is flat — no color transitions, no glows, no blur effects."
      - "Never crowd the layout. Ferrari's luxury signal is breathing room — if a section feels dense, add 30% more space."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas White | `#ffffff` | Dominant page background for content sections |"
    info: "| 1 | Pure Black Stage | `#000000` | Full-bleed cinematic hero and feature sections — car photography lives here |"
    info: "| 2 | Carbon Surface | `#181818` | Navigation bar, dark cards, footer depth |"
    info: "| 3 | Graphite Surface | `#303030` | Elevated dark elements, subtle structure within dark sections |"

  elevation:

    info: "The system intentionally avoids drop shadows and box-shadows entirely. Depth is communicated through grayscale surface layering: #000000 (deepest) → #181818 (dark surface) → #303030 (elevated dark) → #ffffff (light canvas). This flat approach keeps all attention on the photography and reinforces the editorial gallery feel — shadows would feel decorative rather than structural in this system."

  imagery:

    info: "Photography is the entire visual brand. Images are always dark, high-contrast, cinematic — cars photographed in studios, tunnels, racetracks, and atmospheric environments with dramatic lighting. Treatment: full-bleed, edge-to-edge, 0px border-radius, no frames, no overlays, no duotones. No lifestyle or human photography dominates — the car IS the subject. No illustrations, no icons beyond minimal thin-stroke navigation arrows, no 3D renders, no product mockups. Images carry 80%+ of the visual weight on most pages; text is secondary, supporting the photograph rather than competing with it."

  layout:

    info: "Full-bleed page model with no visible max-width container on hero sections — they span edge to edge. Content sections use a max-width of ~1280px centered. The first screen is always a dark cinematic hero: full-viewport car photograph with centered small label → large all-caps headline → ghost arrow CTA. Subsequent sections alternate: white content blocks with text-left/image-right splits at 45/55 ratio, separated by generous 80-120px vertical gaps. Carousels use the full width with edge-positioned chevron arrows and centered dot pagination. Navigation is a single dark bar (60px) with the prancing horse logo left and uppercase text links spread across. The rhythm is deliberately slow and editorial — two or three sections per scroll, never information-dense."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 on light sections, #ffffff on dark sections"
    - "Background: #ffffff (light sections), #000000 (dark heroes), #181818 (dark surfaces)"
    - "Border: #303030 on dark, #000000 on light"
    - "Muted text/icons: #8f8f8f"
    - "Accent: none — system is fully achromatic"
    - "primary action: no distinct CTA color"

  3_5_example_component_prompts:

    - "**Dark Hero Section**: Full-bleed #000000 background with a high-contrast car photograph filling the viewport. Small uppercase label 'Racing' at 11px, weight 400, #ffffff, letter-spacing 1px. Display headline 'SCUDERIA FERRARI' at 42px, weight 400, #ffffff, all caps, letter-spacing 2px, centered. Below: ghost text link 'DESCUBRIR' at 11px, #ffffff, letter-spacing 1px, paired with a 40px circular outlined button (1px solid #ffffff, border-radius 9999px) containing a right-arrow icon."

    - "**Navigation Bar**: 60px height, #181818 background. Ferrari prancing horse logo at 24px on the far left. Nav items (RACING, SPORTS CARS, COLECCIONES) at 11px, weight 400, #ffffff, all caps, letter-spacing 1px, spaced 30px apart. No backgrounds, no borders, no dropdowns."

    - "**News Content Block**: White (#ffffff) background, 1280px max-width centered. Two-column split: left 45% text, right 55% image. Heading 'FERRARI AT IMOLA' at 28px, weight 400, #000000, all caps, letter-spacing 1.5px. Body text at 13px, weight 400, #181818, line-height 2.0. Right column: full-bleed dark photograph, 0px border-radius, no border or shadow. Below text: 'LEER MÁS' ghost link at 11px with 36px circular arrow button (1px solid #000000)."

    - "**Carousel Pagination**: Three small dots (8px diameter) centered horizontally. Active dot: filled #000000. Inactive dots: #8f8f8f fill. 10px gap between dots. No numbers, no progress bar."

    - "**Footer Block**: #181818 background, full-width. Links in columns at 9px, weight 400, #ffffff, all caps, letter-spacing 0.8px. 1px top border in #303030. Social icons as thin-stroke line icons in #8f8f8f."

  similar_brands:

    - "**Aston Martin** — Same editorial luxury car website approach — full-bleed dark cinematic heroes, all-caps navigation, ghost outlined controls, monochromatic UI letting car photography dominate"
    - "**Porsche** — Shared minimal monochrome interface language with generous whitespace, uppercase tracked navigation, and photography-first content blocks"
    - "**Lamborghini** — Dark hero + white content section pattern, sharp-cornered full-bleed photography, restrained color palette that defers to the vehicle's own color"
    - "**Bang & Olufsen** — Luxury brand that strips its interface to pure black and white with zero chromatic accents, using product photography as the sole visual color source"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-pure-black: #000000;
          --color-carbon-black: #181818;
          --color-graphite: #303030;
          --color-steel-gray: #8f8f8f;
        
          /* Typography — Font Families */
          --font-body-font: 'Body-Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ferrari-custom-sans-serif: 'Ferrari custom sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.78;
          --text-body-sm: 12px;
          --leading-body-sm: 1.78;
          --text-body: 13px;
          --leading-body: 1.78;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-44: 44px;
          --spacing-50: 50px;
          --spacing-54: 54px;
          --spacing-55: 55px;
          --spacing-60: 60px;
          --spacing-123: 123px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80-120px;
          --element-gap: 10-16px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px — sharp corners, no rounding on images or content cards;
          --radius-images: 0px — full-bleed photography with no corner softening;
          --radius-inputs: 0px;
          --radius-buttons: 9999px — perfectly circular pill/button treatment;
        
          /* Surfaces */
          --surface-canvas-white: #ffffff;
          --surface-pure-black-stage: #000000;
          --surface-carbon-surface: #181818;
          --surface-graphite-surface: #303030;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-pure-black: #000000;
          --color-carbon-black: #181818;
          --color-graphite: #303030;
          --color-steel-gray: #8f8f8f;
        
          /* Typography */
          --font-body-font: 'Body-Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ferrari-custom-sans-serif: 'Ferrari custom sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.78;
          --text-body-sm: 12px;
          --leading-body-sm: 1.78;
          --text-body: 13px;
          --leading-body: 1.78;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-44: 44px;
          --spacing-50: 50px;
          --spacing-54: 54px;
          --spacing-55: 55px;
          --spacing-60: 60px;
          --spacing-123: 123px;
        }