Brutalism in web design: neo-brutalism, examples

In short

Brutalism in web design shows the structure instead of hiding it: visible grid lines and borders, huge type that runs off the edge, system and monospace fonts, flat colour at maximum contrast and hard shadows without blur. It grew out of fatigue with polished templates and has two branches. Raw brutalism looks like an unstyled page on purpose — Times, Arial, black lines on white. Neo-brutalism is friendlier: bright flat fills, thick black outlines, offset shadows and slightly rounded corners. The style suits portfolios, studios, music, fashion and bold product launches, and does not suit banks and medicine. It works as long as text stays readable and buttons look like buttons — and where people pay or fill in forms, the interface calms down.

One screen, three looks

The same first screen of an architecture studio. Switch between the smooth version, raw brutalism and neo-brutalism.

The content does not change — only the treatment. Raw brutalism removes everything decorative and leaves the structure; neo-brutalism keeps the structure but paints it in bright colours and adds hard shadows.

Where brutalism came from

Illustration in progress A raw brutalist website of an architecture studio: off-white page, black serif text, a huge cropped headline, thin black grid lines and one flat acid-lime block

Prompt for this image

Raw brutalist website homepage for an independent architecture studio, desktop screenshot in a minimal browser window, off-white background, black Times New Roman body text, a huge cropped Arial Black headline running off the right edge, thin black 1px grid lines dividing the page into uneven blocks, monospace labels in square brackets, black underlined links, one flat acid-lime block, no gradients, no shadows, no rounded corners, flat 2D UI design, sharp, high contrast, aspect ratio 16:9

The name comes from architecture: in the 1950s, buildings of raw concrete — béton brut — showed their structure without cladding. In web design the word appeared in the mid-2010s, when sites built from the same templates became indistinguishable, and designers started making pages that looked deliberately unfinished.

Behind the rough look is a simple idea: honesty of the material. A link looks like a link, a block is outlined, the grid is visible. When it is done with a system, the page is surprisingly easy to read.

Six signs of brutalism

Two or three of them are enough to recognise the style. All six at once make a manifesto.

01

A visible grid

lines are not hidden, blocks of different widths

RAW

02

Huge type

the headline runs off the edge

[ index ]
> 01_projects
> 02_studio

03

Mono and system fonts

labels like in a terminal

04

Thick borders

instead of shadows and halftones

05

A hard shadow

an offset without blur

06

Flat colour

no gradients, contrast at maximum

Neo-brutalism: the friendly branch

Illustration in progress A neo-brutalist landing page of a task app: sage-green background, cards and buttons with thick black outlines and hard offset shadows, lime and white fills

Prompt for this image

Neo-brutalist landing page UI for a team task-planning app, desktop screenshot, light sage-green background, cards and buttons with thick 3px black outlines and hard offset black shadows without blur, bold uppercase grotesque headline, flat fills in acid lime, soft grey-green and white, slightly rounded 8px corners, simple flat illustrations of checkmarks and arrows, playful but tidy layout, flat 2D UI design, crisp, high contrast, aspect ratio 16:9

In the early 2020s the style softened and moved to startups and product landing pages. It kept the thick outlines and hard shadows, but added bright flat fills, rounded corners and a playful tone. It is easier to read than raw brutalism, and it turns into a component system without effort: one border, one shadow, one radius for everything.

Neo-brutalism in components

Hover over the buttons and press them: the button rises over its shadow and then sinks into it. Type in the field — it also reacts.

Buttons — hover and press

Field

Email

Where brutalism fits

The louder the style, the more it depends on what people came for.

A designer’s or studio portfolio
Fits
The style itself shows boldness and taste.
Music, a festival, fashion
Fits
A loud brand, short visits, emotion matters.
A startup or SaaS landing page
Partly
The friendly neo branch; prices and forms stay calm.
Tools for developers
Partly
Mono fonts and a visible structure feel native.
An online shop
Partly
Brand pages and banners — yes; the catalogue, cart and checkout — calm.
A bank or insurance
Does not fit
Trust is built by calm and order.
Medicine and public services
Does not fit
People come anxious and in a hurry — clarity first.

Where the style breaks usability

The same festival announcement. In the first version the style eats the information, in the second it carries it.

Broken

