Contemporary screen interpretation
Neo-Brutalism
A contemporary web treatment combining assertive borders, flat color, and hard offset shadows. Its visual weight comes from outlines, spacing, and sharply separated color areas.
What defines it
- Heavy outlines
- Flat saturated fills
- Offset shadows
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
- Flat fills, borders, and hard shadows work without illustration.
Color in use
A workshop registration page with outlined tickets and a high-contrast booking button.
Accent labelOpaque text/surface: 19.71:1 · Text/accent: 7.41:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Look at the black outlines, flat fills, and offset panel shapes. Several examples use playful pastel color, showing why orange is not a required palette.
View collected reference imagesBuild it
- Choose a consistent border weight
- Use a hard shadow to signal elevation
- Keep labels literal and states distinct
Typography
Use assertive sans-serif headings with plain sentence-case control labels. Borders already provide emphasis.
Watch out for
Copying one brand as the definition of the style or using hard shadows on noninteractive decoration indiscriminately.
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: choose a consistent border weight.
- Confirm: use a hard shadow to signal elevation.
- Confirm: keep labels literal and states distinct.
- Review specifically for: Copying one brand as the definition of the style or using hard shadows on noninteractive decoration indiscriminately.