Brutalism
Also called: Web Brutalism, Brutalist web design, Raw web
The browser’s defaults on purpose: Times and Arial, blue underlined links, 1px black boxes, grey bevel buttons and zero polish.
Design keywords
Say these words to ask for this style.
Web brutalism exposes the raw material of the web instead of decorating it. Pages look like unstyled HTML that someone pushed to the extreme: default serif body, huge plain sans headlines, link-blue underlines, visible 1px table borders around every block, grey outset buttons, monospace metadata and a visible column grid. No radius, no shadow, no gradient, no colour system beyond black, white, link blue, visited purple and a warning red. It reads as honest, anti-corporate and fast.
Best for
- Artist, architect and studio portfolios
- Zines, manifestos and independent publications
- Developer tools, docs and link directories
- Event and exhibition microsites
Avoid for
- Consumer brands that must feel friendly or premium
- Checkout and banking flows that need reassurance
- Audiences unfamiliar with web culture (it can look broken)
✓ Do
- Use #0000EE underlined links and #551A8B for visited/hover
- Draw every block with a 1px solid #000 border and 0 radius
- Let Times-like serif carry body text at 17–18px
- Use monospace for dates, IDs, counts and labels in [brackets]
✕ Don't
- No border-radius, drop shadows, gradients or blur
- Don’t add a brand colour palette — black, white and link blue only
- Don’t centre everything; keep the hard left edge
- Don’t animate anything decoratively
Not to be confused with
On mobile
Keep the 1px boxes, blue underlined links and serif body; the tab bar becomes a plain bordered row of text labels with the active one underlined. Touch targets stay 44px even though nothing looks like a button.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.