Brutalist design: raw layouts and how to use them

Brutalist design is a style that shows its structure instead of hiding it: visible grids, default or monospaced type, hard black borders, flat colour and almost no ornament. The name comes from Brutalist architecture, usually traced to the French béton brut, raw concrete. On a website or poster, brutalism looks deliberately unpolished, which makes it stand out in a world of rounded cards and soft gradients. Used with care, it is still perfectly easy to read and navigate.

Where brutalism comes from: a short history

The idea started in architecture after the Second World War. Architects left concrete bare, showed how a building was made and favoured function over finish. Graphic and web designers picked up the attitude decades later, not the concrete.

What brutalist graphic and web design looks like

• Default or system type: Times, Arial, Courier and monospaced faces, often at one size with weight doing the hierarchy.
• Visible structure: borders around every block, grid lines shown, tables that look like tables.
• Hard edges: no rounded corners, no soft shadows, no blur.
• Flat colour: white, black, grey and one or two loud signal colours.
• Raw links: blue underlined links, plain buttons with a border.
• Dense or uneven layouts: content stacked edge to edge, or one huge element breaking the grid.

Type is where brutalism shows most clearly. A monospaced face says "made by hand, in code"; a plain serif at default size says "we did not bother with fonts", which is the point. Monospace fonts lists good choices if you want the look without relying on whatever the reader’s system has.

Brutalism and neubrutalism compared

Most of what you see called brutalist on product websites today is neubrutalism, sometimes written neo brutalism. It keeps the hard outlines and flat colour but adds friendliness: pastel or candy brights, chunky type and a solid offset shadow that makes cards look like they are sitting on the page.

.card {
  background: #fff36b;
  border: 3px solid #111111;
  border-radius: 0;
  box-shadow: 6px 6px 0 #111111; /* hard offset, no blur */
  padding: 24px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.card a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.button {
  background: #c4b5fd;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0 #111111;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}

.button:active {
  transform: translate(4px, 4px);
  box-shadow: none; /* the button sinks into its shadow */
}

How to use brutalist design without hurting usability

Brutalism is allowed to look rough. It is not allowed to be confusing. The strongest brutalist sites are blunt about where things are: big plain navigation, obvious links, honest headings. Ugliness by choice is a style; unreadable text is just a bug.

1. 1

   Pick one rule to break

   Maybe it is default type, maybe a clashing colour, maybe an uneven grid. Breaking every convention at once reads as broken, not brutal.

2. 2

   Keep contrast high

   Black on white or white on black is very brutalist and very readable. Grey on grey is neither. Check text with colour contrast and accessibility in mind.

3. 3

   Make links unmistakable

   Underlines and a distinct colour. Brutalism is one style where the old browser defaults are an asset.

4. 4

   Use structure as decoration

   Borders, rules, numbered sections and visible grids give the page its look, so you do not need images to make it feel designed.

5. 5

   Let one element be huge

   A giant headline or number breaking the grid gives a brutalist layout its tension. See bold graphic design for scale.

Who brutalist design suits

Brutalism tells people you care more about the content than the wrapper. That suits independent publishers, record labels, galleries, architects, developer tools and designers’ portfolios. It suits a spa, a jeweller or a children’s brand much less, because those customers are buying reassurance and calm. If you like the clarity but not the roughness, Swiss design shares brutalism’s love of the grid with far more polish.

You can also borrow brutalism in part. A raw, monospaced type system on top of a rich background, for instance, keeps the honesty while adding atmosphere. A Gradiently Mark works well behind that kind of plain type, because it keeps a calm area under the words and picks light or dark ink per line. Pair it with the layouts in landing page design for a site that feels both raw and finished.