# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Bold condensed grotesque — heavy, compact, shouting |
| **Examples** | Anton, Archivo Black, Bebas Neue, Monument Extended |
| **Weight** | 700-900 (condensed, maximum impact) |
| **Tracking** | -0.02em to 0em (tight, letters crowd the field) |
| **Size** | `clamp(3rem, 12vw, 9rem)` — monumental, breaks the layout |
| **Transform** | UPPERCASE, always. One word per line when possible |

**Why condensed and bold:** Corporate minimalism whispers with generous letter-spacing and light weights. This style screams. Condensed bold type packs more letters per line, letting headlines hit at poster scale. The type is the poster; the page is the wall.

---

## Handwritten & Stencil Accents

| Property | Specification |
|----------|--------------|
| **Register** | Handwritten marker and stencil stamps, used for annotations |
| **Examples** | Permanent Marker, Caveat, Shantell Sans (handwritten), stencil letterforms |
| **Weight** | 400-700 (handwritten at medium, stencil bold) |
| **Tracking** | 0em (natural hand, no optical spacing) |
| **Size** | `clamp(1.5rem, 4vw, 3rem)` — annotation scale, never small print |
| **Transform** | Sentence case, occasional all-caps shout |

**Why mix handwritten with condensed:** The anti-corporate voice breaks the single-family rule on purpose. Handwritten accents are the "scrawl on top" layer — the margin note, the sticker, the vandalized poster. Stencil letters feel stamped. These run simultaneously with the condensed display face, never instead of it.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Plain grotesque — the quietest voice in the system, still not quiet |
| **Examples** | Inter, Helvetica Now, Akzidenz-Grotesk, Roboto |
| **Weight** | 400-600 (regular to semibold, never thin) |
| **Tracking** | 0em-0.01em (standard) |
| **Size** | `clamp(1rem, 1.2vw, 1.125rem)` — 16-18px, genuinely readable |
| **Line Height** | 1.4-1.5 (tight, dense like print) |

**Why not thin:** Thin weights read as luxury and restraint — the enemy. Body copy is the only place that reads comfortably, but it still sits on saturated color. It should be dense and honest: paragraph text in a plain grotesque, occasionally bolded mid-sentence for emphasis, never optically light.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Stencil or handwritten stamps, plus tiny grotesque captions |
| **Examples** | Stencil cuts, Permanent Marker; grotesque 500 weight as alternative |
| **Weight** | 500-700 |
| **Tracking** | 0.02em-0.05em (slight — print caption, not luxury tracking) |
| **Size** | 11-13px |
| **Transform** | UPPERCASE for stamps, sentence case for handwritten notes |

**Usage:** "NO RULES", "ISSUE #13", "DON'T TRUST" — margin stamps, section labels, page numbers. These feel like marks made by a hand or a machine stamp, not a type system.

---

## Type Scale

```
Display:  clamp(3rem, 12vw, 9rem)       — monumental, condensed, UPPERCASE
Accent:   clamp(1.5rem, 4vw, 3rem)      — handwritten/stencil annotations
Body:     clamp(1rem, 1.2vw, 1.125rem)  — 16-18px, dense grotesque
Micro:    11-13px                        — stamps and captions
```

The scale is extreme — 11px to 144px. The contrast is between monumental display type and dense body, with the handwritten layer sitting between them. Nothing is mid-sized and neutral; every size makes a claim.

---

## Font Pairing Logic

**Deliberate incoherence:** Three voices that never merge — condensed grotesque for the shout, handwritten marker for the scrawl, plain grotesque for the small print. They appear simultaneously, overlapping, sometimes colliding on the same line.

**Never:** Thin or light weights (restraint reads corporate), wide-tracked luxury serifs (too quiet), overly rounded friendly fonts (too safe), or a single neutral family doing everything (too clean — this style needs friction).

---

## RULES THAT ARE MEANT TO BE BROKEN

