1.3 · Aesthetic

Brutalism.

Raw, ugly-on-purpose, anti-corporate. Thick borders, primary colors, monospace, tilted cards.

What it is

Brutalist web design is intentionally raw, ugly-on-purpose, and anti-establishment. It rejects the polished corporate design of most tech companies and embraces thick black borders, stark primary colors (red, yellow, black), system fonts like monospace, and asymmetric or tilted layouts. It's the punk rock of web design.

How it works

No rounded corners. No gradients. No subtle shadows. Instead: solid 2–4px black borders on everything, backgrounds of pure yellow (#FFE600) or pure white, text in bold black, elements that are slightly rotated with transform: rotate, and a general sense that someone typed the HTML in Notepad in 1998. Paradoxically, it takes skill to do brutalism WELL.

transform: rotate()Tilts elements by a few degrees — a hallmark brutalism detail
Monospace fontFixed-width font like Courier that looks like a typewriter
No border-radiusSharp corners only — no rounded shapes anywhere
Primary colorsPure red, yellow, blue, black, white — no pastels or muted tones

Live demo

Live

I MAKE THE INTERNET
UGLY ON PURPOSE.

Portfolio of a designer who hates rounded corners, gradients, and the word "elevate."

01 / CASE

BANK FOR ANARCHISTS

Brutalist banking dashboard. 12% conversion lift over polished version.

02 / CASE

ZINE BUILDER

A web app for making print zines. Looks like the print zines.

03 / CASE

RESTAURANT MENU

A QR menu so loud the kitchen filed a complaint.

NO GRADIENTS · NO SHADOWS · NO MERCY · NO GRADIENTS · NO SHADOWS · NO MERCY · NO GRADIENTS · NO SHADOWS · NO MERCY · NO GRADIENTS · NO SHADOWS · NO MERCY ·

Copy this prompt

Prompt · 1.3 Brutalism
Build a brutalist portfolio website with a pure white #FFFFFF background. Use bold black borders (3px solid #000) on every card and section. Typography should be black and oversized (hero headline at 80px, font-weight 900). Accent color is yellow (#FFE600) used for hover states and highlighted sections. Add slight rotation (transform: rotate(-1deg) to -2deg) on some image cards. Use a monospace font for body text. No gradients, no drop shadows, no border-radius anywhere.

Example sites to study