# Aurora French Modernism
노랑→시안→핑크 오로라 메시 그라디언트가 섹션 배경 면을 가득 채우고, 버튼·카드는 반경 0의 직각, 큰 지오메트릭 산세리프와 스냅 모션이 얹힌 프랑스 모더니즘 웹 스타일.
- taxonomy: french-modernism · aurora-gradient, zero-radius, big-type, geometric-sans, full-bleed, snappy-motion · complexity=medium
- page types: landing, marketing, portfolio
- best for: 브랜드 랜딩·제품 소개 페이지, 활기찬 프리미엄 마케팅 사이트, 히어로가 주인공인 풀블리드 레이아웃
- avoid for: 데이터 밀도 높은 대시보드, 차분한 장문 독서형 콘텐츠, 둥근·부드러운 무드의 소비자 앱
- provenance: authored (design-diversity 팩 'web-aurora-french-modernism' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Aurora French Modernism — theme.css (generated, do not edit) */
:root {
--radius: 0px;
--radius-selector: 0px;
--radius-field: 0px;
--font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
--font-display: 'Clash Display', 'Arial Black', Helvetica, sans-serif;
--spacing: 8px;
--shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.166 0.008 285.5) 0%, transparent);
--ks-display-weight: 600;
--ks-display-tracking: -0.02em;
--background: oklch(1 0 0);
--foreground: oklch(0.166 0.008 285.5);
--card: oklch(1 0 0);
--card-foreground: oklch(0.166 0.008 285.5);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.166 0.008 285.5);
--primary: oklch(0.166 0.008 285.5);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.968 0.003 286.3);
--secondary-foreground: oklch(0.166 0.008 285.5);
--muted: oklch(0.968 0.003 286.3);
--muted-foreground: oklch(0.530 0.011 286.0);
--accent: oklch(0.709 0.210 354.8);
--accent-foreground: oklch(0.166 0.008 285.5);
--destructive: oklch(0.577 0.245 27.3);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.166 0.008 285.5);
--input: oklch(0.166 0.008 285.5);
--ring: oklch(0.166 0.008 285.5);
--chart-1: oklch(0.909 0.163 97.5);
--chart-2: oklch(0.771 0.145 230.5);
--chart-3: oklch(0.709 0.210 354.8);
--chart-4: oklch(0.166 0.008 285.5);
--chart-5: oklch(0.530 0.011 286.0);
}
.dark {
--background: oklch(0.147 0.009 285.3);
--foreground: oklch(0.968 0.003 286.3);
--card: oklch(0.220 0.012 285.4);
--card-foreground: oklch(0.968 0.003 286.3);
--popover: oklch(0.220 0.012 285.4);
--popover-foreground: oklch(0.968 0.003 286.3);
--primary: oklch(0.968 0.003 286.3);
--primary-foreground: oklch(0.147 0.009 285.3);
--secondary: oklch(0.266 0.022 284.8);
--secondary-foreground: oklch(0.968 0.003 286.3);
--muted: oklch(0.266 0.022 284.8);
--muted-foreground: oklch(0.785 0.011 286.1);
--accent: oklch(0.720 0.210 354.8);
--accent-foreground: oklch(0.147 0.009 285.3);
--destructive: oklch(0.620 0.220 27.3);
--destructive-foreground: oklch(0.968 0.003 286.3);
--border: oklch(0.305 0.018 285.3);
--input: oklch(0.305 0.018 285.3);
--ring: oklch(0.968 0.003 286.3);
--chart-1: oklch(0.909 0.163 97.5);
--chart-2: oklch(0.771 0.145 230.5);
--chart-3: oklch(0.720 0.210 354.8);
--chart-4: oklch(0.968 0.003 286.3);
--chart-5: oklch(0.785 0.011 286.1);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Nouvelle collection — 2026
L'aurore, rendue nette.
A living gradient field, framed by nothing but sharp rectangles and ink hairlines.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/aurora-french-modernism.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `