# De Stijl Neoplastic

## Overview
1917 Neoplasticism (Mondrian, Rietveld) as a website. Thick pure-black vertical and horizontal rules divide the whole viewport into asymmetric rectangular planes; most planes stay white, and only a few are filled with pure primary red, yellow, or blue. There are no diagonals, no curves, no shadows, and no motion — the composition is completely static. You know it's this style when every division is a thick orthogonal black line and color appears only as a sparse plane fill.

## Colors & Roles
Canonical mode is **light**: white canvas (`background`), near-black `foreground`/`border` (#1A1A1A → oklch 0.218), and exactly three chromatics — `primary` red (oklch 0.577 0.234 28), `secondary` yellow (oklch 0.883 0.181 94.5), `accent` blue (oklch 0.439 0.146 255.3). No other hue is ever allowed — no purple, green, orange, or pastels. Color fills a minority of planes; the rest are white. Text is black on white (~16:1, AAA) or white/black on color planes (keep ≥4.5:1: white on red/blue, black on yellow). The dark mode is an authored inversion of the same system: the canvas becomes the pack's black, rules and text become white, primaries stay identical, and motion stays banned.

## Typography Rules
Two Google Fonts. Display: **Archivo Black** (single weight 400), uppercase, `clamp(2.4rem, 5vw, 4.6rem)`, line-height 1.0, letter-spacing −0.01em — a geometric grotesque. Body: **Archivo** 500, 1rem, line-height 1.5, measure 56–66ch. Labels/meta: Archivo 700, 0.75rem, uppercase, letter-spacing 0.12em. Text sits horizontally inside planes only — rotated or diagonal text is forbidden.

## Layout Principles
Full-bleed plane composition — no content max-width (1280px desktop reference; breakpoints 768px / 1120px). Build with CSS Grid: unequal `fr` tracks, and thick black gaps (8–12px primary rules, 6px secondary) acting as the dividing lines — typically a black container background showing through `gap`. Plane sizes are deliberately unequal (one large white plane balanced against smaller color planes), but rule thickness and plane padding (`clamp(24px, 3vw, 48px)`) stay uniform.

**The resolved grid is non-negotiable**: every plane — white ones included — must be sealed on all sides by black rules (viewport edge excepted) and interlock with its neighbors so the planes tile the screen with no gaps. An unbounded empty white region is a dead void; a small color square floating alone in white space is a failure. Verify: no empty grid cells, every cell boundary carries a black rule.

## Depth & Elevation
None. Zero shadows, zero gradients, zero blur, zero noise. The composition is perfectly flat; thick black rules are the only structural device.

## Shapes
0px radius everywhere — right angles only. No rounded corners, no curves, no diagonals. Icons, if needed at all, are crafted from rectangles and straight lines (black or primary-colored); generic icon sets and emoji are banned. Images fill rectangular planes edge-to-edge (radius 0) and are separated from neighbors by thick black borders.

## Component Stylings
- **Button**: red or blue rectangular plane + thick black border (4–6px), Archivo Black uppercase, padding 14px 32px, radius 0. Hover swaps the fill instantly (0ms) to another primary or inverts to black — no transition.
- **Card / plane**: rectangle with thick black border, white or primary-filled. Padding `clamp(24px,3vw,48px)`, 16px title↔body gap, text anchored top-left or bottom-left — no dead space inside a plane.
- **Nav**: one horizontal white plane at the top with an 8px black bottom rule; Archivo Black wordmark left, menu items right as labels inside small yellow/blue planes, black line separators between items.
- **Color block**: an empty plane filled with pure red/yellow/blue is a legitimate compositional component — but it must share black rules with adjacent planes, never float.
- **Image plane**: real image or a legitimate color/white plane — never a gray "image placeholder" box.

## Motion
None — `motion: none` is the identity. No scroll-entrance animations, no hover movement or scaling, no fades/slides/draws. The only permitted interaction is an instant (0ms, no transition) color swap of a plane on hover — a blink, not an animation. `prefers-reduced-motion` needs no handling; nothing moves.

## Do's and Don'ts
**Do:** divide the full screen into asymmetric rectangles with uniform thick black rules; keep most planes white and color only a few; interlock every plane so the grid resolves with no voids; keep padding and rule thickness consistent.
**Don't:** use circles, triangles, or diagonals (that's Bauhaus territory); use any hue beyond red/yellow/blue; use gradients, shadows, radius, or emoji; add any transition animation; thin the black rules below 6px; fill every plane with color; make the division even and regular — that regresses to a generic grid site.

## Responsive Behavior
Breakpoints at 768px and 1120px. The plane composition re-flows: unequal columns stack into fewer tracks on mobile while every plane stays sealed by black rules — the resolved-grid rule applies at every width. Display type scales via `clamp()`. Never let stacking produce an unbounded white void.

## Agent Prompt Guide
> Build this in the 'De Stijl Neoplastic' style: divide the entire viewport into asymmetric rectangles using thick pure-black rules (8–12px primary, 6px secondary) as CSS Grid gaps over a black container; leave most planes white and fill only a few with pure primary red, yellow, or blue; seal every plane on all sides with black rules — no unbounded voids, no floating color squares; Archivo Black uppercase display type, Archivo 500 body; zero radius, zero shadows, zero curves; completely static — hover may only swap a plane's fill instantly (0ms).

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-de-stijl-neoplastic` — an authored spec, not measured from a live site, so all confidence fields are `manual`. All chromatic values trace to the pack's tokens.json (#E30613 / #FFD500 / #0050A0 / #1A1A1A on #FFFFFF), converted to OKLCH; neutral tonal steps (muted, chart-5) and the entire dark mode are authored derivations noted in `tokens.colors.notes`. The light mode is canonical.