- **Never center perfectly** — headlines set left, or force-ragged right, or rotated 1-3 degrees
- **Never give headlines breathing room** — they may collide with margins
- **Never match weights across layers** — the scrawl is a different weight than the shout on purpose
- **Never set body in the display face** — condensed body is unreadable and lazy, not loud

# Color Architecture

## Ground

There is no neutral ground. The "background" IS a saturated color block — the design is the palette stated at full volume. Ink black and warm paper appear only as supporting plates, never as the default surface.

```css
--color-ground-dark: #111111;     /* Ink black — anchoring text, borders, crops */
--color-ground-light: #FFF3D6;    /* Hot cream — risograph paper warmth, not sterile white */
```

**Why no pure #000000 / #FFFFFF:** Pure black reads as corporate print; pure white reads as a sterile SaaS canvas. Ink black is reserved for text plates and hard outlines. Warm cream is available for "paper" moments but the default surface is always one of the saturated primaries below.

---

## Saturated Primaries

```css
--color-acid-yellow:  #D4FF00;   /* Acid yellow — the screamiest, loudest color in the system */
--color-hot-pink:     #FF2D95;   /* Hot pink — punk, electrified */
--color-electric-orange: #FF5400; /* Electric orange — heat, warning-tape energy */
--color-cobalt-blue:  #0049FF;   /* Cobalt blue — saturated primary, electric dielectric */
--color-lime-green:   #B6FF00;   /* Lime green — battery acid, sibling of acid yellow */
```

**These ARE the base colors.** Full sections sit on solid primary fields. Text overlays, buttons, cards, and strokes sit directly on the color. The saturation is never dialed down for "taste" — the entire point is a palette that refuses to whisper.

---

## Clashing Combinations

Clashes are intentional and load-bearing. The guiding rule: never pick two colors that "go together." Always pair fields so the adjacent colors physically hurt in a good way.

| Combination | Purpose |
|-------------|---------|
| Acid yellow field + hot pink text | The most electrified pairing in the system |
| Cobalt blue field + lime green text | Print-register clash, high-voltage |
| Electric orange field + cobalt text | Warning-tape contrast, highway impact |
| Lime green field + hot pink text | Zine cover energy, absurd and loud |

**No split-complementary optimizations, no muted hedges, no white-gray background behind color.** If two colors read as "balanced," the pairing is wrong — push them further apart.

---

## Text Color Strategy

```css
--color-text-on-dark:  rgba(17, 17, 17, 0.92);  /* Ink black, high contrast, loud */
--color-text-on-light: rgba(255, 243, 214, 0.92); /* Cream on saturated ink, reading */
--color-text-direct:   #1A1A1A;                 /* Hard ink text for acid/cream grounds */
```

**Alpha is near-strong, not translucent.** This style prints at 90%+ opacity. Unlike softer styles that float translucent text to feel airy, these blocks are stamped hard. Text sits clearly ON the color; nothing is softly veiled.

---

## Overprint / Ink Stamps

```css
--color-in-ink: #111111;              /* Full black for stamps, crops, hard borders */
```

**Purpose:** Saturated color blocks read as "screen tone" and "corporate gradient" unless they carry print artifacts — stamps, crop marks, hard borders. Ink black supplies that: block outlines, hairline rules, halftone dot tints. When used in contrast against the primaries, it makes the palette feel printed and industrial rather than digital.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Saturated primary color block (or layered 2-3 stack with hard edges) |
| Text fields | Warm cream or ink, at 90%+ opacity — hard-stamped |
| Buttons | Bright ink fill, 2-3px black border, hard offset satin shadow |
| Cards/panels | Saturated color fill with harsh crop lines and corner stamps |
| Nav | Sticky saturated bar with ink sticky labels |
| Dividers | Hard-crop black or contrasting color rules — deep ink bars |

---

## Color Don'ts

