# Zine / Collage

Auch bekannt als: Zine-Design, Punk-Collage, Cut-and-Paste-Web, DIY-Ästhetik, Xerox-Stil, Riso-Stil  
Ära: Punk-Zines der 1970er, Riot Grrrl der 1990er; Web-Nutzung ab 2017 (Musik, Mode, Indie-Publishing)  
Seite: https://designforai.dev/de/style/zine-collage

## Merkmale

- ausgeschnittene Bilder mit rauen weißen Kanten, gerissenes Papier, Fotokopierkörnung
- Erpresserbrief-Typografie: gemischte Schriften, Größen und Schreibweisen in einer Headline
- Klebeband, Heftklammern, Sticker, Stempel, handschriftliche Notizen über Druck
- kontrastreiches Schwarzweiß mit ein oder zwei Riso-Farben (Neonpink, Blau, Orange)
- Layout ignoriert das Raster: überlappend, gedreht, gestapelt
- Halbtonpunkte und versetzt gedruckte Farbebenen
- Motion: Hover-Reveals, Bildwechsel, leichtes Zittern; nichts Glattes

Palette: #f1efe7 Papier, #111111 Tinte, #ff48b0 Riso-Pink, #0078bf Riso-Blau, #ff6c2f Riso-Orange, #ffe800 Riso-Gelb

Schrift: Anton oder Bebas Neue (schmale Versalien), Special Elite oder Courier Prime (Schreibmaschine), Permanent Marker oder Rock Salt (Marker), Oswald; mindestens drei in Headlines mischen; Fließtext in Courier Prime 16px

## Do

- gib jedem Bild eine raue ausgeschnittene Kante: clip-path polygon mit 10-14 unregelmäßigen Punkten, plus 4-6px weißer Rand
- versetze Farbebenen: dupliziere eine Headline in Riso-Pink, 3px versetzt, mix-blend-mode multiply
- halte ein verstecktes Raster darunter, damit die Collage trotzdem an etwas ausgerichtet ist

## Don't

- räum es nicht auf; perfekte Ausrichtung tötet es
- nutze nicht mehr als zwei Riso-Farben pro Seite
- nutze keine dezenten Grautöne; nur Schwarz, Papier und Farbe

Bekannt dafür: Riot-Grrrl-Zines, Sniffin' Glue, Poster der Sub-Pop-Ära, Nowness (teilweise), Rough Trade

## CSS-Seed

```css
:root{--bg:#f1efe7; --fg:#111111; --accent:#ff48b0; --accent2:#0078bf; --radius:0; --tape:rgba(255,255,255,0.55); --grain:0.12; --font:'Anton',sans-serif; --font-type:'Courier Prime',monospace}
```

## Prompt

Baue die Seite als Punk-Zine-Collage. Papier #f1efe7 mit einem Fotokopierkörnungs-Overlay (SVG feTurbulence bei opacity 0.12, mix-blend-mode multiply), Tinte #111111, nur zwei Riso-Farben: Pink #ff48b0 und Blau #0078bf. Headlines mischen Anton bei 96px Versalien, Special Elite bei 40px und Permanent Marker bei 56px in derselben Zeile, Wörter gedreht zwischen -4deg und 5deg; Fließtext in Courier Prime 16px. Dupliziere jede Headline in #ff48b0, 3px nach links und 2px nach unten versetzt, mix-blend-mode multiply, für den Versatzdruck. Bilder sind schwarzweiß mit Halbtoneffekt (radial-gradient-Punktmuster-Overlay bei 4px), ausgeschnitten mit clip-path polygon (12 unregelmäßige Punkte) und einem 5px weißen Rand, leicht gedreht, einander und den Text überlappend. Ergänze Klebebandstreifen (rgba(255,255,255,0.55) Rechtecke, gedreht) und einen Stempel-Badge in #0078bf. Buttons sind schwarze Rechtecke mit weißem Anton-Text und einer gerissenen Unterkante. Kein Radius, keine Schatten, kein weiches Easing; Hover wechselt Bilder sofort.