Deconstructivist / Broken-Grid Radical

# Deconstructivist / Broken-Grid Radical — style sheet

> Postmodern anti-harmony and typographic disruption: deliberately fractured measure, overlapping layered text with blend modes, colliding baseline grids, degraded high-contrast photocopier/xerox textures, and controlled visual turbulence with surgical composition balance.

Derived from 3 curated reference(s) in the `deconstructivist-grunge` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Brody Gothic — 1/3
- Courier New — 1/3
- Franklin Gothic Heavy — 1/3
- Impact — 1/3
- Industria — 1/3
- Monaco — 1/3
- Univers 59 Ultra Condensed — 1/3
- Xerox Sans — 1/3

## Color

- `#09090b` dark neutral — 2/3
- `#ffffff` light neutral — 2/3
- `#18181b` dark neutral — 1/3
- `#3f3f46` mid neutral — 1/3
- `#52525b` mid neutral — 1/3
- `#71717a` mid neutral — 1/3
- `#e11d48` chromatic — 1/3
- `#f97316` chromatic — 1/3
- `#22c55e` chromatic — 1/3
- `#e4e4e7` light neutral — 1/3

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#09090b` / `#ffffff` — 19.9:1
- `#18181b` / `#ffffff` — 17.7:1
- `#09090b` / `#e4e4e7` — 15.7:1
- `#3f3f46` / `#ffffff` — 10.4:1

## Moves

### grid/layout

- Intentional baseline fracture: individual column paragraphs offset vertically by random 12px-36px increments, shattering the expected reading line. — 52-david-carson-ray-gun-magazine-18
- Run display headers completely off the right viewport edge (overflow: visible; width: 140vw), forcing the reader to comprehend words as environmental architecture. — 53-neville-brody-the-face-magazine-59

### texture/material

- High-contrast photocopier threshold filter (contrast(220%) grayscale(100%)) applied to imagery, creating grainy 1-bit punk zine textures. — 52-david-carson-ray-gun-magazine-18
- Overprinted semi-transparent text layers (opacity: 0.65; mix-blend-mode: multiply) generating ghosted typographic trails as the user scrolls. — 54-tomato-uk-underworld-second-toughest-in-the-infants

### typography

- Extreme negative letter-spacing on headline display type (letter-spacing: -0.08em) with glyphs deliberately colliding and overlapping via mix-blend-mode: difference. — 52-david-carson-ray-gun-magazine-18

### component pattern

- Construct custom typographic dingbats from sliced geometrical shapes, replacing traditional bullet points with radical angular arrows and sheared bars. — 53-neville-brody-the-face-magazine-59

### motion/interaction

- Rapid staccato text-shuffling micro-animations on hover, where characters cycle through random ASCII symbols for 120ms before locking into place. — 54-tomato-uk-underworld-second-toughest-in-the-infants

## References

- 52-david-carson-ray-gun-magazine-18 — David Carson: Ray Gun Magazine #18 (exemplar)
- 53-neville-brody-the-face-magazine-59 — Neville Brody: The Face Magazine #59
- 54-tomato-uk-underworld-second-toughest-in-the-infants — Tomato UK / Underworld: Second Toughest in the Infants