| Don't | Do Instead |
|-------|-----------|
| Muted, corporate palette | Saturated primaries with intentional clashes |
| Gradient-to-white softening | Hard edges between fields, offset blocks |
| Negative-dark backdrops everywhere | One saturated field per section informs the next |
| Soft shadows on primary fills | Hard offset black, crop marks, subtle ink crush |
| 2 colors that "click" | Force clashing pairs — loudness is the point |
| Any pastel | The primaries — never dilute them into "branded" |

# Motion Principles

## Philosophy

Motion in Bold Anti-Corporate Color is **bouncy, playful, and slightly chaotic**. Nothing glides, nothing fades politely, nothing holds its position with corporate discipline. Elements pop in with elastic overshoot, wobble when disturbed, and bounce when they land. The motion feels physical — rubber, springs, slinkies — never digital and never polite.

---

## Elastic Pops

```css
:root {
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot: goes past, comes back */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pop-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
```

**The overshoot is the personality.** Elastic easing (control points beyond 1.0) makes elements overshoot their resting position then snap back. This is the signature motion of the style — every entrance, hover, and state change gets at least a hint of it. The 60% → 80% dip in `pop-in` is the "rubber band" moment.

---

## Wobble

```css
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  25%      { transform: rotate(2.5deg); }
  50%      { transform: rotate(-1.5deg); }
  75%      { transform: rotate(1.5deg); }
}

.wobble-on-hover:hover {
  animation: wobble 0.6s ease-in-out infinite;
}
```

**Purpose:** Wobble is the disrespectful cousin of hover states. Titles, stamps, and stickers wobble when disturbed — like a sticker that was just slapped on and hasn't settled. Small rotations (±2-3deg) at fast durations. Never applied to body text or anything with reading content.

---

## Bounce

```css
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.bounce-idle {
  animation: bounce-y 1.8s var(--ease-bounce) infinite;
}
```

**Purpose:** Idle bounce on hero accents, arrows, and stickers — the element keeps nudging itself into view. The bounce should feel playful, never hypnotic: 10-15px of travel, 1.5-2s loops, and never on more than one element per viewport at a time. Chaotic is good; seizure-inducing is not.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Display headline | Pop-in (scale 0.4 → overshoot → 1) | 500ms | `--ease-elastic` | 0ms |
| Color blocks | Slide-in from left + settle (with 1-2deg rotation) | 600ms | `--ease-bounce` | 100ms |
| Handwritten accents | Stamp: scale(1.6) → 1 + rotate(3deg) | 300ms | `--ease-elastic` | 200ms |
| Sticker badges | Pop-in with rotation (rotate(20deg) → -3deg → 0) | 450ms | `--ease-elastic` | 300ms |
| Body text | Slide-up 16px + fade, hard stop at 100% | 400ms | `ease-out` | 350ms |

**Key:** All durations are FAST (300-600ms). The whole section lands in under a second — that's the energy. Staggered delays create the "collage being assembled in front of you" effect: blocks land one at a time, slightly misaligned.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Buttons | Scale 1.0 → 1.06 with `--ease-elastic`, hard offset shadow flips side | Scale 1.06 → 0.94 (stamp press) |
| Stickers/badges | Wobble 0.6s + brightness 1.1 | Slight shrink + rotate 2deg |
| Links | Underline slams in (scaleX 0 → 1, 150ms, no easing) + color swap | Opacity 0.7 |
| Display headlines | Rotate 0 → -1.5deg + slight scale (1.02) | — |
| Color blocks | Brightness 1.0 → 1.08 + 2px offset | — |

**All hover transitions are quick (150-300ms) and physical.** Fast = playful here. The opposite of restrained slow fades — interactions should feel like flicking a sticker, not breathing.

---

## Collage Assembly

| Effect | Specification |
|--------|--------------|
| Section entry | Color blocks fly in from alternating sides, landing slightly rotated and misaligned (1-3deg) |
| Overlap reveals | Elements land ON TOP of each other — later blocks over earlier ones |
| Hand-drawn arrows | Draw-in animation: stroke-dashoffset to 0, 400ms |
| Rotation settle | Everything that lands rotated settles to its FINAL rotated position (never straightens to 0deg) |

