# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Heavy grotesk, condensed grotesk, or expanded black — type with a physical presence |
| **Examples** | Archivo Black (900), Anton (400 condensed), Monument Extended (800), Archivo Expanded (800), Space Grotesk (700) |
| **Weight** | 700-900 — the heaviest weights available. No "medium" display type |
| **Tracking** | -0.03em to -0.05em (tight, stamped) OR +0.08em to +0.12em (wide, monumental). Never default |
| **Size** | Monumental — `clamp(4rem, 15vw, 14rem)` for hero statements |
| **Transform** | UPPERCASE. Always. Lowercase display type reads as "modern SaaS," not brutalist |

**Why these fonts:** Archivo Black and Anton are poster fonts — designed for headlines that must be read from across the street. They have no "polite" weights, which forces the design to commit. The condensed register (Anton) packs more characters per line, letting a full sentence become a single massive line. The expanded register (Archivo Expanded) does the opposite — each letter becomes a sculptural object.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Neutral grotesk — quiet enough to let display type shout |
| **Examples** | Archivo (400/500), Space Grotesk (400/500), Public Sans (400/500) |
| **Weight** | 400-500 |
| **Tracking** | 0 to 0.01em |
| **Size** | `clamp(0.9rem, 1.2vw, 1.05rem)` |
| **Line Height** | 1.5-1.6 |

**Why neutral body:** The body type is the straight man. It must be completely unremarkable so the display type's aggression reads as intentional. If the body font has too much personality, the page becomes noise instead of a statement.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Monospace |
| **Examples** | Space Mono, IBM Plex Mono, JetBrains Mono |
| **Weight** | 400-500 |
| **Tracking** | 0.1em-0.2em (wide, technical) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section numbers (`01 / MANIFESTO`), timestamps, coordinates, edition numbers, technical marginalia. The mono micro-labels are the "fine print" of the poster — they signal that the aggression is deliberate and documented.

---

## Type Scale

**Ratio:** 1.618x (golden ratio) with deliberate gaps — the scale jumps, it doesn't glide.

```
Hero statement: clamp(4rem, 15vw, 14rem)   — the weapon
Section title:  clamp(2.5rem, 7vw, 6rem)   — 1.618x down
Subhead:        clamp(1.25rem, 2.5vw, 2rem) — 1.618x down
Body:           clamp(0.9rem, 1.2vw, 1.05rem) — baseline
Micro:          10-12px                      — the fine print
```

**The gap between hero and section title is intentional.** A smooth 1.25x scale would make every level feel like a slightly bigger paragraph. The brutalist scale has *tiers* — you're either shouting, speaking, or whispering.

---

## Font Pairing Logic

**Display + Body:** Heavy grotesk display + neutral grotesk body creates the "poster + fine print" pairing. The display type is the artwork; the body is the exhibition label.

**Display + Micro:** Heavy display + monospace micro creates the "statement + documentation" pairing — the shout and the footnote. This is the signature brutalist combination.

**Never mix:** Maximum 2 typeface families plus the mono system font. Three families with different personalities turns the page into a ransom note (in the bad way).

---

## Typography Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Inter, Roboto, or Arial as display | Archivo Black, Anton, Monument Extended |
| Medium (500) display weights | 700-900 only |
| Default tracking | Tight (-0.03em) or wide (+0.08em), never default |
| Sentence case headlines | UPPERCASE always |
| Smooth 1.25x scale | Tiered scale with deliberate gaps |
| More than 2 families + mono | Display + body + mono system font |
| Rounded or soft typefaces | Sharp, geometric, mechanical letterforms |

# Color Architecture

## Ground

```css
--color-ground: #F4F3EF; /* Paper white — never pure #FFF */
--color-ground-dark: #0A0A0A; /* Optional dark mode ground — never pure #000 */
--color-ground-elevated: #ECEBE6; /* Slightly darker paper for panels */
```

**Why paper white:** Typographic brutalism is a print aesthetic — zines, protest posters, risograph prints. Pure `#FFFFFF` reads as a screen, not paper. `#F4F3EF` has a faint warm cast that makes oversized black type feel printed rather than rendered. The dark variant (`#0A0A0A`) is for the "blackout poster" register — use one ground, never mix them on the same page.

---

## Text

```css
--color-text-primary: #111110; /* Near-black ink — never pure #000 */
--color-text-secondary: #55554F; /* Muted ink for supporting copy */
--color-text-muted: #8A8A82; /* For micro labels and metadata */
```

