THE CONCEPT

BRUTA is a fictional Berlin architecture collective: three architects, one permitted material, 45,120 tonnes of raw concrete. The site is designed like a construction sheet that refuses to hide its machinery. The grid is not an invisible alignment helper; it is the atmosphere, the ruler, the rhythm, and the threat. Everything else locks to it: hero datum labels, project slab codes, mix tables, personnel files, and the live cursor coordinate readout.

THE EXPOSED GRID

In styles.css, the page background is built from layered linear-gradient gridlines, aggregate flecks, and one safety-orange datum field. The cell pitch lives in --cell: 64px on desktop, 48px on tablet, 40px on phone. Dark bands use the same grid in reverse. alignDark() in main.js measures each inverse band and shifts its background-position so the lines stay phase-locked with the concrete page instead of drifting.

SELF-ANNOTATING DRAWINGS

Any element with data-co is stamped by annotate(): it reads getBoundingClientRect(), divides by --cell, converts the column with colLetter(), and prepends a tiny .coord-tag. buildRulers() creates the fixed column letters and left row numbers. The crosshair is the live version of the same register: one requestAnimationFrame loop moves orange hairlines and a coordinate plate with transform. It is disabled for reduced motion and fine-pointer only, so phones keep the attitude without carrying the cost.

KINETIC BRUTALISM

The load moment is a five-letter stamp plus a .survey-sweep: BRUTA drops in as blocks, then an orange measuring plane crosses the hero and exits. Marquees use duplicated max-content spans and linear @keyframes drift-l / drift-r tracks. Project rows carry data-slab registry strips; hover or keyboard focus triggers the .slab-readout, throws an orange beam across the viewport, and inverts instantly. The mix section adds .cube-yard compression specimens, and the team is rendered as wide monospace personnel files.

PALETTE + TYPE TOKENS

• Display: Archivo Black for slabs, section numerals, project names, and manifesto clauses.
• Data: Chivo Mono for specs, rulers, dossier fields, coordinates, and footer metadata.
• Texture: CSS gridlines, radial aggregate flecks, SVG feTurbulence grain, and inline SVG elevations only.

REPRODUCE THIS

Prompt an AI agent like this: “Build a kinetic brutalist architecture site for a fictional raw-concrete collective. Expose the layout grid with body background lines controlled by --cell. Generate coordinate tags with annotate(), add fixed rulers, a transform-only crosshair, and a one-shot hero survey sweep. Use self-hosted Archivo Black and Chivo Mono. Make project rows into construction registers with keyboard-accessible slab locks, instant orange inversion, oversized opposing marquees, off-canvas section numerals, compression-cube visuals, and personnel files. Use only CSS, inline SVG, and local assets. Respect prefers-reduced-motion. Fill it with real tonnage, coordinates, mix specs, and office protocol.”