Heavy outlines
Borders of 2 to 4 pixels in pure black wrap cards, buttons and images. The outline is the main way the eye separates elements.
A web style that shows its structure on purpose. Every box gets a thick outline and a hard shadow, so the page looks like stickers slapped onto a pinboard.
Grab the kit Copy the promptNeo-Brutalism keeps the honesty of brutalist architecture and adds a sense of humour. Structure stays visible, and color does the talking.
Borders of 2 to 4 pixels in pure black wrap cards, buttons and images. The outline is the main way the eye separates elements.
Shadows have zero blur. They sit down and to the right as a solid black copy of the shape.
Saturated fills with no gradients. One bright accent per section, with black carrying the rest.
Chunky grotesques for headlines and monospace for details. Text sometimes rotates a few degrees to look handmade.
The name comes from concrete buildings. The web version arrived sixty years later.
Le Corbusier completes the Unité d'Habitation in Marseille. Its exposed concrete, béton brut in French, later gives the movement its name.
Critic Reyner Banham publishes an essay with this title about British architects such as Alison and Peter Smithson.
Early web pages look brutal by default: gray backgrounds, blue underlined links and system fonts straight from the browser.
Designer Pascal Deville starts a collection of websites that reject polish, and web brutalism becomes a recognised counter-trend.
Designers keep the raw structure and add bright color. Product brands like Gumroad adopt it, and the prefix neo separates it from the harsher original.
Neo-Brutalist motion is blunt. Elements drop in and snap to position with a small overshoot. Nothing fades slowly or floats.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Platforms for selling digital products use the style to feel independent and approachable.
Small teams like it because outlines and flat fills need no illustration budget.
Designers and cultural events borrow the do-it-yourself energy of zines and punk flyers.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Four loud fills on a cream base. Black does all the outlining, shadowing and text. Tap a swatch to copy its hex value.
:root{
--cream: #FFF4D6;
--yellow: #FFD93D;
--pink: #FF7AB6;
--sky: #5BC8FF;
--lime: #8BE36B;
--black: #000000;
}A heavy grotesque for display, a regular grotesque for reading, and monospace for small details and labels.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Archivo Black",Impact,sans-serif;
--font-b: "Archivo",Arial,sans-serif;
--font-m: "Space Mono",ui-monospace,monospace;
--fs-d: clamp(49px, 9vw, 107px);
--fs-1: 48.6px; --fs-2: 37.3px;
--fs-3: 28.7px; --fs-4: 22.1px;
--fs-body: 17px; --fs-sm: 13.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: -.01em;
text-transform: none;
line-height: 1;
}
/* fonts: Archivo Black, Archivo and Space Mono */The grid stays visible through borders. Keep gaps wide enough that every hard shadow has room to land.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Radius zero, border 3px, shadow offset 6px with zero blur. Keep one offset across the whole product.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 3px;
--shadow: 6px 6px 0 #000;
--shadow-sm: 4px 4px 0 #000;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Neo-Brutalism kit · Anti-Boring */
:root{
--bg:#FFF4D6;
--surface:#FFFFFF;
--surface2:#FFE9A8;
--fg:#000;
--muted:#3A3A3A;
--accent:#5BC8FF;
--accent-fg:#000;
--accent2:#FF7AB6;
--accent2-fg:#000;
--border:#000;
--bw:3px;
--radius:0px;
--radius-sm:0px;
--shadow:6px 6px 0 #000;
--shadow-sm:4px 4px 0 #000;
--font-d:"Archivo Black",Impact,sans-serif;
--font-b:"Archivo",Arial,sans-serif;
--font-m:"Space Mono",ui-monospace,monospace;
--h-weight:400;
--h-track:-.01em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:24px;
--pad:24px;
--focus:#FFD93D;
--ok:#1E6E2E;
--warn:#7A4B00;
--danger:#B3001B;
--info:#0050A0;
--field-bg:var(--surface);
--field-shadow:none;
--media:repeating-linear-gradient(45deg,#FFD93D 0 14px,#000 14px 17px);
--code-bg:#000;
--code-fg:#8BE36B;
--btn-case:none;
--btn-track:0;
--btn-weight:800;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.input:focus,.select:focus,.textarea:focus{box-shadow:4px 4px 0 #000;border-color:#000;background:#FFFBEA}
:focus-visible{outline:3px dashed #000;outline-offset:4px}
.badge{box-shadow:2px 2px 0 #000;border-radius:0;transform:rotate(-2deg)}
.alert{box-shadow:4px 4px 0 #000;border-left-width:12px}
.progress{height:1.2em}
.tab{border:3px solid transparent;border-bottom:0;margin-bottom:-3px;color:#000}
.tab[aria-selected="true"]{border-color:#000;background:#fff}
.pager a{box-shadow:3px 3px 0 #000}
.switch::before{border:2px solid #000;background:#fff}
.table-wrap{box-shadow:6px 6px 0 #000}
.table th{background:#FFD93D;border-bottom:3px solid #000}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#15130F;
--surface:#22201A;
--surface2:#2B281F;
--fg:#FFF4D6;
--muted:#CFC6AE;
--border:#FFF4D6;
--shadow:6px 6px 0 #FFD93D;
--shadow-sm:4px 4px 0 #FFD93D;
}
html.alt .btn:hover{box-shadow:6px 6px 0 #FFD93D}html.alt .badge,html.alt .pager a{box-shadow:3px 3px 0 #FFD93D}html.alt .alert,html.alt .table-wrap{box-shadow:5px 5px 0 #FFD93D}html.alt .tl li{background:#22201A;border-color:#FFF4D6;box-shadow:6px 6px 0 #FFD93D}html.alt .tl .yr{color:#000}html.alt .traits .card:nth-child(4n+1),html.alt .traits .card:nth-child(4n+3){color:#000}html.alt .table th{color:#000}html.alt .tab[aria-selected="true"]{background:#22201A}html.alt .stack i,html.alt .blk{color:#000}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a marketplace for independent zine makers in an authentic Neo-Brutalism style.
Palette: Cream #FFF4D6, Yellow #FFD93D, Pink #FF7AB6, Sky #5BC8FF, Lime #8BE36B, Black #000000.
Typography: Archivo Black for headings, Archivo for body, Space Mono for labels and prices.
Layout: Left-aligned hero with a stacked collage of rotated boxes on the right, a black marquee strip under the hero, cards on a visible 12-column grid.
Signature details: 3px black borders on everything, hard 6px offset shadows with zero blur, a few elements rotated 2 to 4 degrees, flat fills from a four-color palette on cream.
Components: Buttons lift on hover and slam down to zero shadow on click. Inputs get a hard shadow on focus. Badges look like tilted stickers.
Motion: Fast drops with overshoot using cubic-bezier(.3,1.6,.5,1). No fades, no floating.
Avoid: gradients, blur, soft shadows, rounded pill cards, thin hairline borders, pastel colors.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Every hard shadow should share one offset and direction. One stray angle looks broken.
Four bright colors on every screen tire the eye. Give long reading areas a calm background.
Mono looks raw in a label. Across a paragraph it slows reading.
When black outlines are everywhere, a black focus ring disappears. Use a dashed or colored outline.