**Why near-black ink:** Pure `#000000` type on pure white is the "default document" look — it has no voice. `#111110` keeps the aggressive contrast while adding a trace of warmth that matches the paper ground. The secondary ink (`#55554F`) is where most body copy lives; it lets the display type own the purest contrast.

---

## Accent

```css
--color-accent: #E10600; /* Signal red — the signature brutalist accent */
/* Alternatives: */
--color-accent-blue: #0047FF; /* Electric blue — colder, more technical */
--color-accent-orange: #FF4D00; /* Safety orange — most aggressive */
```

**Rule:** ONE stark accent maximum. The accent appears ONLY on:
- The single most important statement on the page (usually the hero headline or primary CTA)
- Active navigation state
- One underline/strike-through highlight per section

**Why red:** Red is the color of protest posters, warning labels, and emergency. It carries the same aggressive, unapologetic energy as the oversized type. It must be a *pure, saturated* red — muted or desaturated reds read as "branded" and polite, which kills the style.

---

## Semantic Colors

```css
--color-success: #1A7F37; /* Flat green — no glow, no gradient */
--color-error: #D1242F;   /* Flat red — close to accent, used for errors only */
--color-warning: #9A6700; /* Flat amber */
```

**Semantic colors are flat and unglossed.** No soft backgrounds, no tinted pills with shadows. A success state is a solid block of flat green with near-black text — like a stamp, not a toast notification.

---

## The Color Rule

> **Color is a weapon, not a decoration.** One stark accent maximum. It appears only where the page must shout. Everything else is ink on paper — black, white, and the grays between.

---

## Gradient Policy

