Get started
All interface styles
Surface & material
Free

Neo-brutalism

Thick black borders, offset hard shadows and flat blocks of colour, with nothing softened and nothing pretending to be a physical material.

Also called: brutalist, neubrutalism, hard shadow, raw web, anti-design

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Neo-brutalism changes

Surface material, borders, shape, depth, component layout, states, and motion.

Neo-brutalism specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Neo-brutalism applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: The shadow has no blur — it is a solid offset copy of the block. Press or focus the buttons and the block travels into its own shadow, so the state change is a position change, not a colour change.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Neo-brutalism to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Heavy 2–3px borders on everything, in one uniform colour
  • Hard-edged offset shadows with no blur, as if a copy sat behind the block
  • Flat saturated fills with no gradient anywhere
  • Square or barely-rounded corners, tight and consistent
  • Oversized type that treats headings as graphic objects

Best for

  • Launches, campaigns and portfolios that want to be remembered rather than trusted
  • Products with a stated point of view, where visible confidence is the message
  • Interfaces where state must be unmissable — the borders carry it for free

Avoid when

  • Financial, medical or enterprise contexts where the visual argument is calm competence
  • Long-form reading — the border density fights sustained text
  • Dense data tables, where every rule line multiplies into visual noise

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • The border colour is a non-text element and needs 3:1 against both the fill and the page — the usual failure is a black border on a dark section.
  • Offset shadows must not be the only difference between resting and pressed; move the block and change the border weight together.
  • Large flat colour blocks make text contrast a per-block calculation. Check every fill, not just the page background.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Raw, loud, confrontational: hard zero-blur offset shadows, thick solid borders, square corners, flat clashing fills.

Implementation bundle

What an agent needs in order to actually build Neo-brutalism on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Surface rules

The declarations that make the render grammar, stated as CSS.

  • Border: `2px solid hsl(var(--foreground))` on every surface, control and input. One weight, no exceptions — variation reads as a mistake.
  • Shadow: `box-shadow: 4px 4px 0 0 hsl(var(--foreground))`. Zero blur, zero spread; the offset IS the shadow.
  • Radius: `--radius: 0` or a flat 4px cap. Mixed radii break the drawn-object illusion.
  • Fills are flat `--primary`, `--accent`, `--secondary` and `--card` at full opacity. No gradient, no alpha, no tint layers.
  • Type: headings at 700–900 weight and tight tracking (`letter-spacing: -0.02em`), body left at kit defaults so the page stays readable.

Component rules

Nav, action, input, selection, card and status, one rule each.

  • Nav is a bordered bar with the active item inverted (foreground fill, background text) rather than underlined.
  • Primary action: `--primary` fill, foreground border, 4px offset shadow; on `:active` translate 4px down-right and drop the shadow to 0 so the block lands.
  • Inputs get the same border and a 2px inset shadow; the label sits above in uppercase at small size, never as a placeholder.
  • Selected state inverts the chip (foreground fill, background text) AND keeps the border. Unselected chips keep the border and lose the fill.
  • Cards are bordered blocks with a bordered header strip; the status sits in that strip as text on a flat fill.
  • Secondary action drops the fill, keeps the border and shadow — the hierarchy is fill, not size.

Responsive rules

What has to change as the viewport narrows for the style to survive.

  • Below 640px reduce the shadow offset to 3px and the border to 2px so blocks do not eat the gutters.
  • Blocks stack to a single column with a full 16px gutter; the offset shadow needs clearance or it clips against the viewport edge.
  • Oversized headings switch to `clamp()` with a floor near 28px — brutalist type overflows narrow screens before anything else does.

Fallbacks

The degraded paths: unsupported effects, weak shadows, reduced motion.

  • `prefers-reduced-motion`: keep the `:active` translate (it is a 1-frame position change, not an animation) but remove any transition timing.
  • In dark mode invert the border to `--foreground` as resolved by the kit; do not hardcode black, or the borders vanish on dark surfaces.
  • On forced-colors, drop the offset shadow and rely on `border` — hard shadows are not rendered in forced-colors mode.

QA checks

What to verify before shipping an interface in this style.

  • Every border clears 3:1 against the fill it sits on AND the surface behind it.
  • Press a button with the keyboard: the block moves and the focus ring is still visible outside the border.
  • Text on each coloured fill clears 4.5:1 — brand fills are where this fails.
  • At 320px no offset shadow is clipped by the viewport edge.

Agent tags

The vocabulary a coding agent can match this style on.

  • hard-shadow
  • thick-border
  • flat-fill
  • offset-block
  • high-contrast