# 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.