Design Atlas
한국어
❖ Design styles

Web brutalism

웹 브루탈리즘

Raw, undecorated HTML on purpose — default fonts, square corners, blue underlined links left exactly as the browser renders them.

Also known as: Brutalist web designAnti-design
···
html
<div class="poster">
  <b class="tag">// NOTICE</b>
  <h1>RAW<span id="cursor">_</span></h1>
  <p>NO GRADIENTS. NO SHADOWS. NO APOLOGIES.</p>
  <a href="#" class="link">read more →</a>
  <button class="btn">SUBMIT</button>
</div>
css
body{background:#efefe8}
.poster{width:min(90%,340px);background:#efefe8;border:3px solid #111;padding:20px;
  font-family:ui-monospace,"Courier New",monospace;color:#111}
.tag{display:inline-block;background:#111;color:#efefe8;padding:2px 6px;font-size:11px;letter-spacing:.04em}
h1{margin:12px 0 8px;font-size:clamp(26px,7vmin,42px);font-family:Georgia,"Times New Roman",serif;
  font-weight:700;letter-spacing:-.01em}
#cursor{animation:blink 1s steps(1) infinite}
p{margin:0 0 14px;font-size:11px;letter-spacing:.03em;line-height:1.5}
.link{color:#1414ee;text-decoration:underline;font-size:12px}
.btn{display:block;margin-top:14px;background:#111;color:#efefe8;border:0;padding:10px 16px;
  font-family:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer}
.btn:active{background:#ff3b1f}
@keyframes blink{50%{opacity:0}}
js
const btn = document.querySelector('.btn');
setInterval(() => {
  btn.classList.add('press');
  btn.style.background = '#ff3b1f';
  setTimeout(() => { btn.style.background = '#111'; }, 220);
}, 2200);

Named after the 1950s architectural style that left raw concrete exposed, brutalism arrived on the web around 2014 as a reaction against overly polished "good design" — instead of hiding the seams, it puts them on display.

Visually that means system or monospace fonts, undecorated square boxes, saturated text on flat low-key backgrounds, and layouts that look almost unaligned on purpose. Many brutalist sites keep browser defaults intact (underlined links, default margins) rather than resetting them away.

It shows up on portfolios, art projects and experimental startup landing pages that want to signal "we're different." The line to watch is accessibility — low contrast and irregular alignment can't cross into actually being hard to read — and it rarely suits commerce or finance, where trust matters more than edge.

When to use

Use it for portfolios and art sites that want to lead with personality and experimentation. Avoid it where trust is the point — finance, healthcare, commerce.