**The collage must not straighten.** When an element lands, it stays at its landed angle — 1-3deg off axis is the resting state, not a transition state. This is what separates "playful" from "broken": the misalignment is the design, not an error.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Elastic pops: instant (opacity only, no scale overshoot)
- Wobble: disabled
- Idle bounce: disabled
- Collage fly-ins: instant opacity, no travel
- Draw-in animations: instant full stroke

```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 | Why |
|-------|-----|
| Slow, weightless fades | That's the corporate whisper this style exists to reject |
| Smooth linear drift | Too polished, too designed, no attitude |
| Parallax gradients | Holographic marketing energy, not punk print energy |
| Auto-playing carousels | The user's scroll should have the collage's chaos |
| Continuous heavy rotation | Motion sickness, not playfulness |
| Animated everything | One wobbling element per viewport maximum — chaos needs contrast |

# Layout Grammar

## Grid System

**The grid exists to be broken.** Sections are asymmetric, overlapping, and deliberately misaligned. Content collides with margins, bleeds off edges, and lands anywhere except where a baseline grid would put it. Internally:

- Full-bleed sections: 100vw width, `min-h-[100dvh]`, often layered 2-3 deep with hard edges
- Text blocks: rotated 1–3 degrees, force-ragged, offset to one side — never centered
- Overlaps: stickers, stamps, and handwritten notes sit on top of fields as a second layer
- Crops: type and images run to the viewport edge uncropped — deliberately cut off

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Saturated primary block (acid yellow, hot pink, or electric orange) |
| Text position | Oversized, force-ragged, collides with the margins; rotated 1–3 degrees |
| Headline size | `clamp(3rem, 12vw, 9rem)` — monumental, condensed, UPPERCASE |
| Text opacity | 90%+ — hard-stamped, nothing veiled |

```
┌─────────────────────────────────────────┐
│  SAY IT LIKE IT'S A                    │
│  LITTERBOX STICKER                         │
│                                         │
│  [ACID YELLOW FIELD]   (handwritten)      │
│  "no rules"  ✕  "trust nothing"          │
│  [HOT PINK STAMP]                      │
│  [ENTER] ────────────────►              │
└─────────────────────────────────────────┘
```

**The hero is a poster, not an interface.** One saturated field states the whole loud thesis. Type is the image; the poster is the wall. Nothing floats in whitespace — everything is stamped somewhere.

---

## Section Spacing

```css
--section-padding-y: clamp(3rem, 8vh, 7rem);
--content-block-max: clamp(320px, 60vw, 720px);
--edge-collision: -2vw; /* headlines may push past the margin */
```

**Spacing is punchy, not airy.** Sections stack hard against each other — two saturated fields separated by a thin ink bar or crop line, not by generous whitespace. The pacing is a wall of posters: each section slams into the next, and the only "pause" is a change of primary color.

---

## Layout Patterns

### Pattern 1: Full-Bleed Saturated Field + Giant Type
```
┌─────────────────────────────────────────┐
│  [Acid yellow field]                    │
│  SCREAM                                    │
│  (type set to the edge, clamouring)     │
│  [line of body, dense grotesque]        │
│  [sticker + hand-drawn note overlapping]│
│                                         │
+─────────────────────────────────────────+
```

### Pattern 2: Collage Stack — Fields Overlap
```
+───────────────┬─────────────────────────+
│  [COBALT      │  [LIME GREEN FIELD]     │
│   FIELD]      │  (rotated -2 deg)       │
│  HEADLINE     │  [hand-drawn arrow ⊙]    │
│  of the page  │  [sticker w/ ink border]│
+───────────────┴─────────────────────────+
```

### Pattern 3: Cropped Magnification
```
+─────────────────────────────────────────+
│   THEY                          │
│   TOOK  [an oversized word is cut      │
│   THE        off the top edge]         │
│   COLORS                              │
+─────────────────────────────────────────+
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full collage freedom — overlapping fields, rotated accents, marginal collision |
| **Tablet (768px)** | Fields stack flat, overlap reduced, type stays huge but leaves the tender page |
| **Mobile (375px)** | Vertical poster stack; one saturated field per section; rotations kept at 1deg |

