# Couture Color Block
흰 캔버스에 채도 깊은 솔리드 컬러 블록을 큼직하게 비대칭으로 깔고, 가는 디스플레이 세리프를 얹은 모션 없는 쿠튀르 에디토리얼.
- taxonomy: luxury-editorial · couture, color-block, fashion-lookbook, display-serif, asymmetric, static, high-contrast · complexity=medium
- page types: landing, editorial, portfolio, marketing
- best for: 패션·럭셔리 브랜드 랜딩, 룩북·컬렉션 에디토리얼, 정적이고 위엄 있는 브랜드 매니페스토
- avoid for: 데이터 밀도 높은 대시보드, 장난스러운 소비자 앱, 모션·인터랙션이 주인공인 사이트
- provenance: authored (design-diversity 팩 'web-couture-color-block' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# Couture Color Block
## Overview
A fashion-lookbook style translated to the web. Pure white is the canvas; huge, deeply saturated solid color blocks (one color per section) cover half the screen or more and meet the white margin at a knife-sharp edge. Thin display serif rides over the blocks in warm-white and over white in ink. Lookbook photography straddles the block/white boundary. There is no motion at all — the identity is a static, dignified editorial rhythm. Depth is made only from color-field contrast, never from shadow or gradient.
## Colors & Roles
Three saturated block colors are the entire system — burgundy (`primary`, oklch 0.337/0.090/8), forest (`secondary`, 0.322/0.042/160), and cobalt (`accent`, 0.357/0.096/262). Each is a fully solid fill, one per section, never gradient. `background` is pure white; text on white is warm ink (`foreground`, 0.207/0.008/67), text on a block is warm-white (0.954/0.011/77 → `primary/secondary/accent-foreground`). Do not add a fourth surface-accent color. `muted`, `border`, and `input` are warm neutrals derived from the ink/warm-white family for the rare hairline or meta text. Canonical mode is the white canvas (light); dark inverts the canvas to warm ink and re-authors the three blocks lighter for contrast.
## Typography Rules
Display and headlines use a thin, high-contrast serif — Playfair Display at weight 400–500. Elegance comes from contrast and space, not weight, so bold headlines (≥600) are banned. Display is `clamp(2.6rem, 6vw, 5.2rem)`, line-height 1.1, letter-spacing 0. Body copy is a light sans-serif (Inter, 400, line-height 1.7, measure 58–68 chars) because Playfair reads heavy at body size. Kickers and labels are uppercase with wide 0.24em tracking. A secondary display face (Bodoni Moda, 400, italic allowed) carries brand marks and lookbook captions.
## Layout Principles
Full-bleed blocks reach the screen edge; only the body text column is capped at 560px. The grid is an asymmetric 12 columns — a block occupies 7–8 columns pinned to one edge, and the next section flips to the opposite edge. Never split 50/50. Lookbook images cross the block/white boundary, intruding 24–40% into the opposite field. Section rhythm is airy: `clamp(120px, 13vw, 200px)` of vertical space, wide white breathing room.
## Depth & Elevation
Flat. No shadows, no gradients, no glass, no noise. Division between regions is done purely by the color block meeting white. The block itself is the elevation.
## Shapes
Zero border-radius on everything — blocks, images, cards, buttons. Knife-sharp right angles are the couture-editorial signature. Borders are nearly absent; when needed, a single hairline (ink on white, warm-white on a block).
## Component Stylings
- **Button**: ghost only, no fill. `1px solid` ink on white or warm-white on a block, padding 16px 38px, uppercase 0.2em tracking, radius 0. Hover fills instantly (≤60ms) and inverts the text color.
- **Card**: no shadow, radius 0. The color block *is* the card unit — do not repeat three small equal cards; the large field is the layout unit.
- **Image**: radius 0, no border, natural saturation, placed to straddle the block/white edge.
- **Nav**: hairline rule, brand mark left (Bodoni Moda), uppercase wide-tracked links right. Not sticky, no motion.
## Motion
None. No transitions, animations, or scroll-entrance effects — elements are in place from the start. Only links and buttons change state, instantly (≤60ms) on hover. Images, blocks, and cards do not react to hover. No parallax, fade, slide, zoom, or stagger. Because it is already static, no `prefers-reduced-motion` fallback is needed.
## Do's and Don'ts
**Do:** one saturated solid block per section, asymmetrically covering most of the screen; thin display serif over it; let images straddle the boundary; build depth from color-field contrast.
**Don't:** add any motion; gradient a block; add a fourth accent color; use radius > 0; set bold (≥600) headlines; split blocks 50/50; use box-shadow, glass blur, gradient text, emoji, or illustration.
## Responsive Behavior
Blocks stay full-bleed to the edge on mobile (gutter 0); the text column keeps its 560px cap and padding steps 24px → 64px at desktop. Breakpoints at 720px and 1100px. Asymmetric blocks stack vertically, alternating edge, rather than collapsing to a centered column. Display type scales via `clamp()`.
## Agent Prompt Guide
> Build this in the 'Couture Color Block' style: on a pure-white canvas, lay one huge saturated solid color block (burgundy, forest, or cobalt — one per section) asymmetrically over 7–8 of a 12-column grid, meeting the white margin at a knife-sharp edge. Thin display serif (Playfair Display 400–500, never bold) in warm-white over the block and ink over white, with uppercase 0.24em kickers. Lookbook images straddle the boundary. Zero radius, no shadows, no gradients, and no motion at all. Body copy is light sans-serif in a 560px column with airy clamp(120px,13vw,200px) gaps.
## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-couture-color-block` (an authored spec, not extracted from a live URL), so all confidence is `manual`. The three block colors trace directly to the pack's own designated values (chosen to avoid any brand's proprietary colors); muted/border neutrals are derived from the ink/warm-white family. Fonts are open web fonts (Playfair Display, Bodoni Moda, Inter — all Google Fonts / OFL). Dark mode is authored faithfully since the pack is white-canvas native.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Couture Color Block — 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: 'Playfair Display', 'Georgia', serif;
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
--font-display: 'Playfair Display', 'Georgia', serif;
--spacing: 8px;
--shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.207 0.008 67.4) 0%, transparent);
--ks-display-weight: 400;
--ks-display-tracking: 0;
--background: oklch(1 0 0);
--foreground: oklch(0.207 0.008 67.4);
--card: oklch(1 0 0);
--card-foreground: oklch(0.207 0.008 67.4);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.207 0.008 67.4);
--primary: oklch(0.337 0.090 8.2);
--primary-foreground: oklch(0.954 0.011 76.6);
--secondary: oklch(0.322 0.042 160.2);
--secondary-foreground: oklch(0.954 0.011 76.6);
--muted: oklch(0.915 0.015 80.7);
--muted-foreground: oklch(0.609 0.017 67.5);
--accent: oklch(0.357 0.096 262.1);
--accent-foreground: oklch(0.954 0.011 76.6);
--destructive: oklch(0.337 0.090 8.2);
--destructive-foreground: oklch(0.954 0.011 76.6);
--border: oklch(0.861 0.019 78.2);
--input: oklch(0.861 0.019 78.2);
--ring: oklch(0.337 0.090 8.2);
--chart-1: oklch(0.337 0.090 8.2);
--chart-2: oklch(0.322 0.042 160.2);
--chart-3: oklch(0.357 0.096 262.1);
--chart-4: oklch(0.207 0.008 67.4);
--chart-5: oklch(0.609 0.017 67.5);
}
.dark {
--background: oklch(0.207 0.008 67.4);
--foreground: oklch(0.954 0.011 76.6);
--card: oklch(0.266 0.012 55.8);
--card-foreground: oklch(0.954 0.011 76.6);
--popover: oklch(0.266 0.012 55.8);
--popover-foreground: oklch(0.954 0.011 76.6);
--primary: oklch(0.44 0.110 9);
--primary-foreground: oklch(0.954 0.011 76.6);
--secondary: oklch(0.46 0.060 160);
--secondary-foreground: oklch(0.954 0.011 76.6);
--muted: oklch(0.302 0.012 62.2);
--muted-foreground: oklch(0.72 0.014 76.6);
--accent: oklch(0.50 0.110 262);
--accent-foreground: oklch(0.954 0.011 76.6);
--destructive: oklch(0.44 0.110 9);
--destructive-foreground: oklch(0.954 0.011 76.6);
--border: oklch(0.385 0.016 63.5);
--input: oklch(0.385 0.016 63.5);
--ring: oklch(0.44 0.110 9);
--chart-1: oklch(0.44 0.110 9);
--chart-2: oklch(0.46 0.060 160);
--chart-3: oklch(0.50 0.110 262);
--chart-4: oklch(0.954 0.011 76.6);
--chart-5: oklch(0.72 0.014 76.6);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
One color per section, cut against white at a knife-sharp edge. The block is the layout — depth comes from the color field, never from a shadow.
04 / 09
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/couture-color-block.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 `