UI Recipe

Neobrutalism

Neobrutalism is a bold, maximalist design trend — thick black borders, flat vibrant backgrounds, hard box-shadows, and zero border-radius. It's intentionally rough, loud, and impossible to ignore.

Card

The classic neobrutalist card — white background, heavy border, hard shadow, no rounding.

Hot

Brutal Card

Thick borders, hard shadows, no mercy. This is neobrutalism at its core.

.brutal-card {
  background: #fff;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 6px 6px 0 #000;
}

Button

Buttons follow the same rules — heavy border, hard shadow, and a satisfying press state that collapses the shadow.

.brutal-btn {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  transition: box-shadow 0.12s, transform 0.12s;
}
.brutal-btn:hover {
  box-shadow: 7px 7px 0 #000;
  transform: translate(-3px, -3px);
}
.brutal-btn:active {
  box-shadow: 1px 1px 0 #000;
  transform: translate(3px, 3px);
}

Composition

Mix cards, badges, and buttons on a bold background for a full neobrutalist composition.

New

Card One

Bold colours, hard edges, no apologies.

Pro

Card Two

Everything clashes on purpose. That's the point.