**No gradients. Ever.** Gradients are the visual language of "digital smoothness" — the exact opposite of this style's flat, printed honesty. If you need to separate two areas, use:
- A hard edge (1px hairline rule)
- A solid color block
- Overlapping type (the overlap itself creates separation)

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure #FFFFFF background | #F4F3EF paper white |
| Pure #000000 text | #111110 near-black ink |
| Muted, "branded" accent colors | Pure saturated red (#E10600), blue (#0047FF), or orange (#FF4D00) |
| Multiple accent colors | ONE stark accent, used like a weapon |
| Gradient backgrounds | Flat paper, solid blocks, hard edges |
| Soft tinted surfaces | Flat color blocks with hard boundaries |
| Purple or pastel accents | Red, electric blue, or safety orange |
| Dark-mode-only with glow effects | Flat ink-on-paper, or flat blackout poster |

# Motion Principles

## Philosophy

Motion in Typographic Brutalist is **a stamp, not a dance**. Elements don't glide in — they slam into place. No bounce, no spring, no overshoot, no float. When something appears, it appears *now*, with the finality of a letterpress impression. The style's aggression extends to its motion: hard cuts, instant state changes, and heavy reveals.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Hero display type | Clip-path wipe (top-to-bottom) or hard cut | 400-600ms | `steps(1)` or `cubic-bezier(0.16, 1, 0.3, 1)` | 0ms |
| Secondary type | Hard opacity cut (no fade) | 150ms | `steps(1)` | 150ms |
| Body text blocks | Opacity fade | 300ms | `ease-out` | 300ms |
| Micro labels | Hard cut | 100ms | `steps(1)` | 400ms |
| Marquee strip | Continuous translateX loop | 20-30s linear | `linear` | 0ms |
| CTA button | Background invert (instant) | 0ms | `steps(1)` | — |

**Key easing:** `cubic-bezier(0.16, 1, 0.3, 1)` — fast start, heavy deceleration. The element arrives quickly and stops dead. For the most aggressive moments, use `steps(1)` — the element simply *exists* one frame and not the next.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Marquee strips | Continuous horizontal scroll, `translateX(-50%)` loop, 20-30s per loop |
| Sticky display type | Section title sticks while content scrolls past (position: sticky) |
| Scroll-linked scale | Display type scales from 1.0 → 1.15 as it enters viewport (subtle) |
| Text reveals | Clip-path or hard mask reveals — never soft fades for display type |
| Parallax | None. Parallax is a "smooth digital" effect; this style is flat |

**Scroll choreography is minimal.** The type is already the spectacle — it doesn't need scroll-triggered theatrics. One marquee and one sticky statement per page is the maximum.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Background inverts to near-black, text to paper (instant) | — |
| CTA buttons | Background inverts to accent, text to paper (instant) | Slight translateY(2px) |
| Text links | Underline appears or strike-through appears (instant) | — |
| Cards | Border color → accent (instant) | — |

**All hover states are instant.** No 200ms transitions, no easing curves on hover. The brutalist interaction is binary: it's either off or on. A transition implies hesitation; this style never hesitates.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All entrance animations collapse to instant appearance (no clip-path, no fade)
- Marquee strips freeze in place (or become a static overflow strip)
- No scroll-linked scale
- Hover states remain instant (they already are)

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| ❌ Never animate | Why |
|-----------------|-----|
| Bounce or spring easing | Playful physics contradict the aggressive, flat register |
| Smooth glides or floats | Motion must feel stamped, not drifted |
| Color transitions | Color changes are instant state flips, not fades |
| Rotation on hover | Gimmicky — the type is already the statement |
| Every element revealing | Brutalism is about the *absence* of decoration, including motion decoration |
| Parallax layers | Depth effects contradict the flat, printed surface |
| Gradient or glow pulses | Digital effects that break the paper metaphor |

# Layout Grammar

## Grid System

**12-column grid that is *drawn* but not obeyed.** The grid exists as visible structure (hairline column rules), and content deliberately breaks it — type overflows its column, elements overlap, nothing aligns politely. The grid is the skeleton; the broken alignment is the muscle.

```
[1][2][3][4][5][6][7][8][9][10][11][12]
 ████████████████████████████████████████  ← visible column rules
        OVERLAPPING TYPE
   ██████████████████████
              ██████████████████████  ← type bleeds across columns
```

**The rule:** Content anchors to the grid at its *start* edge, then overflows freely. Nothing is centered. Nothing floats in the middle of a column.

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Flat paper, or a processed (threshold/halftone) image |
| Headline | Fills the viewport — `clamp(4rem, 15vw, 14rem)`, uppercase, left-aligned, may overflow the right edge |
| Headline position | Top-left or bottom-left, bleeding off the edge |
| Supporting text | Small, right-aligned or bottom-right, mono micro-label above |
| CTA | Below headline, left-aligned, flat solid button |
| Signature | Headline overlaps the section below it (negative margin) |

**Never centered hero.** A centered brutalist hero is a contradiction — the style is about aggressive asymmetry. The headline should feel like it was stamped onto the page at an angle that ignores the margins.

---

## Section Spacing

```css
--section-padding-y: clamp(3rem, 8vh, 6rem); /* Tighter than editorial styles */
--component-gap: clamp(1rem, 2vw, 2rem);
--content-max-width: min(1400px, calc(100vw - clamp(1rem, 4vw, 3rem)));
```

**Spacing is tight and deliberate.** Brutalism doesn't breathe like editorial — it crowds. Sections sit close together, separated by 2px rules rather than vast whitespace. The whitespace that *does* exist is asymmetric and intentional (a huge empty right half next to a packed left half).

---

## Layout Patterns

### Pattern 1: The Statement
```
┌─────────────────────────────────────────┐
│ 01 / MANIFESTO                          │
│                                         │
│  WE ARE                                 │
│  NOT                                     │
│  YOUR                                    │
│  AESTHETIC                               │  ← 15vw type, bleeds right
│                                         │
│  [CTA]  Supporting text →                │
└─────────────────────────────────────────┘
```

### Pattern 2: Overlap Stack
```
┌─────────────────────────────────────────┐
│  [Processed image, full-bleed]          │
│                                         │
│  TITLE OVERLAPS IMAGE                   │  ← negative margin pulls
│  (type sits on top of image)            │     type over the image
│                                         │
└─────────────────────────────────────────┘
```

### Pattern 3: Marquee Divider
```
┌─────────────────────────────────────────┐
│  Content above...                       │
│                                         │
│  NOISE NOISE NOISE NOISE NOISE NOISE    │  ← marquee strip, 2px rules
│                                         │
│  Content below...                       │
└─────────────────────────────────────────┘
```

### Pattern 4: Exposed Grid
```
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
│   │   │   │   │   │   │   │   │   │   │   │   │  ← visible column rules
│   │   │   │   │   │   │   │   │   │   │   │   │
│   │   │   │   │   │   │   │   │   │   │   │   │
│   │   │   │   │   │   │   │   │   │   │   │   │
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full broken-grid composition, monumental type, marquee strips |
| **Tablet (768px)** | Type scales down via clamp, overlaps reduce, grid lines stay |
| **Mobile (375px)** | Single column, type still large (min 3rem), marquee becomes static overflow strip |

**Fluid typography via `clamp()` is essential.** The monumental scale must survive on mobile — a brutalist page on a phone should still feel like a poster, not a blog.

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Centered hero layout | Left-anchored, edge-bleeding statement |
| Card grids with equal spacing | Overlapping blocks, exposed grid, marquee dividers |
| Symmetrical, balanced compositions | Aggressive asymmetry — empty space as a weapon |
| Generous "editorial" whitespace | Tight, crowded sections with hard rules |
| Rounded cards and soft containers | Flat blocks, hard edges, no containers |
| Everything aligned to the grid | Anchor start, then overflow with intent |
| Bento grids | Statement layouts, overlap stacks, marquees |

# Texture & Surface

## Primary Texture: Flat Paper

**The defining surface is flatness.** No gradients, no shadows, no glass, no depth. The page is a sheet of paper — or a poster — and everything on it is printed ink. This flatness is what makes the oversized type feel physical. Depth is created by *overlap* (type over type, type over image), never by shadow.

```css
/* The entire surface treatment: */
body {
  background: #F4F3EF; /* paper */
  box-shadow: none;
  text-shadow: none;
}
```

---

## Secondary Texture: Visible Grid Lines

**Exposed structure.** The layout grid is drawn on the page — 1px hairlines at column boundaries, section dividers, and baseline rules. This is the "blueprint" texture: the design shows its skeleton instead of hiding it.

```css
.grid-line {
  border-left: 1px solid #D8D7D0; /* visible column rule */
}
.section-rule {
  border-top: 2px solid #111110; /* heavy section divider */
}
```

**Parameters:**
- Column rules: 1px, `#D8D7D0` (subtle — the skeleton, not the content)
- Section dividers: 2px solid `#111110` (heavy — a deliberate cut)
- Baseline rules: 1px dashed `#C9C8C1` (technical, blueprint-like)

---

## Tertiary Texture: Halftone & Risograph on Images

**Images are never raw.** Photography must be processed to match the print aesthetic:

| Processing | Effect | When to Use |
|-----------|--------|-------------|
| High-contrast B&W threshold | Pure black/white, no gray | Portraits, product shots |
| Halftone dots | Print-style dot pattern | Editorial images, backgrounds |
| Risograph misregistration | Offset color layers, imperfect overlap | Poster-style graphics |
| Posterize (3-4 levels) | Flat tonal bands | Any photography |
| Duotone (black + accent) | Two-color print look | When the accent color is used |

**Implementation note:** Pre-process images as static assets (Photoshop, ImageMagick, or a halftone generator) rather than relying on CSS filters — you want *control* over the dot pattern, not a generic filter.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Flat paper `#F4F3EF`, no texture overlay |
| Panels/Blocks | Flat `#ECEBE6` or solid accent block, hard edges |
| Buttons | Flat fill (near-black or accent), no border radius above 2px, no shadow |
| Navigation | Transparent, inverts to solid on hover |
| Dividers | 2px solid near-black — a cut, not a hairline |
| Images | Processed (halftone, threshold, posterize) — never raw |
| Cards | None — this style doesn't use cards. Content sits directly on the paper |

**No glossy, no glassmorphism, no gradients, no drop shadows.** Surfaces feel like paper, cardboard, or concrete — never digital-smooth.

---

## Image Processing Rules

**NEVER use raw, unprocessed photography.** Every image must pass through at least one processing step:

| Processing | Effect | When to Use |
|-----------|--------|-------------|
| Threshold (B&W) | Pure black/white, maximum contrast | Primary images |
| Halftone | Print-style dots | Editorial imagery |
| Posterize | Flat tonal bands | Portraits, still life |
| Duotone | Two-color (black + accent) | Statement images |
| Grain + contrast | Aged print look | Background textures |

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Drop shadows on cards or type | Overlap elements — overlap creates depth |
| Gradient overlays on images | Threshold, halftone, or posterize |
| Glassmorphism / backdrop-blur | Flat surfaces with hard edges |
| Smooth 3D renders | Processed, flat, print-like imagery |
| Rounded corners everywhere | Sharp corners (border-radius: 0-2px max) |
| Subtle "premium" grain | No grain on surfaces — flat paper only |
| Glow or neon effects | Flat solid color blocks |

# Vocabulary Bank

## Primary Terms (must appear in prompt to unlock the style)

| Term | Why It Matters |
|------|---------------|
| `oversized type` | The core technique — display type at 120px+ that dominates the viewport |
| `broken grid` | The layout rule — visible grid with intentional misalignment and overlap |
| `raw brutalist` | The register — unpolished, aggressive, print-like |
| `high contrast` | The color rule — pure ink on paper, no middle ground |
| `poster aesthetic` | The reference — protest posters, zines, gig posters |
| `weaponized type` | The attitude — type as a statement, not a container |

---

## Secondary Terms (refine and tune the output)

| Term | Effect |
|------|--------|
| `negative tracking` | Tight letter-spacing (-0.03em to -0.05em) for stamped, dense type |
| `intentional misalignment` | Elements deliberately off-grid, overlapping |
| `zine layout` | DIY print composition, cut-and-paste energy |
| `halftone` | Print-style dot pattern on imagery |
| `risograph` | Offset color layers with imperfect registration |
| `marquee strip` | Continuous horizontal scrolling text divider |
| `exposed grid` | Visible column rules and baseline lines |
| `duotone` | Two-color image treatment (black + accent) |
| `flat surface` | No shadows, no depth, no gradients |
| `typographic statement` | A headline that IS the design |
| `aggressive confidence` | The emotional register — unapologetic |
| `raw edges` | Type and blocks bleeding off the viewport edge |
| `threshold` | Pure black/white image processing |
| `sticky statement` | Section title that sticks while content scrolls |

---

## Context Terms (set the mood and emotional register)

| Term | Mood |
|------|------|
| `protest poster` | Political urgency, direct address |
| `zine culture` | DIY, underground, cut-and-paste |
| `punk` | Rebellion, noise, anti-polish |
| `unapologetic` | No excuses, no softening |
| `statement` | The page makes a claim |

---

## Banned Terms (if these appear, the style has broken)

| Term | Why It Breaks the Style |
|------|------------------------|
| `rounded corners` | Rounds = friendly, polite, SaaS. Brutalism is sharp |
| `soft shadows` | Depth effects contradict the flat, printed surface |
| `gradient backgrounds` | Gradients are the language of digital smoothness |
| `polished UI` | Polish is the opposite of deliberate roughness |
| `glassmorphism` | Frosted glass is a "modern" effect, not a print aesthetic |
| `playful` / `fun` | This style is aggressive, not friendly |
| `Inter` (as display) | Inter is the default font — using it kills the statement |
| `centered hero` | Asymmetric, edge-bleeding composition is structural |
| `smooth` / `glossy` | The surface is flat paper, not glass |
| `premium` / `luxury` | Luxury is quiet; brutalism shouts |

---

## Prompt-Ready Phrases

Copy-paste these directly into prompts:

```
"typographic brutalist landing page, poster aesthetic"
"oversized display type at 15vw, uppercase, Archivo Black"
"broken grid with visible column rules, intentional misalignment"
"high contrast ink on paper, near-black #111110 on paper white #F4F3EF"
"one stark accent: signal red #E10600 on the primary statement only"
"flat surfaces, no shadows, no gradients, no rounded corners"
"halftone or threshold processing on all imagery — never raw photos"
"marquee strip divider, mono micro-labels at 10px tracking 0.15em"
"hard-cut motion, steps(1) reveals, no bounce, no parallax"
"no Inter, no glassmorphism, no centered hero"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Cultural institutions** | The poster register makes exhibitions feel like events — monumental type carries institutional authority |
| **Music labels** | The aggressive, unapologetic energy matches punk, metal, industrial, and experimental releases |
| **Activist brands** | The protest-poster heritage gives every statement urgency and political weight |
| **Independent design studios** | Studios that reject corporate polish use the style to signal craft, confidence, and attitude |
| **Fashion lookbooks** | Oversized type and processed imagery give garments a campaign-poster presence |
| **Festivals & events** | The monumental type reads from across the street — the marquee energy is built in |
| **Alternative publishing / zines** | The print, cut-and-paste heritage fits DIY and underground media |

## Brand Personality Match

This style reinforces brands that are:
- **Aggressive** — making statements, not suggestions
- **Raw** — unpolished, honest, no gloss
- **Unapologetic** — no excuses, no softening
- **Confident** — sure enough to break the grid on purpose
- **Print-born** — zines, posters, and paper, not screens

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate/B2B** | The aggression reads as hostile to professional services audiences |
| **Healthcare** | Shouting type is the opposite of calming or reassuring |
| **Government/legal** | The broken grid undermines authority and trust |
| **Fintech/banking** | The raw aesthetic signals instability — the opposite of what money wants |
| **Content-heavy sites** | Long-form reading needs breathing room the style refuses to give |
| **Brands needing approachability** | The style is confrontational by design |
| **Luxury/premium products** | Luxury whispers; brutalism shouts |

## How to Decide

Ask: **"Does my brand want to shout — loud, raw, and unapologetic, with type as the weapon?"**

If yes → Typographic Brutalist.
If no → Swiss Mono Precision (if you want typography without the aggression), Kinetic Typography (if you want type that moves), Dither Mono (if you want the mono print aesthetic with more texture), or Monochrome Single Accent (if you want the high contrast without the broken grid).

# Reference Gallery

## Live Sites

### Typographic Brutalist Reference Implementation
- **What works:** Monumental UPPERCASE display type, broken grid with visible column rules, ink-on-paper contrast, one stark accent, hard-cut motion
- **URL:** Reference implementation — the canonical example of this style

### David Rudnick (davidrudnick.com)
- **What works:** Weaponized typography, poster compositions, type as the entire design — the closest living equivalent to this style's register
- **URL:** davidrudnick.com

### Yale School of Art (art.yale.edu)
- **What works:** Deliberately raw institutional design, broken grid, unpolished surfaces — brutalism as an academic statement
- **URL:** art.yale.edu

### Raster-Noton (raster-noton.de)
- **What works:** Typographic minimalism for an electronic music label — type-only covers, mono details, precise aggression
- **URL:** raster-noton.de

### HTML Energy (html.energy)
- **What works:** DIY web craft, zine energy, raw unpolished layout, hand-built HTML as statement
- **URL:** html.energy

### Awwwards Brutalist Sites
- **What works:** Broken grids, monumental type, processed imagery, hard-cut motion
- **URL:** awwwards.com (search "brutalism" or "typographic")

## Key Visual References

### Typography References
- **Archivo Black / Anton / Monument Extended** — heavy grotesks with physical presence, poster pedigree
- **Heavy weights only** — 700-900; no "medium" display type
- **UPPERCASE always** — lowercase display reads "modern SaaS," not brutalist
- **Intentional tracking** — tight -0.03em to -0.05em (stamped) or wide +0.08em to +0.12em (monumental), never default
- **Monumental scale** — hero up to 14rem (`clamp(4rem, 15vw, 14rem)`), tiered scale with deliberate gaps
- **Mono fine print** — Space Mono / IBM Plex Mono, 10-12px, tracking 0.1-0.2em

### Color References
- **Paper white** — #F4F3EF (faint warm cast, never pure #FFF)
- **Near-black ink** — #111110 (never pure #000)
- **Supporting ink** — #55554F body, #8A8A82 micro labels
- **Stark accents** — signal red #E10600, electric blue #0047FF, safety orange #FF4D00 (one maximum)
- **Grid hairlines** — #D8D7D0 visible column rules, 2px solid #111110 section dividers

### Texture References
- **Flat paper** — no shadows, no gradients, no glass, no glow
- **Visible grid lines** — 1px column rules, 2px section dividers, 1px dashed baselines
- **Halftone dots** — print-style dot pattern on editorial images
- **Risograph misregistration** — offset color layers, imperfect overlap
- **Threshold / posterize / duotone** — flat processed imagery, never raw photography

### Motion References
- **Hard cuts** — `steps(1)`: elements exist one frame and not the next
- **Clip-path wipes** — 400-600ms, `cubic-bezier(0.16, 1, 0.3, 1)`: arrive fast, stop dead
- **Marquee** — continuous translateX loop, 20-30s, linear
- **Instant inversions** — hover states flip colors with zero transition
- **No bounce, no spring, no parallax** — motion is a stamp, not a dance

## Screenshot Notes

> When capturing references for this style, look for:
> - The typography (must be monumental, UPPERCASE, heavy weight — not Inter or Roboto)
> - The grid (must be visible AND broken with intent — column rules drawn, content misaligned)
> - The color (must be high-contrast ink on paper — max one stark accent)
> - The motion (must be hard cuts — no bounce, no parallax, no glides)
> - The surfaces (must be flat — no shadows, no gradients, no glassmorphism)
> - The imagery (must be processed — threshold, halftone, posterize, or duotone, never raw)
> - The overall mood (must feel aggressive, unapologetic — a statement, not a page)