DIY PUNK -- A Design Manifesto

THE MANIFESTO

Every design choice signals that the creator made it themselves -- with scissors, glue sticks, a photocopier, and sheer defiance. The aesthetic values authenticity over craft, urgency over refinement, and confrontation over comfort.

Where corporate design smooths every edge, DIY Punk tears them apart on purpose. Think zine covers, wheat-pasted flyers, hand-stapled pamphlets, and album sleeves that look like they were assembled in a squat at 3 a.m. -- because they were.

THIS page IS the AESTHETIC it DESCRIBES

^ the medium IS the message

pg. 01 // manifesto

Visual Characteristics

Core Motifs & Patterns

Ransom-note lettering -- individual letters cut from different newspapers, magazines, and printed sources, arranged into words with mismatched sizes, fonts, weights, and baselines
Xerox degradation -- high-contrast black-and-white imagery with visible photocopy artifacts: toner bleed, registration errors, white speckle, and crushed midtones
Cut-and-paste collage -- physically cut paper elements layered, overlapped, and glued with visible edges, tape marks, and uneven alignment
Safety pins, X marks, and anarchist symbols -- recurring punk iconography used as decorative punctuation
Hand-drawn elements -- crude illustrations, scratchy ink lines, doodles, arrows, underlines, stars, and exclamation marks
Crossed-out and defaced imagery -- existing images or text aggressively scribbled over, circled, or crossed out with marker
Staple marks and fold lines -- visual references to physical zine production (corner staples, center-fold creases)
Stencil spray-paint lettering -- blocky, military-style stencils with overspray halos and drip marks
Halftone dot patterns -- coarse halftone screens visible in photocopied photographs
Wheat-paste texture -- wrinkled, peeling paper layered on rough surfaces like brick or plywood
Torn paper edges -- deliberately ripped borders rather than clean cuts
Tape and glue artifacts -- visible adhesive strips, yellowed tape, dried glue smears holding compositions together
Provocative and subversive imagery -- detourned advertising, political slogans, skull motifs, barbed wire, and anti-authority messaging

pg. 02 // visual characteristics

Design Principles

Deliberately Amateur

The design must look like anyone could have made it; professional polish is the enemy.

Urgency Over Elegance

The message matters more than the medium; speed and intensity trump careful composition.

Chaos as Composition

Elements collide, overlap, and fight for attention; there is no orderly grid, only raw energy.

High Contrast, No Subtlety

Stark black-on-white with occasional violent color accents; no gradients, no soft transitions.

Anti-Hierarchy

Reject conventional visual hierarchy; let the viewer's eye wander and discover rather than be guided.

Handmade Authenticity

Every element should look like it was physically created, not generated digitally.

Confrontational Tone

The design should feel like it is shouting, demanding attention, and refusing to be ignored.

Imperfection as Ideology

Mistakes, smudges, off-center alignment, and visible process marks are not bugs, they are the entire point.

Subversion & Detournement

Repurpose mainstream media imagery by cutting, defacing, and recontextualizing it.

Reproducibility

The design should look like it can be cheaply and infinitely reproduced on a photocopier.

NO RULES

pg. 03 // principles

Color Palette

The Punk Palette

Xerox Black #0A0A0A

Copy Paper White #F5F0E8

Pure White #FFFFFF

Newsprint Gray #C8C3B8

Toner Gray #4A4A4A

Smudge Gray #8A8680

Punk Pink #FF1493

Safety Pin Red #CC0000

Hazard Yellow #FFD700

Emergency Orange #FF4500

Bruise Purple #6B0099

Marker Blue #0044CC

Slime Green #39FF14

Masking Tape #D4C9A8

Cardboard Brown #A0845C

Dried Glue #E8DFC8

Palette Approaches

Stark black-and-white dominance -- the core palette is monochrome; photocopiers do not print in color, and neither should most of your design
One violent accent color -- pick a single aggressive accent (pink, red, or yellow) and use it sparingly for maximum impact, as if someone attacked the page with a highlighter or spray can
No gradients, no opacity blending -- colors are flat, hard-edged, and absolute; analog reproduction cannot produce smooth gradients
Newsprint warmth -- backgrounds should never be clinical pure-white but rather the warm, slightly yellowed tone of cheap paper
Color as defacement -- accent colors should look like they were added after the fact: marker scrawls, spray-paint blasts, or highlighter streaks over existing black-and-white content
Photocopy color shift -- repeated Xeroxing shifts blacks to dark gray and whites to warm cream; embrace this degraded range