**On mobile:** the collage stays — sticker, stamp, and scrawl should still appear — but overlaps are where they can touch without clipping body text on the small screen. The type is still enormous: max-size `clamp(2.5rem, 18vw, 9rem)`, still never centered.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Centered, grid-based layouts | Asymmetric, force-ragged, rotated blocks |
| Symmetric hero (type dead center) | Type to one edge, oversized, slightly rotated |
| Card grids with rounded corners | Saturated fields with harsh crop lines and offset blocks |
| Generous whitespace "calculated" between sections | Packed poster wall, fields sharing raw edges |
| Containers with borders everywhere | Hard-crop lines and ink stamps only where they read as print |
| Aligned/perfect type blocks | Ragged-but-intentional type that hits margins |
| Dense text areas | Text, but the type plays the role; poster scale never shrunk to hold copy |

# Texture & Surface

## Primary Texture: Risograph / Screen-Print

The texture IS the print. The dominant surface language is risograph and screen-print — ink that looks stamped through a mesh, slightly rough, slightly misaligned. Cheap print energy, not expensive finish.

| Quality | Description |
|---------|-------------|
| **Slight misregistration** | Color plates don't align perfectly — a hot pink field's edge sits 1-2px off its black outline |
| **Ink grain** | Denser visible grain in saturated fills, like ink that didn't fully cover |
| **Paper tooth** | The cream ground has paper grain, never smooth vector flats |
| **Crushed shadows** | Deep color goes near-black at the edges — ink pooling |
| **Stamps & marks** | Ink stamps, crop marks, screw/organizing lines printed on top |

**The goal:** Every surface should feel like it came off a noisy machine — not a gradient in Figma. The misregistration is the texture.

---

## Halftone Dots

```css
.halftone {
  background-image:
    radial-gradient(circle at center, rgba(17,17,17,0.35) 1.2px, transparent 1.3px);
  background-size: 6px 6px;
  filter: contrast(1.4);
}
```

**Purpose:** Halftone dot screens are the risograph signal. Use them as:
- Panel backgrounds at low density (dots become a gray field)
- Image treatments — posterize an image to hard threshold + halftone overlay
- Texture stamps that read as "this was printed" instantly after contact

The acute challenge: dense dots on saturated color create moiré. Keep the dot period large enough (5-8px) and the alpha moderate (0.25-0.35) so flats stay flat.

---

## Grain / Film Weirdness

```css
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,..."); /* feTurbulence noise */
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}
```

**Purpose:** A fine animated-free film grain over every saturated block. It gives the color physical weight — removes the "digital flat gradient" quality that makes bold color feel manufactured. The grain is always on top of backgrounds, never over body text (preserving readability). Opacity 0.04-0.06, fill nowhere near the eye.

---

## Sticker & Tape Effects

| Effect | Implementation |
|--------|---------------|
| **Sticker badge** | Irregular border-radius (slightly bubbled corners), 2px ink border, hard offset shadow (4px 4px 0 black) |
| **Paper tape** | Semi-transparent cream band at a 3-5deg rotation, slight paper grain, overlapping a corner |
| **Washi sliver** | Handwritten class labels on a translucent white plate |
| **Torn edge** | `clip-path` polygon with feather points on paper elements |

**Purpose:** Stickers are the collision layer of the collage — they sit on top of everything, slightly rotated, signed by a hand. A badge that says "CUT THIS" or "ISSUE #" is the style speaking. The drop shadows are HARD offsets (4px 4px 0), never soft Gaussian: soft shadows read "modern SaaS", hard offsets read "sticker slapped on a zine."

---

