WANT THIS?

Build me a complete, responsive business website in the GRUNGE / PUNK style — the DIY zine look of Jamie Reid's ransom-note Sex Pistols sleeves, David Carson's Ray Gun, and Thrasher: torn paper, photocopier grain, tape, halftone noise, and cut-up type assembled by hand, not aligned to a grid. Imperfection is the argument — this looks like a real human made it at 2am with scissors, glue, and a dying copier, not a brand template. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this raw, confrontational look — a record label, a skate shop, a tattoo studio, a dive bar, a gig promoter — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different businesses. A few dimensions are yours to choose: the exact ACID ACCENT, the TYPE pairing, and the overall COLLAGE LAYOUT. Pick one of each that fits my brand and COMMIT to it across the whole site — every option below is equally on-style, so don't second-guess the choice with your own taste. ── INVARIANTS (never break these — they define the style) ── • Cut-and-paste collage: elements torn, taped, and pasted by hand, deliberately off-grid — imperfect register, slight rotation, overlap. Broken alignment is proof of a human hand, not a flaw to fix. • Distress and texture everywhere: xerox grain, ink bleed, scratches, halftone dots, scan-line noise. Copy-of-a-copy degradation is the point — surfaces look photocopied and lived-in, never clean vector. • Brutal contrast: high-impact black and off-white / newsprint as the base, type running huge, heavy, and condensed, set UPPERCASE — sometimes deliberately hard to read, but the business's key message always legible. • Ransom-note energy: headlines can mix cut-out letters of different sizes/sources, taped scraps, and stamped marks — the confrontational collage look, not a tidy typeface. • Motion is TEAR / SMEAR / MISREGISTER: elements snap in crooked, smear like bad ink, and occasionally flicker with scan-line degradation — never ease smoothly like a polished UI. Honor prefers-reduced-motion, and keep ALL content visible without JavaScript. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 for body, ≥3:1 for large/headline text. On the near-black ground use off-white / newsprint text; on a torn white/paper scrap use near-black text; on a filled acid-accent panel re-check the ink and flip to black or white so the pair clears AA — never white on a light scrap, never a faint accent-on-black label under 4.5:1. Distressed texture may sit UNDER text but must not drop the ratio. ── VARIABLES (choose one of each that fits my brand, then commit) ── • ACID ACCENT — the base is always high-contrast black and newsprint white; add exactly ONE loud accent, bring my brand color if I give it, otherwise choose one. Express it as a single acid/shock hue used sparingly for maximum impact — a highlighter or a stolen-flyer marker, not a palette. Example accents (not required): acid yellow-green · blood red · hot pink · electric orange. One only; never a harmonized multi-color scheme. • TYPE — one heavy condensed display face + one condensed body face, loaded via Google Fonts, set uppercase. Display, pick one: Anton · Oswald 700 · Archivo Narrow 800 · Bebas Neue. Body, pick one: Roboto Condensed · Oswald 400 · Barlow Condensed. Let display headlines run huge and rough. • COLLAGE LAYOUT — choose one structural feel and commit: a taped-scrap flyer wall where blocks overlap and rotate; stacked torn-paper bands running full width; a ransom-note grid of misaligned cut-outs; a xeroxed poster with one giant headline and scattered supporting scraps; or a pinned cork-board of clippings. Also settle your own degree of rotation, texture heaviness, and density. ── MEDIA MODEL (photocopied and collaged, not clean stock) ── Build most visuals from TORN PAPER, TAPE, HALFTONE, XEROX GRAIN, and cut-up TYPE — stamped marks, highlighter scribbles, ripped edges, stapled scraps. Where the business genuinely needs a photo (a product, the space, the crew), run it through the style: high-contrast halftone or photocopied treatment, taped down crooked with a torn border, never a clean full-color rounded image. Generate marks and imagery appropriate to MY business, not a reuse of any demo. WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly clear who this business helps and what it offers; explain the value plainly and with attitude; build credibility with real proof (results, names, history, whatever is true); and drive one clear next step — an enquiry, a booking, tickets, a visit. Let the business and its brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal — whatever sections move a stranger toward acting, each with one clear job, in an order that builds understanding then credibility then action. Include working navigation and a footer, styled like taped-on scraps. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line), proper internal hierarchy, and the full grunge treatment — texture, collage, condensed type. If a section only serves the style, cut it; if it serves the goal but feels thin, flesh it out. • Real, tailored copy for MY business — blunt, urgent, confident, like a flyer stapled to a wall, written to build credibility, not just to look loud. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the CONTRAST invariant enforced on EVERY section — especially text over textured or accent panels. On mobile, keep the torn edges, grain, and condensed type; stack the scraps. • Apply the chosen accent, type, and collage layout to EVERY section, not just the hero.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the GRUNGE / PUNK look — the DIY zine aesthetic of Jamie Reid's ransom-note Sex Pistols sleeves, David Carson's Ray Gun, and Thrasher: torn paper, photocopier grain, tape, halftone noise, and cut-up type assembled by hand, off-grid. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so it looks assembled at 2am with scissors, glue, and a dying copier. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand color — carry my existing brand hue in as the ONE acid accent rather than swapping in a new one. Push everything else to the high-contrast black-and-newsprint base and use my color sparingly for shock. Then make one TYPE choice and COMMIT — a heavy condensed display + condensed body, set uppercase, that suits my brand. ── INVARIANTS (never break these) ── • Re-lay my existing blocks as cut-and-paste collage: torn, taped, slightly rotated, overlapping, off-grid — imperfect register on purpose. Break the clean alignment without moving any content. • Add distress and texture to every surface: xerox grain, ink bleed, scratches, halftone dots, scan-line noise. Make it look photocopied and lived-in, not clean vector. • Push headlines huge, heavy, condensed, UPPERCASE — ransom-note energy with cut-out mixed sizes and taped scraps where a plain heading was. • Base is high-contrast black and off-white / newsprint; my brand color becomes the single acid accent used sparingly. • Motion becomes TEAR / SMEAR / MISREGISTER: sections snap in crooked, smear like bad ink, occasionally flicker with scan-line degradation. Remove every smooth polished ease. Honor prefers-reduced-motion and keep content visible without JavaScript. • Never: clean rounded corners · smooth gradients · a harmonized multi-color palette · tidy centered grids · delicate polished type · white text on a light scrap or a faint accent-on-black label. ── TYPE (pick one pairing to suit my brand, then commit) ── One heavy condensed display (Anton · Oswald 700 · Archivo Narrow 800 · Bebas Neue) + one condensed body (Roboto Condensed · Oswald 400 · Barlow Condensed), uppercase, loaded via Google Fonts. Run any existing image through the style — halftone or high-contrast photocopy, taped down crooked with a torn border, never clean and rounded. Replace smooth icons and gradients with stamped marks, highlighter scribbles, and torn-paper scraps. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every block (≥4.5:1 body, ≥3:1 large): off-white text on black, near-black text on paper scraps, and re-check the ink on any accent panel so the pair clears AA; texture may sit under text but must not drop the ratio. Restyle what already exists so every section carries the grunge system consistently — same content, new skin.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the GRUNGE / PUNK style — the DIY zine look of Jamie Reid's ransom-note sleeves, David Carson's Ray Gun, and Thrasher: torn paper, photocopier grain, tape, halftone, and cut-up type assembled by hand, off-grid. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — a hero that lands who you are, a gig/product list, a proof block, a project showcase, a booking call-to-action. If I don't name one, build a loud hero for a plausible business you invent that suits this raw style. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy, and depth, not a title plus one thin line. ── INVARIANTS ── • Cut-and-paste collage, off-grid: torn, taped, rotated, overlapping scraps. Xerox grain, ink bleed, halftone, scan-line noise on the surfaces. Huge heavy condensed UPPERCASE headline with ransom-note energy. Motion is tear / smear / misregister — snaps in crooked, smears like bad ink, flickers; never a smooth polished ease. Content visible without JavaScript, honoring prefers-reduced-motion. • Never: clean rounded corners · smooth gradients · a harmonized multi-color palette · tidy centered grids · delicate polished type. ── VARIABLES (pick one of each, commit) ── • ACID ACCENT — base is high-contrast black and newsprint white; add exactly ONE loud accent, bring my brand color if I give it, otherwise choose one acid/shock hue used sparingly (acid yellow-green · blood red · hot pink · electric orange — examples, not required). One only. • TYPE — one heavy condensed display (Anton / Oswald 700 / Archivo Narrow 800 / Bebas Neue) + one condensed body (Roboto Condensed / Oswald / Barlow Condensed), uppercase, via Google Fonts. Build the section from TORN PAPER, TAPE, HALFTONE, XEROX GRAIN, and cut-up TYPE. If it genuinely needs an image, use a real placeholder <img> treated in the style's grain and taped down crooked with a torn border — never a fake colored div standing in for a photo, never clean and rounded. Include a rough bordered or stamped CTA where the section's job calls for one. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): off-white on black, near-black on paper, re-checked ink on any accent panel; never white on a light scrap. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude