Visual style reference · web UI aesthetic
Web Brutalism
A deliberately raw, unpolished web aesthetic using system fonts, default browser styling, high-contrast colors, and visibly intentional non-design.
Back to the visual style atlas01 · CSS hints
How to build it in CSS
font-family: system-ui or monospace; no border-radius; solid black or neon borders; default blue links; large blocky typography; visible grid lines; raw hover states.
02 · Coding-agent prompt
What to tell your agent
Build a brutalist web page with system fonts, no border-radius, raw solid borders, default blue links, and a deliberately unstyled appearance. Make the non-design feel intentional and bold.
03 · When to use
Good fits for Web Brutalism
Creative-agency sites; personal portfolios; event or exhibition micro-sites; designs that intentionally break conventions to signal independence.
04 · When to avoid
Skip Web Brutalism when…
E-commerce and banking; any interface where user trust depends on visual polish; accessibility-mandated projects where raw styling reduces clarity.
References
Sources
Frequently asked questions
Web Brutalism: common questions
Direct answers based on the reviewed behavior contract above.
What is the Web Brutalism visual style?
A deliberately raw, unpolished web aesthetic using system fonts, default browser styling, high-contrast colors, and visibly intentional non-design. It is one of 13 reviewed web UI visual aesthetics in this reference set.
How do I tell my coding agent to use this style?
Copy the prompt snippet above and paste it into your agent. The key CSS properties are: font-family: system-ui or monospace; no border-radius. Adjust colors and values to match your brand.
When should I avoid using Web Brutalism?
E-commerce and banking; any interface where user trust depends on visual polish; accessibility-mandated projects where raw styling reduces clarity. Always verify that the visual style serves the user task before committing to an aesthetic.
Name the UI element too