## Image Treatments

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **Posterize** | Crush gradients to 2-4 tonal steps — flat and vintage | Levels crush, index color |
| **Halftone** | Screen-dot overlay after posterizing | 5-8px dots, 0.25-0.35 alpha |
| **High contrast** | Crush midtones to pure ink/cream | Contrast +40 to +65 |
| **Saturation** | Pin forward the primaries, bleach the rest | Sat 120-140% on hue, -40% others |
| **Rough crop** | Irregular/deckle crop edges | Radial mask feather, 5-10% |

**The goal:** Imagery should read as a photocopied poster, not a photograph. Circles become rough, colors block out, edges tear. If an image looks smooth and photographic, it's been under-treated.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Saturated primary block + grain + (optionally) halftone dots |
| Color blocks | Hard offset shadows, 1-2% rotation, misregistered black outlines |
| Buttons | Bright fill, 2-3px ink border, hard 4px offset shadow |
| Stickers/badges | Texture stamps, hard shadow, squircle radius, rotation |
| Titles | Overlap grain + occasional paper-tape attachment |
| Dividers | Deep horizontal ink rules, hard crop-mark stamps |

**No soft shadows. No gradients for depth** — gradient = sneaky corporate sheen. Depth is made with hard offset shadows, crops, and rotation, like offset printing plates stacked on top of each other.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|-----------|
| Clean, vector-smooth surfaces | Grain, halftone, misregistration in every surface |
| Soft Gaussian shadows | Hard offset ink shadows (4px 4px 0) |
| Layers of depth fading to nothing | Flat stacks with crisp crop lines |
| Subtle, tasteful gradients | Flats that stay flat; the surface texture does the work |
| Photographic realism | Posterized, high-contrast, grain-crushed imagery |
| Unified gloss/glass | Mixed materials — paper, tape, stamp, ink stacks |
| "Realistic" shadows and depth | Deliberate, printable-looking depth constructions |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `anti-corporate` | The core stance — direct rejection of corporate minimalism |
| `saturated clash` | Clashing saturated primaries used intentionally, not accidentally |
| `risograph texture` | Screen-print grain, off-registration, ink bleed — the zine print look |
| `collage layout` | Overlapping, misaligned, mixed-media composition |
| `punk typography` | Typography that breaks every rule — mixed styles, all at once |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `acid color` | Electric, eye-searing accents — acid yellow, hot pink, electric orange |
| `risograph misregistration` | Offset color layers that don't perfectly align — visible print error as style |
| `halftone` | Dotted screen-print texture — stippled shadows and gradients |
| `sticker bomb` | Clustered graphic elements layered like stickers on a surface |
| `elastic easing` | Springy, overshooting motion — bounces past the target and settles |
| `wobble` | Slight shaky oscillation — the element never fully sits still |
| `hand-drawn elements` | Rough marker, pen, and scribble marks — imperfect by design |
| `stencil type` | Spray-paint stencil lettering — street/punk voice |
| `intentional misalignment` | Off-grid placement and rotated elements as deliberate composition |
| `grain` | Heavy paper/screen texture over everything — unpolished surface |

---

## Context Terms

| Term | Mood |
|------|------|
| `punk` | Loud, defiant, anti-establishment, unpolished |
| `zine` | DIY print culture — photocopied, stapled, hand-crafted |
| `rebellion` | Color and layout as protest against corporate polish |
| `youth` | Street, skate, music, subculture energy |
| `activism` | Posters, flyers, protest — message over aesthetics |
| `chaotic playfulness` | Bouncy, slightly chaotic motion — playful not broken |
| `imperfection` | Unpolished as the point — personality over polish |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `corporate minimalism` | The exact thing this style rebels against |
| `muted colors` | The palette must be saturated and clashing |
| `perfect alignment` | Misalignment is intentional composition |
| `professional polish` | Imperfection is the point |
| `neutral palette` | Every accent is loud — no quiet neutrals |
| `smooth gradients` | Flat ink blocks and halftones, not digital blends |
| `serious/formal tone` | The voice is irreverent and playful |
| `restrained typography` | Type breaks rules — bold condensed, handwritten, stencil together |