pg. 04 // color palette

Typography

Typeface Characteristics

Ransom-note construction -- each letter cut from a different source, producing wild variation in size, weight, style, and baseline within a single word
Mixed case chaos -- random alternation between uppercase and lowercase, sometimes within the same letter
Baseline irregularity -- letters bounce up and down, rotate slightly, and refuse to sit on a consistent line
Extreme weight contrast -- bold, black letters next to thin, spindly ones within the same composition
Stencil and spray-paint lettering -- blocky, military-derived stencil forms with overspray and drip marks
Handwritten scrawl -- urgent, scratchy handwriting with ballpoint pen, marker, or paint
Typewriter strike-through -- mechanical typewriter output with visible ink density variation, x-ed out mistakes, and manual corrections
Visible cut edges -- letters retain rectangular paper borders from their source material, emphasizing the physical cut-and-paste process

Recommended Web Fonts

Permanent Marker

THE QUICK BROWN FOX jumps over the lazy dog

Headlines, confrontational statements, zine titles

Rock Salt

The quick brown fox jumps over the lazy dog

Handwritten annotations, margin notes

Bungee

THE QUICK BROWN FOX JUMPS OVER

Stencil-style headlines, protest sign lettering

Bungee Shade

THE QUICK BROWN FOX

Oversized hero text, poster titles

Special Elite

The quick brown fox jumps over the lazy dog

Body text, manifesto content, typewritten passages

Courier Prime

The quick brown fox jumps over the lazy dog

Secondary body text, structured content

VT323

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Digital-punk elements, counter-culture tech

Staatliches

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Stencil-like headings, poster-style text

Faster One

THE QUICK BROWN FOX

Aggressive callouts, urgency-driven text

Creepster

The Quick Brown Fox Jumps Over

Dark punk variant headings, shock elements

Londrina Solid

The Quick Brown Fox Jumps Over The Lazy Dog

Friendly punk variant, zine headings

Archivo Black

The Quick Brown Fox Jumps Over

Strong headlines paired with lighter body

Rubik Mono One

THE QUICK BROWN FOX

Bold statements, section headers

Named Typefaces from the Era

FF Punk -- deliberately distressed, hand-damaged letterforms

Blackout -- heavy, bold stencil-like display face

Dead History -- hybrid serif/sans combining historical and modern forms (P. Scott Makela)

Magda Clean / Dirty -- layered type system with clean and degraded variants

Template Gothic -- derived from a laundromat sign stencil; widely used in 1990s punk-adjacent design

pg. 05 // typography

Layout Principles

Grid & Structure

NO GRID

Elements are placed by instinct, urgency, and available space

COLLAGE

Elements overlap, crowd, tilt, and compete

CHAOS

Fill every area with text, imagery, doodles, or texture

ROTATE

Nothing is perfectly horizontal or vertical

No grid -- DIY Punk rejects conventional grids entirely; elements are placed by instinct, urgency, and available space, not by mathematical alignment
Collage-based composition -- the layout is a physical collage translated to screen; elements overlap, crowd, tilt, and compete
Horror vacui -- fill every available area with text, imagery, doodles, stickers, or texture; blank space feels "corporate"
Asymmetric, off-balance weight -- heavy elements cluster in unexpected positions; nothing is centered unless ironically
Layered z-index stacking -- elements pile on top of each other like papers on a desk or posters on a wall
Rotated elements -- almost nothing is perfectly horizontal or vertical; 1-5 degree rotations on most elements
Variable-width content -- text blocks, images, and panels vary wildly in width and height with no consistent column structure
Edge-to-edge bleed -- elements crash into or extend beyond the viewport edges, as if the design is too big to be contained

Section Organization

Use torn paper edges between sections -- jagged, irregular clip-paths rather than clean lines
Apply visual layering -- sections overlap each other like pasted flyers on a wall
Create hierarchy through size and volume -- important things are simply BIGGER and LOUDER
Employ tape strips and staple marks as section connectors -- visual metaphors for physical assembly
Use mixed orientation -- some content blocks are horizontal, some vertical, some at angles
Apply margin scrawls -- handwritten annotations, arrows, and corrections in the gutters around main content
Embrace content overflow -- text and images that are partially cut off or extend beyond their containers
Use visible "layers" -- translucent overlapping paper sheets with different background tones to create depth

