Acd Cinematic Renault Design

---
name: acd-cinematic-renault-design
description: Reference DESIGN.md for European mobility brands that need to feel modern and warm at once. Paper-white canvas with full-bleed aurora gradients (yellow → magenta → cyan), the diamond logomark as primary geometric anchor, NouvelR across t. Use when building UI components, applying design tokens, or implementing visual styles for cinematic renault.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, cinematic, claude-design]
---

# Renault — Aurora Pop Geometric Design Mode

You are an expert in the Renault — Aurora Pop Geometric 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 European mobility brands that need to feel modern and warm at once. Paper-white canvas with full-bleed aurora gradients (yellow → magenta → cyan), the diamond logomark as primary geometric anchor, NouvelR across the page, restrained 4px corner softening on inputs only.

## 1. Visual Theme & Atmosphere

Aurora pop. The page is mostly paper, then drops into full-bleed aurora panels — yellow easing into magenta into cyan — that echo the Renault diamond logomark. NouvelR carries every word; geometry leans into the diamond shape on dividers and section anchors. Vehicle photography is sun-lit, color-rich, never moody.

Mood: optimistic, European, current, electric.

## 2. Color Palette & Roles

```
--bg:              #ffffff
--bg-alt:          #f4f4f4
--surface:         #ffffff
--ink:             #000000
--ink-muted:       #5a5a5a
--ink-dim:         #9a9a9a
--accent-yellow:   #efdf00   /* primary brand mark, CTA fill */
--accent-red:      #e91630   /* secondary CTA, inline link */
--accent-red-hover: #c41229
--accent-blue:     #1885d1   /* tertiary, electric-vehicle slabs */
--gradient-aurora: linear-gradient(120deg, #efdf00 0%, #ff6b9d 45%, #1885d1 100%)
--gradient-soft:   linear-gradient(180deg, rgba(232, 22, 48, 0.08) 0%, transparent 100%)
--border:          #d9d9d6
--rule:            #000000
```

Rule: the aurora gradient is the identity moment — used on hero backdrop and one large text fill per page. Buttons stay flat yellow or flat red, never gradient.

## 3. Typography Rules

- **Display + headings:** `NouvelR`, fallback `sans-serif`. Weight 700 for hero, weight 500 for editorial heads. Tracked −1% above 40px.
- **Body + UI:** NouvelR regular, 16–18px body, 1.55 line-height.
- **Labels + spec rows:** uppercase, tracked 8%, 12px, ink-muted.
- **Numerals (range, kWh, 0-100):** tabular, weight 700, paired with small unit labels.

Scale: 12 / 14 / 16 / 20 / 28 / 40 / 56 / 80 / 120.

Single typeface for the whole site. NouvelR carries the brand alone — never pair with a serif or grotesque sibling.

## 4. Component Stylings

**Buttons**
- Primary: `--accent-yellow` fill, ink text, radius 4px, padding 12/24, weight 700.
- Secondary: `--accent-red` fill, white text, radius 4px.
- Ghost: transparent, 1px ink border, ink text, radius 4px.
- Hover: 8% darken on yellow, `--accent-red-hover` on red. No scale, no glow.

**Cards / model tiles**
- White surface, 1px `--border`, radius 4px. Photo top, model name in NouvelR 28px, range/price strip below.
- Hover: border shifts to `--accent-red`. No shadow lift.

**Inputs**
- White fill, 1px `--border`, radius 4px, 10/14 padding. Focus: 2px `--accent-blue` ring, no offset.

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

**Hero gradient panel**
- Full-bleed `--gradient-aurora` slab, 60–80vh tall.
- Headline overlaid in white at 80–120px, weight 700, tight tracking.
- Yellow primary CTA bottom-left, ink text on the gradient.

**Diamond motif**
- Used as section anchor: a single outline diamond, 24–48px, ink-stroke 2px, sitting at the start of editorial sections. Never as repeating pattern.

## 5. Layout Principles

- 1320px max, 24px gutter, 12 column.
- 4px base. 4 / 8 / 16 / 24 / 32 / 48 / 80 / 120.
- Alternate paper-white slab → full-bleed aurora hero → spec slab → blue EV slab.
- Section breaks at 96–120px on desktop.
- Asymmetric column splits (60/40 photo + spec) over symmetric grids.

## 6. Depth & Elevation

Atmospheric, soft. Depth from gradient saturation and tonal step between white and `--bg-alt`. Allowed: 1px borders, 2px keyline rules, soft `--gradient-soft` wash behind featured cards. Forbidden: drop shadows on cards, glow effects, backdrop blur on nav.

## 7. Do's and Don'ts

**Do**
- Deploy the aurora gradient on hero backdrop once per page, plus one large text fill maximum.
- Keep buttons flat: yellow primary, red secondary, ghost tertiary. Never gradient buttons.
- Use the diamond motif as a single section anchor, not a repeating wallpaper.
- Hold to 4px radius across the system — softer than Ferrari, sharper than Cal.com.

**Don't**
- Apply the aurora gradient to buttons, links, or body type.
- Pair yellow and red in the same component — alternate by section.
- Add drop shadows, glows, or backdrop-blur nav.
- Mix in a serif or condensed grotesque — NouvelR carries the page.
- Use the diamond as a repeating tile background.

## 8. Responsive Behavior

- Hero headline scales 120 → 40 on mobile, retains weight 700.
- Aurora gradient backdrop retains full bleed; CTA stacks below headline.
- Nav collapses to ink hamburger on white below 1024px; diamond logomark stays.
- 12-column grid reflows to single column below 768px; 64px section rhythm.

## 9. Agent Prompt Guide

Bias: paper-white canvas, full-bleed aurora gradient (yellow → magenta → cyan) on hero, single NouvelR typeface, flat yellow primary + flat red secondary CTAs, 4px radii, diamond motif as section anchor, alternating white / aurora / blue-EV slabs, sun-lit color-rich vehicle photography.

Reject: dark-mode default, gradient-filled buttons or text links, multi-typeface mixing, repeating diamond wallpaper, drop shadows on cards, backdrop-blur nav, moody automotive lighting, pill buttons, glassmorphism, replacing NouvelR with Inter or a serif.

## When to Use This Mode

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