---

## Prompt-Ready Phrases

```
"flat saturated clashing color blocks — acid yellow, hot pink, electric orange, cobalt blue, lime green"
"risograph texture with visible misregistration on color layers"
"halftone dots for shadows and gradients (screen-print look)"
"sticker-bombed graphic elements — rotated, overlapping, clustered"
"collage composition — overlapping panels, intentional misalignment, off-grid"
"hand-drawn marker/pen elements layered over print blocks"
"oversized condensed display type at 120px+ — loud, unmissable"
"mixed typography — bold condensed + handwritten + stencil used simultaneously"
"elastic easing motion — springy bounce that overshoots and settles (600-900ms)"
"wobble animation — subtle oscillation, element never sits still"
"grain overlay across the whole page (heavy paper/screen texture)"
"sticker/tape visual details — physical DIY materials"
"no corporate minimalism, no muted colors, no perfect alignment, no professional polish"
```

---

## Banned Terms (Prompt Guard)

| Term | Why It Breaks the Style |
|------|------------------------|
| `corporate minimalism` | The exact thing this style rebels against |
| `muted colors` | The palette must be saturated and clashing |
| `perfect alignment` | Misalignment is intentional composition |
| `professional polish` | Imperfection is the point |

---

## Prompt-Ready Phrases (Locked)

