Acd Cinematic Bmw Design

---
name: acd-cinematic-bmw-design
description: Reference DESIGN.md for luxury automotive editorial that needs to feel engineered. White slabs, full-bleed performance photography, BMW corporate blue rising into a deeper blue at active states, restrained Helvetica-grade typography. Use when building UI components, applying design tokens, or implementing visual styles for cinematic bmw.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, cinematic, claude-design]
---

# BMW — Editorial Performance Blue Design Mode

You are an expert in the BMW — Editorial Performance Blue 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 luxury automotive editorial that needs to feel engineered. White slabs, full-bleed performance photography, BMW corporate blue rising into a deeper blue at active states, restrained Helvetica-grade typography.

## 1. Visual Theme & Atmosphere

Editorial automotive. The page is a magazine: oversized photo plates of the car, clean white margins, narrow blue keyline rules. Headlines are short and committed. Blue is the only chromatic note — every other surface is paper-white or near-black. Reads like a Munich brochure that learned to scroll.

Mood: precise, premium, engineered, quietly confident.

## 2. Color Palette & Roles

```
--bg:              #ffffff
--bg-alt:          #f6f6f6   /* spec sheet, secondary slab */
--surface:         #ffffff
--ink:             #262626   /* body text, headlines on light */
--ink-muted:       #6b6b6b
--ink-dim:         #a8a8a8
--bg-inverse:      #111111   /* M Performance dark slab */
--text-on-dark:    #ffffff
--accent:          #1c69d4   /* BMW corporate blue, primary CTA */
--accent-hover:    #0653b6   /* deeper marine on hover, focus, link */
--m-gradient:      linear-gradient(90deg, #2e9bd6 0%, #1c69d4 50%, #0653b6 100%)
--border:          #e5e5e5
--rule:            #1c69d4
```

One blue, one neutral pair. The M-style gradient is reserved for performance moments — never on body or buttons.

## 3. Typography Rules

- **Display + headings:** `BMW Type Next Web`, fallback `Helvetica Neue`, `Helvetica`, `Arial`, `sans-serif`. Weight 400 for editorial, 700 for vehicle nameplates. Tight tracking at 48px+.
- **Body + UI:** same stack, weight 400, 16–18px, 1.5 line-height.
- **Labels + spec rows:** uppercase, tracked 8%, 12–13px, ink-muted.

Scale: 12 / 14 / 16 / 20 / 28 / 36 / 48 / 64 / 96. Restraint is the point — brochures don't shout.

## 4. Component Stylings

**Buttons**
- Primary: `--accent` fill, white text, radius 3px, padding 12/24, weight 500.
- Secondary: transparent, 1px ink border, ink text, 3px radius.
- Hover: fill shifts to `--accent-hover`. No scale, no glow.

**Cards / vehicle tiles**
- White surface, 1px `--border`, radius 3px. Photo top, two-line title, one-line spec, blue inline link.
- Hover: border shifts to `--accent`. Shadow stays off.

**Inputs**
- White fill, 1px border, 3px radius. Focus: 2px `--accent` ring, no offset.

**Nav**
- Fixed top, white fill, 1px bottom border. Logo left, model groups center, account/build right. Active link gets a 2px `--accent` underline.

**Hero photo plate**
- Full-bleed vehicle photograph, 70–90vh. Headline overlaid bottom-left in white, 64–96px. CTA below in primary blue.

## 5. Layout Principles

- 1440px max, 24px gutter, 12 column.
- 8px base. 8 / 16 / 24 / 32 / 48 / 80 / 120.
- Alternate full-bleed hero, white spec slab, `--bg-alt` comparison slab.
- Section breaks at 96–120px on desktop. Whitespace flanks the photograph; never crop the car.

## 6. Depth & Elevation

Almost flat. Depth comes from photographic contrast, not chrome. Allowed: 1px `--border` on cards, 2px `--accent` keyline at section breaks. Shadows reserved for floating spec sheets only — `0 8px 24px rgba(0, 0, 0, 0.08)`. No glows, no neumorphism.

## 7. Do's and Don'ts

**Do**
- Lead with full-bleed vehicle photography at the fold.
- Hold to one blue. Use the M-gradient once, on a single performance moment.
- Pair short editorial headlines with tracked uppercase labels for specs.
- Keep buttons binary: blue primary or ghost. Sharp 3px corners only.

**Don't**
- Apply the M-gradient to buttons, links, or body type.
- Add a second accent color (red, gold, green) — that's a competitor brand.
- Round corners past 4px or pill anything — automotive is engineered, not playful.
- Drop the photograph for stock illustration or hero CGI.
- Use heavy shadows or backdrop blur on nav.

## 8. Responsive Behavior

- Hero headline scales 96 → 36 on mobile, retains weight 400.
- Vehicle photo retains full bleed; CTA stacks below headline.
- Nav collapses to white hamburger below 1024px; model groups fold into a single sheet.
- 12-column grid reflows to single column below 768px; 64px section rhythm.

## 9. Agent Prompt Guide

Bias: paper-white canvas, full-bleed automotive photography, BMW Type Next Web headlines, single corporate blue (`#1c69d4`) on CTAs, sharp 3px radii, tracked uppercase spec labels, restrained editorial rhythm, M-gradient used once per page maximum.

Reject: dark-mode default, multi-color accents, pill buttons, drop shadows on hero plates, gradient-filled body type, stock illustration replacing the vehicle photo, glassmorphism, oversized rounded corners.

## When to Use This Mode

- When user references **bmw** 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