the text drowns in the pattern, the button looks like a label

Loud, but readable

the pattern in its own block, text on a plain background, the button looks like a button

Brutalism in code: 2 examples

Neo-brutalism as three tokens and a button, and raw brutalism as a grid with visible lines.

Neo-brutalism

One border, one shadow, one radius — and the button sinks into its shadow when pressed.

neo-brutalism.css

:root {
  --nb-ink: #171817;
  --nb-accent: #E4FF4E;
  --nb-border: 3px solid var(--nb-ink);
  --nb-shadow: 5px 5px 0 var(--nb-ink);   /* an offset without blur */
  --nb-radius: 0.5rem;
}

.nb-button {
  min-height: 3rem;
  padding: 0 1.5rem;
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  background: var(--nb-accent);
  box-shadow: var(--nb-shadow);
  font: 700 1rem/1 system-ui, sans-serif;
  transition: transform 0.12s, box-shadow 0.12s;
}

.nb-button:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--nb-ink); }
.nb-button:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--nb-ink); }
.nb-button:focus-visible { outline: 3px solid var(--nb-ink); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .nb-button { transition: none; }
}

Raw brutalism

System fonts, a grid whose lines are the design, and a headline that is allowed to be too big.

raw-brutalism.css

body {
  margin: 0;
  background: #F8F8F8;
  color: #171817;
  font: 1.125rem/1.4 "Times New Roman", Times, serif;
}

/* The grid lines are the decoration */
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-top: 1px solid;
  border-left: 1px solid;
}

.grid > * {
  padding: 1rem;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

h1 {
  margin: 0;
  font: 700 clamp(3.5rem, 14vw, 12rem)/0.85 Arial, Helvetica, sans-serif;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration-thickness: 2px; }

.label {
  font: 0.75rem/1 ui-monospace, "Courier New", monospace;
  text-transform: uppercase;
}

7 rules of brutalism that works

01

Structure on display, but a system

A grid and a type scale stay, even if they look rough.
02

Contrast is a must

Text never lies on a pattern or a busy photo.
03

A hard shadow in one direction

The same offset for every element, without blur.
04

One or two fonts

A loud headline font and a plain one for text and labels.
05

Clickable looks clickable

Buttons have a frame and a fill, links are underlined.
06

Calm where people pay

Forms, the cart and checkout get quieter.
07

Rough, but not broken

Fast loading, a mobile version, focus visible from the keyboard.

Common mistakes with brutalism

Chaos instead of a system

Random sizes and offsets look careless, not bold.
Text on a pattern

The poster is loud, and nobody reads the dates.
Buttons that look like labels

People do not see where to press.
Desktop only

A huge headline breaks into letters on a phone.
Five accent colours

Neo-brutalism needs one bright colour and black, not a rainbow.
A brutal checkout

Where money is involved, people want calm and clarity.

Questions about brutalism

What is brutalism in web design?

A style that shows the structure of the page instead of hiding it: visible grid lines, thick borders, huge type, system fonts, flat colour and hard shadows.

How is neo-brutalism different from brutalism?

It keeps the thick outlines and hard shadows but adds bright flat fills, rounded corners and a friendly tone — it is easier to read and to turn into components.

Is brutalism suitable for a business site?

For a creative business — yes. Where trust and calm matter, such as finance or medicine, it is better to take only some of its techniques.

Which fonts suit brutalism?

For the raw branch — Times, Arial, Courier and monospace fonts. For neo-brutalism — a bold grotesque for headlines and a plain sans for text.

Is brutalism accessible?

It can be: high contrast and a clear structure help. Problems come from tiny monospace text, patterns under text and buttons that do not look like buttons.

How can I try the style without a redesign?

On one campaign page or one promo block: neo-brutal buttons and cards are easy to add and easy to remove.

In short

A designer’s or studio portfolio

Music, a festival, fashion

A startup or SaaS landing page

Tools for developers

An online shop

A bank or insurance

Medicine and public services

Neo-brutalism

Raw brutalism

Structure on display, but a system

Contrast is a must

A hard shadow in one direction

One or two fonts

Clickable looks clickable

Calm where people pay

Rough, but not broken

Chaos instead of a system

Text on a pattern

Buttons that look like labels

Desktop only

Five accent colours

A brutal checkout