# Chiaroscuro Motorsport 순흑·순백 면이 엣지투엣지로 극적 분할하는 명암 대비 위에 디스플레이 세리프와 좁은 매거진 칼럼, 단 한 점의 레이싱 레드를 얹은 모터스포츠 에디토리얼. - taxonomy: cinematic-dark · chiaroscuro, motorsport-editorial, high-contrast, magazine-column, display-serif, full-bleed, monochrome · complexity=high - page types: landing, editorial, marketing, portfolio - best for: 헤리티지·모터스포츠 브랜드 랜딩, 고대비 에디토리얼 스토리텔링, 명암 대비가 무기인 럭셔리 매니페스토 - avoid for: 데이터 밀도 높은 대시보드, 밝고 친근한 소비자 앱, 컬러 일러스트 중심 랜딩, 부드러운 파스텔·라운드 UI - provenance: authored (design-diversity 팩 'web-chiaroscuro-motorsport-editorial' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Chiaroscuro Motorsport ## Overview Pure-black and pure-white planes split every section edge-to-edge — dramatic chiaroscuro with no muddy gray in between. Over that high-contrast field sit an oversized display-serif headline and narrow, dense magazine columns, like a motorsport print spread. Racing red appears exactly once on the whole page and nails the eye. Corners are sharp, shadows are absent, images are grayscale, and motion snaps in 100–150ms. Hierarchy is built from the light/dark split and typography — never from color. ## Colors & Roles Two absolutes anchor everything: black field `#0A0A0A` and white field `#FFFFFF`. On white, body ink is `#1A1A1A`; on black, text is `#FFFFFF`. Meta/caption gray is `#C4C4C4` on black, `#6A6A6A` on white. The single chromatic mark is racing red (oklch 0.546 0.224 29.2 = `#D40000`) — used **once per page** as one keyword highlight or one 1px rule, never twice. `dark` is the canonical mode (black-dominant framing), but because the style splits black/white edge-to-edge, `light` (white-dominant) is kept equally faithful: one mode's background is the other's foreground. Mid neutrals for `card`/`secondary`/`muted`/`border` are derived from the pack's brightness rhythm (#141414/#2A2A2A/#404040/#F0F0F0/#EDEDED). Both fields hit ≈16:1 body contrast (WCAG AAA). ## Typography Rules Two families. Display and giant index numbers are set in **Newsreader** serif (weight 600) — H1 `clamp(2.6rem, 5vw, 4.6rem)`, line-height 1.05, letter-spacing −0.015em; index numbers `clamp(3rem, 8vw, 7rem)`. Body, kicker, and caption are **Inter**: body 0.95rem / line-height 1.55, measure 48–58 characters (narrow, dense); kicker 0.7rem weight 700 uppercase with 0.18em tracking; caption 0.72rem. Never set a headline in sans-serif. ## Layout Principles Full-bleed — no content_max. Each section splits the viewport asymmetrically between a black plane and a white plane (e.g. left 58% black + right 42% white, then a 50/50 the next section); vary the ratio section to section. Text lives inside each plane on an internal padding axis of `clamp(24px, 5vw, 80px)`. Density is high (compact) — kicker↔headline 12px, headline↔body 20px, column gutter 32px, caption 8px on an 8px base. Every plane is a finished magazine plane: fill an empty black plane with a giant index number + dense text; fill an empty white plane with a full-bleed grayscale image or dense columns. No flat dead void. ## Depth & Elevation Flat by rule. No shadows, gradients, glass, or noise. Depth is expressed only through the black/white plane split. ## Shapes Zero border-radius everywhere — buttons, cards, images, tables. Borders are nearly absent; the field boundary itself is the divider. When a line is needed, use a single 1px rule (#C4C4C4 on black, #1A1A1A on white). ## Component Stylings - **Button**: radius 0, padding 12px 28px, Inter uppercase 0.1em tracking. On black → white solid + black text; on white → black solid + white text. Hover inverts black↔white instantly (110ms). - **Nav**: 60px black field, wordmark left (Newsreader 600), uppercase Inter menu right (0.7rem/700/0.18em), 1px `#C4C4C4` bottom rule, fixes instantly on scroll. - **Gallery card**: grayscale image + opposite-value caption bar (model name Newsreader, year Inter tabular). Radius 0, 2px gap so planes nearly touch. Hover releases grayscale (130ms). - **Record table**: 1px row rules, Inter tabular-nums, inverted header row. One winning row carries a red 1px marker at its left edge — the page's single red use. - **Index number**: Newsreader 600 `clamp(3rem, 8vw, 7rem)`, faint `#C4C4C4` on black — the device that fills an otherwise empty plane. - **Icon**: 1px stroke lines only, minimal, motorsport motifs (checkered flag, lap time, gauge). No filled icons, emoji, or generic icon sets. ## Motion Decisive snap — 100–150ms, `cubic-bezier(0.3, 0, 0.2, 1)`. Black/white planes wipe in via clip-path/width (140ms); text fades opacity 0→1 (120ms); buttons invert instantly (110ms); gallery images release grayscale (130ms). No parallax, bounce, or fade over 200ms. `prefers-reduced-motion` drops the wipes and filter transitions, keeping opacity only. ## Do's and Don'ts **Do:** split sections edge-to-edge into pure-black/pure-white planes at varying asymmetric ratios; set headlines in display serif over narrow 48–58ch grotesque columns; fill every plane to magazine density with an index number and dense text; use racing red exactly once; keep motion a 100–150ms snap. **Don't:** use red more than once; weaken the split with muddy gray; add rounded cards, gradients, shadows, or emoji; box content in a content_max; widen columns past 60 characters; set a headline in sans-serif; use color photos; leave a flat dead void; use slow fades or parallax. ## Responsive Behavior Breakpoints 768px and 1120px. Split planes stack vertically on mobile (black over white) rather than side-by-side; display type scales via `clamp()`; the 3-column gallery collapses to 1; nav collapses to a 1px-line hamburger. ## Agent Prompt Guide > Build this in the 'Chiaroscuro Motorsport' style: split every section edge-to-edge into pure-black (#0A0A0A) and pure-white (#FFFFFF) planes at asymmetric, varying ratios — no blurry grays, no content_max box. Set headlines in a display serif (Newsreader), body in narrow dense grotesque columns of 48–58 characters (Inter). Fill each plane to full magazine density with an oversized index number, kicker, and body column — never a flat dead void. Use one racing-red accent exactly once. Zero border-radius, no shadows, grayscale images only, decisive 100–150ms snap motion. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `web-chiaroscuro-motorsport-editorial` (an authored spec, not extracted from a live URL), so all tokens are `manual` confidence. Fonts are public web fonts (Newsreader, Inter — OFL); the pack references Ferrari editorial only as brand inspiration and ships no logo or proprietary font. Racing red is the pack's own designated value. Mid-gray neutrals are derived from the pack's stated brightness rhythm. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Chiaroscuro Motorsport — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --spacing: 8px; --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.145 0 0) 0%, transparent); --ks-display-weight: 600; --ks-display-tracking: -0.015em; --background: oklch(1 0 0); --foreground: oklch(0.218 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.218 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.218 0 0); --primary: oklch(0.145 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.955 0 0); --secondary-foreground: oklch(0.218 0 0); --muted: oklch(0.946 0 0); --muted-foreground: oklch(0.524 0 0); --accent: oklch(0.546 0.224 29.2); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.546 0.224 29.2); --destructive-foreground: oklch(1 0 0); --border: oklch(0.218 0 0); --input: oklch(0.218 0 0); --ring: oklch(0.145 0 0); --chart-1: oklch(0.145 0 0); --chart-2: oklch(0.546 0.224 29.2); --chart-3: oklch(0.524 0 0); --chart-4: oklch(0.757 0 0); --chart-5: oklch(0.371 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(1 0 0); --card: oklch(0.191 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.191 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.285 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.218 0 0); --muted-foreground: oklch(0.820 0 0); --accent: oklch(0.546 0.224 29.2); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.546 0.224 29.2); --destructive-foreground: oklch(1 0 0); --border: oklch(0.371 0 0); --input: oklch(0.371 0 0); --ring: oklch(1 0 0); --chart-1: oklch(1 0 0); --chart-2: oklch(0.546 0.224 29.2); --chart-3: oklch(0.820 0 0); --chart-4: oklch(0.524 0 0); --chart-5: oklch(0.633 0 0); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html
01

Heritage — Circuit 1947

Light against
the dark.

Pure black meets pure white edge to edge, and the story sits in the seam — a narrow, dense column where every line earns its place against the void.

Enter the archive
Tipo 375 1951 · 4.5L V12
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/chiaroscuro-motorsport.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 `