acd-cinematic-ferrari-design

name	acd-cinematic-ferrari-design
description	Reference DESIGN.md for performance brands that need to feel theatrical. High-contrast black-and-white frames cut by Rosso Corsa red, sharp 0-radius components, FerrariSans across the entire page, photography that treats the car as sculp. Use when building UI components, applying design tokens, or implementing visual styles for cinematic ferrari.
license	CC-BY-NC-SA-4.0
metadata	{"risk":"unknown","source":"community","kind":"mode","category":"design-systems","tags":["design-system","ui","cinematic","claude-design"]}

Ferrari — Chiaroscuro Rosso Corsa Design Mode

You are an expert in the Ferrari — Chiaroscuro Rosso Corsa aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

Source DESIGN.md

Reference DESIGN.md for performance brands that need to feel theatrical. High-contrast black-and-white frames cut by Rosso Corsa red, sharp 0-radius components, FerrariSans across the entire page, photography that treats the car as sculpture.

1. Visual Theme & Atmosphere

Cinematic chiaroscuro. The page alternates between a deep ink stage and a paper-white gallery, with Rosso Corsa appearing once per section as a single decisive note — a CTA, a rule, a numeral. Photography is high-contrast: car against black sky, paddock light, Maranello tarmac. Every component is a sharp rectangle. Italian editorial discipline meets Formula 1 timing.

Mood: theatrical, decisive, hand-built, fast.

2. Color Palette & Roles

--bg-light:        #ffffff
--bg-dark:         #000000   /* full-bleed dark slabs, hero */
--bg-alt:          #f4f4f4   /* spec rail, paddock light */
--text-on-light:   #000000
--text-on-dark:    #ffffff
--text-muted:      #6a6a6a
--accent:          #eb2323   /* Rosso Corsa, primary CTA + rule */
--accent-hover:    #c81a1a
--accent-bright:   #ff0000   /* link, focus, livery moments */
--support-yellow:  #f6e500   /* Modena yellow, race-livery accent only */
--border:          #1a1a1a
--rule:            #eb2323

Rule: red appears once per visual frame. Never two reds touching. Yellow is reserved for racing-content slabs and never sits in the same hero as a CTA.

3. Typography Rules

• Display + headings: FerrariSans, fallback Helvetica, Arial, sans-serif. Weight 700 for nameplates, weight 500 for editorial heads. Tracked −1% above 48px.
• Body + UI: FerrariSans regular, 13–16px body, 1.5 line-height.
• Numerals (lap times, displacement, top speed): tabular, weight 700, oversized — 64–140px.
• Labels: uppercase, tracked 10%, 11–12px.

Scale: 11 / 13 / 16 / 20 / 26 / 36 / 56 / 88 / 140.

Single typeface. The contrast is black/white/red — not type families.

4. Component Stylings

Buttons

• Primary: --accent fill, white text, radius 0, padding 14/28, weight 700, uppercase, tracked 6%.
• Secondary on light: transparent, 1px ink border, ink text, sharp rectangle.
• Ghost on dark: transparent, 1px white border, white text.
• Hover: fill shifts to --accent-hover instantly. No transition softening.

Cards / model tiles

• No card chrome on hero. Full-bleed photo on --bg-dark with overlaid label bottom-left.
• Spec cards on light: white surface, 1px --border hairline above and below only — no left/right border. Radius 0.

Inputs

• Sharp rectangle, 1px ink border, 12/16 padding, radius 0. Focus: 2px --accent outline, no offset.

Nav

• Fixed top, transparent over hero, snaps to ink fill on scroll. White wordmark, uppercase nav links, red active underline 2px.

Hero

• Full-bleed dark slab, vehicle photo right-aligned 60% width, headline left in white at 88–140px, single --accent CTA below.

5. Layout Principles

• 1320px max content, full-bleed photo plates, 24px gutter, 12 column.
• 8px base. 8 / 16 / 24 / 32 / 48 / 80 / 120 / 160.
• Alternate dark hero → white spec → dark dyno-numerals → white configurator.
• Asymmetric splits (60/40 photo + numeral block) over symmetric grids.

6. Depth & Elevation

Flat, theatrical. Depth from contrast, not shadow. Allowed: 1px hairline above/below spec rows. Forbidden: drop shadows on cards, glow effects, beveled edges, layered translucency.

7. Do's and Don'ts

Do

• Use one Rosso Corsa moment per visual frame: CTA, rule, or oversized numeral.
• Oversize lap times and displacement numerals to 88–140px.
• Alternate dark and light slabs aggressively — chiaroscuro is the brand.
• Keep every corner at radius 0.

Don't

• Pair red and yellow in the same hero. Yellow is racing-only.
• Round any corner. No pill buttons, ever.
• Add drop shadows, glows, or backdrop blur.
• Mix in a second typeface — FerrariSans does everything.
• Use lifestyle stock photography. The car is the subject, always.

8. Responsive Behavior

• Hero headline scales 140 → 48 on mobile, retains weight 500.
• Vehicle photo stacks above headline below 768px; dark slab retains full bleed.
• Nav collapses to ink hamburger; uppercase links stay tracked.
• Oversized numerals scale 140 → 64 but never thin out — weight 700 holds.

9. Agent Prompt Guide

Bias: alternating black/white full-bleed slabs, FerrariSans single-family typography, oversized lap-time numerals (88–140px), Rosso Corsa #eb2323 used once per frame as CTA or rule, sharp 0-radius components, uppercase tracked nav.

Reject: rounded corners, drop shadows, multi-typeface mixing, red and yellow in the same hero, pastel palettes, lifestyle stock photography, gradient buttons, glassmorphism, sidebar-heavy layouts.

When to Use This Mode

• When user references ferrari or the cinematic family as inspiration
• When building UI in the cinematic aesthetic
• When applying this brand's color palette, typography, or layout patterns
• When critiquing UI for adherence to this aesthetic