WANT THIS LOOK?
Copy a prompt and generate brutalism with AI
Build me a complete, responsive business website in the NEO-BRUTALISM style — the exposed-honesty look of Gumroad, Figma's bold era, and brutalistwebsites.com: thick black borders, hard offset shadows, oversized shouting type, and colors that collide instead of harmonize. The structure IS the design; nothing pretends to be smooth. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this loud, confident look — a taqueria, a moving company, an indie SaaS, a boxing gym — 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 PALETTE, the TYPE pairing, and the overall LAYOUT APPROACH. 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) ── • Solid black borders on blocks (thick, ~2–6px). Hard offset shadows with ZERO blur (box-shadow: e.g. 6px 6px 0 #000) — never soft or blurred. Corner radius 0. • Flat, unblended color — NO gradients, NO tints, NO color mixing; each color sits alone in its own bordered container. • Oversized, heavyweight, UPPERCASE display type — it shouts, not whispers; unrefined, no delicate kerning. • Exposed honest structure — every meaningful element is a real bordered rectangle sitting on a visible grid; alignment is structural, edge-to-edge, not soft airy centered padding. • Motion is "stamp / press": elements slam in fast and settle (a quick translate, like a rubber stamp hitting paper), and buttons press down on hover (their offset shadow snaps smaller). Never soft fades, slow eases, or floats. Honor prefers-reduced-motion, and keep ALL content visible without JavaScript — never leave a section stuck invisible. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 for body, ≥3:1 for large/headline text. Choose the ink from each block's ACTUAL background — BLACK text on white/cream/paper/yellow/lime blocks; WHITE or near-white text on black/navy/blue/purple blocks. NEVER white text on a white/light card, and NEVER white text on a yellow/lime block (that's ~1:1, invisible). Re-check every card and colored panel on its own background. ── VARIABLES (choose one of each that fits my brand, then commit) ── • PALETTE — bring my own brand colors if I give them; otherwise choose a scheme. Whatever the hues, treat color as a high-contrast CLASH: two colors that fight rather than harmonize, plus black for borders/shadows/heavy type and one flat grey for muted text. Express it as tone and relationship — high saturation, primary-feeling values, flat and unblended, colors that visibly collide. Example combos (not required): signal-yellow & electric-blue on raw white · red & cyan · acid-green & hot-pink on black · orange & purple on cream. Never soften or blend them. • TYPE — one heavyweight display face + one plain body face, loaded via Google Fonts. Display, pick one: Archivo Black · Anton · Space Grotesk 700 · Syne 800 · Arial Black. Body, pick one: Space Mono · IBM Plex Mono · DM Sans · Inter. • LAYOUT APPROACH — choose one structural feel and commit: stacked full-width color bands; a dense bordered grid of boxes; a broken asymmetric collage where blocks butt and overlap hard; type-driven with few blocks and lots of raw ground; or marquee/ticker strips over a wall of cards. Also settle on your own hero composition, shadow offset size/direction, and overall density. ── MEDIA MODEL (code-native, not stock photography) ── Build most visuals from TYPE, BORDERS, and FLAT COLOR BLOCKS — oversized headings, bordered panels, big colored callouts, hard-edged badges and stickers, simple geometric marks. Where the business genuinely needs a photo (a product, a space, the team), frame it RAW inside a thick black border with a hard zero-blur offset shadow — never full-bleed, never rounded. 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 confidently; reduce a first-time visitor's risk with real proof (results, credentials, client names, guarantees — whatever is true for the business); and drive one clear next step — an enquiry, a booking, a quote, a call. 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 genuinely move a stranger toward enquiring, each with one clear job, in an order that builds understanding then trust then action. Include working navigation and a footer. • 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 neo-brutalism treatment. If a section only serves the style, cut it; if a section serves the goal but feels thin, flesh it out. • Real, tailored copy for MY business — blunt, confident, short, like protest-sign lettering, written to build trust and reduce doubt, not just to be loud. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the CONTRAST invariant enforced on EVERY section — especially cards and colored panels. On mobile, stack the blocks but keep the thick borders, hard shadows, and oversized type. • Apply the chosen palette, type, and layout approach to EVERY section, not just the hero.
Best for AI website builders — Lovable, v0, Bolt
Restyle my existing site into the NEO-BRUTALISM look — the exposed-honesty aesthetic of Gumroad, Figma's bold era, and brutalistwebsites.com: thick black borders, hard offset shadows, oversized shouting type, colors that collide. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so the scaffolding is visible and nothing pretends to be smooth. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand hues — carry my existing brand colors into the scheme rather than swapping in new ones. Just push them into the neo-brutalism color logic: flat and unblended, set in a high-contrast clash, with black for borders/shadows/heavy type and one flat grey for muted text. Then make one TYPE choice and COMMIT — a heavyweight display + plain body that suit my brand. ── INVARIANTS (never break these) ── • Solid black borders (~2–6px) on every card, panel, and section. Hard ZERO-blur offset shadows (e.g. 6px 6px 0 #000) — never soft. Corner radius 0. • Flat unblended color — strip every gradient, tint, and blended fill; each color stays alone in its own block. Preserve which brand color means what, just flatten it. • Headlines go oversized, heavyweight, UPPERCASE, unrefined — they shout. • Expose the structure — harden every element into a real bordered rectangle on a visible grid; remove soft gutters and airy centered padding in favor of blunt edge-to-edge blocks. • Motion becomes "stamp / press": a fast slam-in per section + a press-down button hover (offset shadow snaps smaller). Remove every soft fade, slow ease, and float. Honor prefers-reduced-motion and never leave a section stuck invisible; keep content visible without JavaScript. • Never: soft/blurred shadows, rounded corners, pastel or harmonized palettes, gradients, delicate kerned type. ── TYPE (pick one pairing to suit my brand, then commit) ── One heavyweight display (Archivo Black · Anton · Space Grotesk 700 · Syne 800 · Arial Black) + one plain body (Space Mono · IBM Plex Mono · DM Sans · Inter), loaded via Google Fonts. Wrap any existing image RAW in a thick black border with a hard offset shadow (squared corners, never rounded, never full-bleed); replace decorative gradients and soft icons with flat color blocks, bordered badges, or oversized type. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every block (≥4.5:1 body, ≥3:1 large; pick the ink from each block's ACTUAL background: black text on white/yellow/lime, white on black/blue; NEVER white on white or white on yellow). Restyle what already exists so every section carries the neo-brutalism 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 NEO-BRUTALISM style — the exposed-honesty look of Gumroad, Figma's bold era, and brutalistwebsites.com: thick black borders, a hard offset shadow, oversized shouting type, clashing unblended color. 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 pricing block, a services row, a testimonial wall, a booking call-to-action, a project showcase. If I don't name one, build a bold hero for a plausible business you invent that suits this loud 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 ── • Solid black border (~2–6px). Hard ZERO-blur offset shadow (e.g. 6px 6px 0 #000). Corner radius 0. Flat unblended color — no gradients or tints. Oversized heavyweight UPPERCASE headline that shouts. Motion is one "stamp" slam-in plus a press-down button hover; no soft fades or floats; content visible without JavaScript, honoring prefers-reduced-motion. • Never: soft/blurred shadows, rounded corners, pastel or harmonized palettes, gradients, delicate kerned type. ── VARIABLES (pick one of each, commit) ── • PALETTE — bring my brand colors if I give them; otherwise choose a high-contrast CLASH of two colors that fight rather than harmonize, plus black for border/shadow/type. Keep it flat, high-saturation, unblended. Example combos (not required): white + yellow & blue · white + red & cyan · black + acid-green & hot-pink · cream + orange & purple. • TYPE — one heavyweight display (Archivo Black / Anton / Space Grotesk 700 / Syne 800 / Arial Black) + one plain or mono support face, via Google Fonts. Build the section from TYPE, BORDERS, and FLAT COLOR BLOCKS. If it genuinely needs an image, use a real placeholder <img> framed RAW with a thick border and hard offset shadow — never a fake colored div standing in for a photo, never rounded, never full-bleed. Include a loud primary button with a hard offset shadow 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): pick the ink from the actual background (black on yellow/lime/white, white on black/blue), never white on yellow or light-on-light. Write real, tailored copy for the subject, not lorem.
Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude
Paste any prompt as-is — it builds a complete site with no edits. To make it yours, fill the “Your site” block with your business, pages, and goal; leave it blank and the prompt invents a fitting demo instead.
NEO-BRUTALISM — a composable style module for AI coding agents. Apply it to whatever content and purpose the site actually has; the look is fixed, the sections are not. The core provocation: expose the structure instead of hiding it. Thick black borders, hard offset shadows, oversized shouting type, colors that collide. Nothing pretends to be smooth. STANCE Design as the direct expression of structure, not the concealment of it. Every element is an honest bordered rectangle on a visible grid. Confident, blunt, physical — like pressing a real button, not a glass one. INVARIANTS (breaking one stops it being the style) • Solid black borders, ~2–6px, on every meaningful block. • Hard offset shadows with ZERO blur, e.g. box-shadow: 6px 6px 0 #000 — impossible to do by accident; the signature. • Corner radius 0. No rounding, anywhere. • Flat, unblended color — no gradients, no tints, no color mixing; each color sits alone in its own container. • Oversized, heavyweight, UPPERCASE display type — presence over refinement, no delicate kerning. • Exposed structure — blunt edge-to-edge blocks on a visible grid, not soft airy centered padding. • Motion is "stamp / press": fast slam-in per section, buttons press down on hover (offset shadow snaps smaller). No soft fades, slow eases, or floats. Content visible without JavaScript; honor prefers-reduced-motion. VARIABLES (choose one that fits, then commit across the whole site) • COLOR — bring the visitor's brand hues; if none, choose. Treat color as a high-contrast CLASH: two colors that fight rather than harmonize, plus black for borders/shadows/heavy type and one flat grey for muted text. Express it as tone and relationship — high saturation, primary-feeling values, flat and unblended. Example clashes (not required): yellow & blue · red & cyan · acid-green & hot-pink on black · orange & purple on cream. • TYPE — one heavyweight display (Archivo Black · Anton · Space Grotesk 700 · Syne 800 · Arial Black) + one plain/mono body (Space Mono · IBM Plex Mono · DM Sans · Inter). • LAYOUT — one structural approach: stacked color bands · a dense bordered grid · a broken asymmetric collage · type-driven with lots of raw ground · marquee strips over a card wall. Plus your own hero composition, shadow offset, and density. MEDIA Code-native: build visuals from TYPE, BORDERS, and FLAT COLOR BLOCKS — oversized headings, bordered panels, colored callouts, hard-edged badges. Where a real photo is needed, use a placeholder <img> framed RAW inside a thick border with a hard offset shadow — never full-bleed, never rounded, never a fake colored div standing in for a photo. SECTIONS Come from the site's purpose and content, not a fixed skeleton. Include whatever the goal genuinely needs, in a sensible order, and build each fully — one clear job, real content depth, proper hierarchy, the full style treatment. CONTRAST (hard requirement) Every text/background pair meets WCAG 2.2 AA — ≥4.5:1 body, ≥3:1 large/headline. Pick the ink from each block's ACTUAL background: black text on white/cream/yellow/lime, white on black/navy/blue. Never light-on-light, never white-on-yellow. NEVER Soft or blurred shadows · rounded corners · gradients, tints, or blended color · pastel or harmonized palettes · delicate kerned type · soft fades and floats.
Drop this into a project's instructions/skill file for a reusable reference, instead of a one-shot prompt.
THE CORNERS ARE THERE. WE WANT YOU TO FEEL THEM.