```
"flat saturated clashing color blocks — acid yellow, hot pink, electric orange, cobalt blue, lime green"
"risograph texture with visible misregistration on color layers"
"halftone dots for shadows and gradients (screen-print look)"
"sticker-bombed graphic elements — rotated, overlapping, clustered"
"collage composition — overlapping panels, intentional misalignment, off-grid"
"hand-drawn marker/pen elements layered over print blocks"
"oversized condensed display type — 120px+ display headlines"
"mixed typography — bold condensed + handwritten + stencil used simultaneously"
"elastic easing — springy bounce that overshoots and settles (600-900ms)"
"wobble animation — subtle oscillation, element never sits still"
"grain overlay across the whole page (heavy paper/screen texture)"
"sticker/tape visual details — physical DIY materials"
"no corporate minimalism, no muted colors, no perfect alignment, no professional polish"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Streetwear & youth brands** | The loud, anti-establishment energy is native to street culture; saturated clashing colors signal a brand that doesn't play it safe |
| **Music festivals & concert promos** | Punk-poster energy, electric color and kinetic motion match festival lineups and live show posters |
| **Independent zines & print** | Risograph texture and hand-drawn marks are the literal language of indie publishing |
| **Record labels / indie musicians** | Raw, unpolished collage carries the underground credibility of DIY labels and artists |
| **Activist organizations** | Rebellion and provocation are the aesthetic — dissent reads instantly in clashing primaries |
| **Campaign microsites** | A one-off saturate poster-scape captures a cultural moment louder than any corporate template |
| **Youth / creator-facing apps** | Cultural moment tools, Gen-Z media and meme-adjacent products thrive on unpolished personality |

## Brand Personality Match

This style reinforces brands that are:
- **Loud** — energy is the feature, not a bug
- **Irreverent** — comfortable mocking the mainstream and corporate convention
- **DIY / unpolished** — imperfection and intentional mismatch are core values
- **Anti-corporate** — a direct rejection of minimal corporate polish
- **Culturally connected** — zine, streetwear and music-culture literacy matters

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate / B2B** | The anti-establishment energy reads as unprofessional to enterprise buyers |
| **Healthcare** | Clashing primaries and chaotic motion feel reckless, not reassuring |
| **Government / legal** | Defiance and rule-breaking are the risk profile, not the draw |
| **Finance / banking** | Saturated clash and zine collage scream volatility, not stability |
| **Luxury (understated)** | Refined restraint is the opposite of this aesthetic |
| **Long-form / content-heavy** | The collage layout and misalignment can't support dense editorial reading |
| **Brands needing trust** | Unpolished, saturated, intentionally misaligned image undercuts credibility |

## How to Decide

Ask: **"Does my brand want to feel loud, defiant and proudly unpolished — a punk poster, not a corporate deck?"**

If yes → Bold Anti-Corporate Color.
If no → Consider playful-interactive-maximal (if you want playful energy without the anti-corporate bite — or crave the jam-packed, game-like layout), typographic-brutalist (if the punch should come through type and grid), or flat-brutalist (if the defiance should stay austere and monochrome).

# Reference Gallery

## Live Sites

### Bold Anti-Corporate Color Reference Implementation
- **What works:** Saturated clashing primaries on oversized-block backgrounds, collage composition with intentional misalignment, risograph halftone overlay, bouncy elastic easing on sticker-style elements
- **URL:** Reference implementation — the canonical example of this style

### Off-White (off---white.com)
- **What works:** Industrial anti-luxury attitude, oversized signage typography, graphic sticker/zip-tie iconography, saturated contrast against brutalist framing
- **URL:** off---white.com

### Stüssy (stussy.com)
- **What works:** Streetwear pattern stitching, logo-heavy texture, saturated editorial photography, carefree anti-polish that still reads premium
- **URL:** stussy.com

### MTV VMA / Vevo-style Award Identity
- **What works:** Kinetic bold identities — electric accent color on loud backgrounds, oversized display type, springy motion, sticker/halftone texture across broadcast motion
- **URL:** Awwwards rebuilds / collater.al — search "MTV", "VMA", "award show identity" trends

### Independent Record Label & Zine Sites (e.g., Endless Row, Le Guess Who? festival)
- **What works:** Crisp risograph gradients, clashing primaries, scan marks, misaligned grid posters — green webbing and gambling on print media, directly transferable to web collage
- **URL:** endlessrow.com, leguesswho.com

## Key Visual References

### Color References
- **Acid yellow** — #D4FF00 (electric, near-neon, the loudest accent in the system)
- **Hot pink** — #FF2D95 (the other dominant saturated accent)
- **Electric orange** — saturated orange at full chroma for the third clash point
- **Cobalt blue** — saturated blue used to complete triadic clashes
- **Lime green** — saturated green when the clash needs a fourth voice
- **Kickers** — near-black, sticker black, or paper cream for collage relief
- **Rule:** clashing combinations are intentional — never muted, never corporate pastel

### Typography References
- **Big bold condensed** — oversized display, tight leading, uppercase shout headlines
- **Handwritten / marker** — hand-drawn annotations, circled words and scribble
- **Stencil / stencil slab** — industrial letterforms that read as stamped or cut
- **All mixed simultaneously** — mixed weights and styles stacked with intent
- **Oversized display type** is the visual center of mass — body is minimal

### Layout References
- **Collage composition** — overlapping layers, imperfect crop, mixed media pasted on
- **Intentional misalignment** — rotated slabs, dropped baselines, off-grid stacks
- **Sticker logic** — elements that look peeled and slapped on top of the base

### Texture References
- **Risograph texture** — visible registration misregistration, paper grain
- **Halftone / screen-print** — dot screen and screen-print bands
- **Hand-drawn marks** — marker highlights, handwritten notes, tear edges

### Motion References
- **Bounce** — elastic easing, overshoot on entry
- **Wobble** — continuous playful jiggle on stickers/badges
- **Slight chaos** — layered entrances and springy overshoot (fast, 400-600ms)

## Screenshot Notes

> When capturing references for this style, look for:
> - The color (must be saturated, clashing primaries — acid yellow, hot pink, cobalt, lime)
> - The layout (must be collage — overlapping, misaligned, never a clean corporate grid)
> - The type (must be oversized, mixed — condensed + handwritten + stencil, not one voice)
> - The texture (must show risograph, halftone or screen-print grain)
> - The motion (must be bouncy, springy, slightly chaotic — not smooth corporate ease)
> - The mood (must feel loud, defiant, punk — never polished or muted)