Raw, but on purpose
Classic brutalism rejects polish — visible borders, monospace, no rounded corners, no soft shadows. The "elevated" version keeps the attitude but applies craft: a clear grid, deliberate type scale, and a single loud accent so it reads as bold rather than broken.
Hard edges
Thick solid borders and hard offset shadows — no blur, no rounding. Structure is the decoration.
Honest type
System and monospace fonts, big and unapologetic. The text doesn't pretend to be anything else.
Exposed grid
Show the layout's bones — visible cells, rules, and dividers instead of hiding them.
One sharp accent
Mostly black & concrete, with a single high-voltage color used with intent.
The brutalist card
A thick black border, a hard offset shadow (no blur), a monospace tag, and a heavy uppercase title.
Raw Block
No gradients, no soft shadows. Just border, weight, and contrast doing the work.
<article class="card"> <span class="tag">// module_01</span> <h3>Raw Block</h3> <p>Border, weight, and contrast do the work.</p> </article>
.card {
background: #fff;
border: 3px solid #111;
box-shadow: 8px 8px 0 #111; /* HARD shadow — no blur */
padding: 22px; /* no border-radius */
}
.tag { font-family: monospace; background: #ff5c00; color: #fff; padding: 2px 8px; }
.card h3 { font-weight: 900; text-transform: uppercase; }
Stark buttons
Monospace, bordered, and they invert instantly on hover — no transition, no easing. Blunt and immediate.
.btn {
font-family: monospace; text-transform: uppercase; font-weight: 700;
border: 3px solid #111; background: #fff; color: #111;
padding: 12px 24px;
transition: none; /* instant, not smooth */
}
.btn:hover { background: #111; color: #fff; } /* hard invert */
.btn.accent { background: #ff5c00; color: #fff; }
Exposed grid & oversized type
Show the structure: a bordered key/value grid with visible rules, and a headline that fills the screen.
FORM
.grid { border: 3px solid #111; }
.grid .row { display: grid; grid-template-columns: 120px 1fr;
border-bottom: 1px solid #111; } /* visible rules */
.grid .k { border-right: 1px solid #111; background: #ddd9cf; font-family: monospace; }
.big { font-size: clamp(2.4rem, 12vw, 6rem); font-weight: 900;
text-transform: uppercase; letter-spacing: -.04em; line-height: .85; }
A whole page in this style
The brutalist aesthetic assembled into a studio landing page — hard borders, mono type, an exposed work grid with grayscale photos, and a stark CTA.
<div class="page">
<nav>
<span class="logo">BRUT.STUDIO</span>
<span class="lk"><a href="#">WORK</a><a href="#">ABOUT</a><button class="nbtn">Hire us</button></span>
</nav>
<header class="hero">
<h1>WE BUILD<br><span>RAW</span> WEB</h1>
<p>// A design studio that makes loud, honest, structural websites. No fluff.</p>
</header>
<section class="work">
<figure><img src="p1.jpg" alt="Project one"><figcaption>01 / Identity</figcaption></figure>
<figure><img src="p2.jpg" alt="Project two"><figcaption>02 / Web</figcaption></figure>
<figure><img src="p3.jpg" alt="Project three"><figcaption>03 / Type</figcaption></figure>
</section>
<section class="cta"><strong>Got a project?</strong><br><a href="#">Start →</a></section>
<footer><span>© 2026 BRUT.STUDIO</span><span>HELLO@BRUT.STUDIO</span></footer>
</div>
.page { border: 3px solid #111; background: #ece9e1; } /* thick frame */
.nav, .work figure { border-bottom: 3px solid #111; } /* exposed rules */
.hero h1 { font-weight: 900; text-transform: uppercase;
font-size: clamp(2rem,9vw,4rem); line-height: .85; }
.work { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
.work img { filter: grayscale(1) contrast(1.1); } /* stark photos */
.cta { background: #111; color: #fff; text-align: center; }
.cta a { background: #ff5c00; color: #fff; border: 3px solid #fff; } /* one loud accent */
<img src> — the grayscale filter + thick borders keep the brutalist look no matter the photo. Free photos at Unsplash.Characteristics & components
The signals that make a design read as brutalist:
Thick borders Strong typography High contrast
Components to build
A block button, a large heading, a sharp-cornered card, and a visible grid — live first, then the code.
FORM
Zero radius, hard shadow.
<button class="block">Block</button> <h2 class="big">RAW<br><span>FORM</span></h2> <div class="sharp"> <strong>Sharp</strong> <p>Zero radius, hard shadow.</p> </div> <div class="grid"> <div class="hot"></div><div></div><div></div> <div></div><div class="hot"></div><div></div> </div>
.block { background:#fff; color:#111; border:3px solid #111;
box-shadow: 6px 6px 0 #111; /* hard offset shadow */
font-family: monospace; text-transform: uppercase; }
.block:hover { background:#111; color:#fff; } /* instant invert */
.big { font-weight:900; font-size:clamp(2rem,12vw,6rem); line-height:.85;
text-transform:uppercase; letter-spacing:-.03em; }
.sharp { border:3px solid #111; box-shadow:6px 6px 0 #111; border-radius:0; } /* sharp corners */
.grid { border:3px solid #111; display:grid; grid-template-columns:repeat(3,40px); grid-auto-rows:40px; }
.grid > div { border-right:1px solid #111; border-bottom:1px solid #111; } /* exposed rules */
.grid .hot { background:#ff5c00; } /* one loud accent cell */
Do & don't
Do
- Use thick borders & hard offset shadows
- Lean into system & monospace fonts
- Keep a strict grid and type scale
- Use one loud accent with discipline
- Keep contrast & tap targets accessible
Don't
- Add soft shadows, gradients, or rounding
- Mistake "messy" for brutalist
- Let elements sit on no grid at all
- Use ten accent colors
- Sacrifice readability for rawness
The takeaway
Elevated brutalism = hard borders, offset shadows, honest mono/system type, an exposed grid, and one sharp accent — all applied with craft and a real grid so it reads bold and intentional, not broken.