pg. 06 // layout

CSS Techniques

live demos below!!!

This background simulates cheap photocopy paper with toner speckle artifacts using layered radial-gradient patterns.

Xerox Paper Background

Radial gradients + SVG noise overlay

HALFTONE

Halftone Dot Overlay

Radial-gradient dot pattern at 5px intervals

SPRAY

Spray Paint Stencil

text-shadow blur + SVG displacement filter

TORN EDGE

Torn Paper Edges

clip-path: polygon() with irregular points

CUT HERE

PASTE THIS

LAYER UP

OVERLAP

Collage Layering

Absolute positioning + rotation + z-index stacking

TAPED ON

Tape Strip Artifacts

Semi-transparent rectangles with clip-path edges

More Techniques

Crossed-Out / Defaced Text

The design should be clean and corporate RAW AND REAL. We reject polished perfection beautiful chaos.

Ransom Note Lettering

ZINE PAGE LAYOUT

This element simulates a zine page with staple marks in the top-left corner and a center fold line running vertically. The slight rotation and border create the feeling of a physical hand-assembled document.

^ staple marks up there!

handmade diy only no rules

pg. 07 // css techniques

Materials & Textures

Physical DIY Punk materials and their web equivalents:

Physical Material	Web Equivalent
Xeroxed / photocopied paper	`filter: contrast(2.2) grayscale(1) brightness(1.2)` with SVG noise overlay
Cut newspaper clippings	Inline `<span>` elements with varied fonts, sizes, backgrounds, and slight rotation transforms
Masking tape / Scotch tape	Semi-transparent cream rectangles with `clip-path` for irregular edges and subtle `rotate`
Wheat paste on brick	Textured dark background with overlapping, slightly wrinkled white paper elements
Spray paint on wall	`text-shadow` blur halos with SVG `feDisplacementMap` for rough stencil edges
Safety pins	SVG icons or unicode symbols used as decorative list markers or divider elements
Stapled zine pages	Border + positioned small gray rectangles simulating staple marks
Ballpoint pen annotations	`font-family: 'Rock Salt'` in blue color with slight rotation, positioned as overlays
Marker highlighter	`background: linear-gradient(transparent 50%, yellow 50%)` on inline text
Ripped / torn paper	`clip-path: polygon(...)` with irregular, jagged point distributions
Sticker residue	Semi-transparent rounded rectangles with slight blur
Crumpled paper	Subtle CSS noise texture with multiple soft `box-shadow` creases

pg. 08 // materials

Cultural References

The following define the DIY Punk visual language and serve as design references:

Jamie Reid's Sex Pistols artwork (1976--1978) -- the definitive DIY Punk visual canon; ransom-note typography, defaced royal portraiture, neon color overlays on photocopied collage
Sniffin' Glue fanzine (1976--1977) -- hand-typed, photocopied, and stapled; the archetypal punk zine aesthetic with raw typewriter text and hand-drawn illustrations
Linder Sterling's photomontage -- surrealist punk collage combining domestic and pornographic imagery with confrontational political intent
Vivienne Westwood & Malcolm McLaren -- provocative typography, situationist detournement, and shock imagery
Crass Records artwork (Gee Vaucher) -- dense, political photo-collage with stark black-and-white contrast
Dead Kennedys album art (Winston Smith) -- surrealist political collage in the American hardcore punk tradition
Riot Grrrl zines (1990s) -- handwritten manifestos, photocopied personal content, marker annotations, and intimate DIY production
Raymond Pettibon's Black Flag flyers -- stark black ink illustrations, hand-lettered text, photocopied and wheat-pasted
Punk gig flyers & wheat-paste posters -- the ephemeral, disposable, mass-reproduced artifacts of local punk scenes worldwide

pg. 09 // cultural references

Related Aesthetics

Post-Punk

Artful, experimental evolution

Hardcore Punk

Intensified aggression

Web Brutalism

Modern digital descendant

Dada

Historical ancestor, anti-art

Industrial

Dark, mechanical textures

Minimal Wave

Lo-fi stripped-down cousin

Riot Grrrl

Feminist punk zine culture

Anti-Design

Broader rejection movement

Grunge

Commercial punk descendant

Zine Culture

The native production medium

Cubism

Fragmentation, multiple perspectives

pg. 10 // related aesthetics