Techniques
Brutalism
Neo-brutalism is loud and honest: sharp corners, thick borders, hard offset shadows in solid black, and type that shouts. Where glass and clay are soft, brutalism is blunt. It reads as confident and a little punk.
Brutal card
Ship it
No gradients. No apologies.
Just borders, shadows, and nerve.
Source
<div class="s-brutal" style="max-width:360px">
<span class="s-brutal-tag">Ship it</span>
<p style="margin:.7rem 0 0; font-weight:700; font-size:1.05rem">No gradients. No apologies.</p>
<p style="margin:.35rem 0 0; color:var(--muted)">Just borders, shadows, and nerve.</p>
</div>Brutal buttons
The button slams into its shadow when pressed.
Source
<div class="s-row">
<button class="s-brutal-btn s-brutal-accent">Deploy</button>
<button class="s-brutal-btn">Cancel</button>
</div>Accent panel
Limited drop
Bold blocks of color, framed hard.
Source
<div class="s-brutal s-brutal-accent" style="max-width:360px">
<p style="margin:0; font-weight:800; text-transform:uppercase; letter-spacing:.03em">Limited drop</p>
<p style="margin:.3rem 0 0">Bold blocks of color, framed hard.</p>
</div>Copy it in
<div class="s-brutal">
<span class="s-brutal-tag">New</span>
<p>Raw and framed.</p>
</div>
<button class="s-brutal-btn s-brutal-accent">Go</button>The classes are .s-brutal (card), .s-brutal-accent (fill it with the accent),
.s-brutal-btn, and .s-brutal-tag. For a softer take on hard shadows, see
Retro UI.