Contemporary screen interpretation
Brutalism
A web approach that exposes structure through plain typography, hard boundaries, and direct links. Its architectural namesake is an analogy, not a prescription for bad usability.
What defines it
- Visible structure
- Hard edges
- Unembellished controls
What it asks of the project
- Reading & layout
- Compact spacing for scanning
- Visual emphasis
- bold · structural
- Implementation
- Mostly standard CSS; imagery may still need preparation.
- Images & assets
- Type, rules, and content can carry the page without images.
Color in use
A project archive with oversized titles, underlined links, and no entrance sequence.
Accent labelOpaque text/surface: 21.00:1 · Text/accent: 21.00:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
The board combines architectural imagery and forceful print typography. Translate its visible structure into web layout; a concrete building photograph alone does not demonstrate web brutalism.
View collected reference imagesBuild it
- Use explicit link text
- Separate sections with rules
- Make every action respond immediately
Typography
System sans-serif or monospace works well. Large size and explicit links matter more than a novelty font.
Watch out for
Confusing deliberate roughness with broken navigation, tiny text, or inaccessible contrast.
A working interpretation
Original CSS composition with the same content and controls used in every direction. Image-led styles need additional artwork for their full expression.
Open the full example →Hand it to an agent
Point your agent at this guide, or save the files below.
Check the result
- Confirm: use explicit link text.
- Confirm: separate sections with rules.
- Confirm: make every action respond immediately.
- Review specifically for: Confusing deliberate roughness with broken navigation, tiny text, or inaccessible contrast.