---
name: Neubrutalism
slug: neubrutalism
category: aesthetic
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A loud style built from thick black outlines, saturated flat color,
  square corners, and hard offset shadows with zero blur.
aliases:
  - name: neobrutalism
    source: nngroup
  - name: neo-brutalism
  - name: new brutalism
  - name: hard shadow style
    source: community
  - name: sticker UI
    source: community
tags:
  - depth
  - retro
relations:
  contrastWith:
    - flat-design
    - brutalist-web-design
    - long-shadow
  variantOf: []
  partOf: []
  seeAlso: []
implementations: []
sources:
  - title: "NN/g: Neobrutalism: Definition and Best Practices"
    url: https://www.nngroup.com/articles/neobrutalism/
  - title: "NameThatUI: Neobrutalism"
    url: https://namethatui.com/styles/neobrutalism
demo: inline
exhibit: false
useWhen: black outline plus a hard unblurred shadow
---

The signature is the shadow. A neubrutalist surface casts a solid block of colour
offset a few pixels down and right with no blur and no falloff, which is not how light
behaves and is the point: it reads as a sticker laid on the page rather than as an
object floating above it. Around that sit a heavy outline, usually two to four pixels
of near black, flat saturated fill with no gradient, small or no corner radius, and
type that is oversized for the box it is in.

The name borrows from brutalist architecture by way of the deliberately raw websites of
the mid 2010s, but the current form is a much friendlier thing: playful, high contrast,
and easy to build, which is why it spread through indie products, developer tools, and
component libraries after about 2022. It carries a brand voice cheaply, since a whole
interface can be made recognisable with one border rule and one shadow rule.

What it buys in personality it can spend in usability. Everything shouts at once, so
the primary action has to win on colour or size rather than on contrast with quiet
neighbours, and a page of outlined boxes gives the eye no resting place. NN/g's
practical warning is the important one: the style's high contrast helps legibility,
but only if the saturated fills are checked against their text, since a bright yellow
or lime chosen for energy often fails behind small dark type. The press state is
usually the surface dropping onto its own shadow, which is worth keeping, because it
is the one moment the flatness admits it is a control.