# Aurora French Modernism

## Overview
French premium/automotive web modernism built around one signature move: a yellow→cyan→pink aurora mesh gradient that fills entire section backgrounds edge-to-edge. On top of that living color field, everything else is disciplined and rectangular — zero-radius buttons and cards, big geometric heavy display type, single-ink text, 1px ink hairlines instead of shadows. Sections alternate between plain white and flowing gradient for a vibrant rhythm. Motion is snappy (150–200ms); the only slow thing is the gradient itself, drifting almost imperceptibly.

## Colors & Roles
Bright white canvas, near-black ink (`foreground` oklch 0.166, hue ~285) for all text. The aurora is three brand colors carried in `chart-1` (yellow), `chart-2` (cyan), `chart-3` (pink) — these are the gradient's only sources; never invent stops. The single semantic `accent` maps to the pink. `primary` is ink (solid ink buttons with white text). `border`, `input`, and `ring` are all ink — the pack divides with 1px solid ink, not shadow. Neutral `secondary`/`muted` and `muted-foreground` are derived on the ink hue (the pack specified only white surfaces). Text stays single-ink even over the gradient (≈17:1 on white); lay a faint white surface behind text where a bright stop threatens contrast.

## Typography Rules
Display is a big geometric heavy sans — Clash Display 600, `clamp(2.6rem, 5.5vw, 5rem)`, line-height 1.04, tracking −0.02em. Body is Inter 400 at 1.05rem / line-height 1.6, measure 58–68 chars. Kickers are Inter 600, 0.78rem, uppercase, 0.1em tracking — they label sections. Button labels Inter 600 0.92rem. Clash Display and Inter are Fontshare/Google fonts; the Google-Fonts fallback for display is Space Grotesk.

## Layout Principles
Content max 1240px on a 24px gutter, side padding 24px mobile / 56px desktop. Sections are full-bleed — the aurora gradient runs edge-to-edge while content aligns inside content_max. Vertical rhythm `clamp(80px, 9vw, 120px)`. Alternate white and gradient sections. Every section must feel complete: content plus a gradient field or a rectangular image/card. No lonely floating fragments — everything snaps to the content_max column edges.

## Depth & Elevation
No shadows, no glass, no noise. Depth comes from the contrast of the rich aurora field against crisp white cards, plus 1px ink hairlines. Card hover offsets `translate(-3px, -3px)` and leaves a 1px ink square outline in its former place — a flat, blur-free depth cue.

## Shapes
Zero border-radius everywhere — buttons, cards, images, icons. Sharp rectangles are the identity. Icons are 1.75px-stroke geometric line marks with square corners; no rounded icons or emoji.

## The Aurora Gradient (signature)
Build the mesh from 3–4 stacked `radial-gradient` layers over the bright background, one per aurora color:
`radial-gradient(60% 80% at 12% 18%, var(--chart-1) 0%, transparent 60%)`, `radial-gradient(55% 75% at 82% 22%, var(--chart-2) 0%, transparent 62%)`, `radial-gradient(70% 85% at 55% 88%, var(--chart-3) 0%, transparent 65%)`. Drift it with `background-position` over ~20s linear infinite (stopped under `prefers-reduced-motion`). It is a section-background field, never a small dot and never applied to text.

## Component Stylings
- **Button**: radius 0, solid ink fill + white text, padding 13px 30px, Inter 600. Hover inverts solid↔outline over 170ms. Secondary = 1px solid ink outline, transparent fill.
- **Card**: white rectangular card, 1px solid ink border (or borderless white on a gradient section), 32px padding, radius 0. Hover `translate(-3px,-3px)` + 1px ink square offset.
- **Nav**: 64px tall, transparent over the aurora hero or white. Wordmark left, uppercase kicker links + solid ink CTA right. Menu hover = instant 1px ink square underline.
- **Input**: 1px solid ink border, radius 0, ring on focus.

## Motion
Snappy: `170ms cubic-bezier(0.3, 0, 0.2, 1)`. Buttons invert decisively; cards snap-offset on hover; scroll-in is opacity 0→1 + translateY(12px→0) at 180ms. Only the aurora background drifts slowly (20s). No bounce, no interaction longer than ~300ms.

## Do's and Don'ts
**Do:** fill whole section backgrounds with the aurora mesh (3–4 radial layers); keep every corner square; alternate white and gradient sections; keep text single-ink; make interactions snappy.
**Don't:** use any border-radius > 0; shrink the gradient to a dot or apply it to text; use gradient text; use a purple mono-gradient; use shadows, glass, or emoji; leave flat dead white voids; use slow flowing interactions.

## Responsive Behavior
Breakpoints 768px / 1120px. The gradient stays full-bleed; content collapses to a single column with 24px side padding. Display type scales via `clamp()`. Mobile nav is a square hamburger opening a full-screen aurora overlay.

## Agent Prompt Guide
> Build this in the 'Aurora French Modernism' style: full-bleed section backgrounds filled edge-to-edge with a flowing yellow→cyan→pink aurora mesh gradient (3–4 stacked radial-gradient layers using chart-1/chart-2/chart-3, slow background-position drift), alternating white and gradient sections. Everything zero-radius and rectangular. Big geometric heavy display type with uppercase tracked kicker labels, single-ink text even over the gradient, 1px solid ink borders instead of shadows, card hover = translate(-3px,-3px) with a 1px ink square offset, snappy 170ms interactions.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-aurora-french-modernism` (authored spec, Renault-inspired but carrying no logo or proprietary NouvelR font). All tokens are `manual` confidence. Aurora stops are the pack's own hex values converted to OKLCH; neutrals and the destructive red are derived and declared in `colors.notes`. Canonical mode is light; dark is authored faithfully by inverting to an ink ground while keeping the aurora vivid. Display font is commercial Clash Display — Space Grotesk is the practical Google-Fonts fallback.