Raw, confrontational, unapologetic. Neo-Brutalism rejects the smooth veneer of modern UI in favor of thick borders, hard-offset shadows, monospace type, and colors that refuse to be ignored. Every element asserts its presence.
Background element - raw black
Mid layer - electric blue accent
Top card - assertive red presence
Cards use thick top bars as a header, white body areas, and offset drop shadows that assert their presence on the page.
Design that refuses to hide behind gradients and blur. Every element owns its space on the page.
3px solid black everywhere. No ambiguity, no softening.
Offset drop shadows that cast depth without blur.
Monospace and black-weight fonts at their loudest.
The soft gradients, the 24px border-radius, the gentle drop shadows - they're comforting lies. Neo-Brutalism tears away the varnish and shows you the material for what it is: pixels on a screen, nothing more, nothing less.
Continue Reading →A single line of CSS - offset-x, offset-y, blur 0, spread 0 - can give your entire UI a personality. No blur. No softness. Just cold, hard offset geometry.
Continue Reading →Use 3px solid black borders everywhere. They define where one element ends and another begins - no ambiguity, no blending, no fading away.
Offset shadows with zero blur radius. 5px right, 5px down, 0 blur, black. This is not a suggestion of depth - it's a statement of it.
Monospace and display fonts in bold or black weight. Uppercase everything important. No thin weights, no whispers - only assertion.
Primary, clashing, saturated. Yellow against black. Red against blue. Color should create tension that demands attention - not harmony that soothes.