Brutalist / Editorial Web Design

When to use this

• You are building a portfolio, editorial, or cultural project where raw aesthetics serve the content.
• You want to strip away decorative polish and let structure, type, and contrast do all the work.
• You need to understand where the line is between intentional brutalism and just not designing.
• You are building something where visual friction is the point: the user should notice the design, not float past it.
• Do NOT use this when you need a clean Swiss grid with classical proportions; use swiss-editorial-grid instead.

Mental model

Brutalism in architecture meant exposed concrete, visible structure, and nothing decorative. On the web, this translates to: visible HTML structure, raw system fonts, harsh contrast, oversized or undersized type, and a refusal to smooth things over.

The critical distinction is intentionality. Brutalist design makes every "ugly" choice on purpose. A headline at 120px in Times New Roman that overlaps the body text is a composition decision. A default unstyled page is not brutalism; it is a missing stylesheet. The difference is visible in the details: a brutalist site still has considered spacing, a clear reading hierarchy, and functional interactions. What it lacks is decoration, polish, and the visual comfort of predictable layouts.

The appeal of brutalism for editorial and cultural sites is that it creates friction. Friction makes the user engage with the design itself rather than scanning past it. This is valuable when the design is part of the message (an art portfolio, a manifesto, an experimental publication). It is counterproductive for utility software, commerce, or any context where the user wants to complete a task without the interface demanding attention.

Three sub-genres exist. "Neo-brutalist" keeps harsh contrast and visible structure but adds color and playful geometry (think: thick black borders, bright fills, visible shadows). "Editorial brutalist" is monochromatic with extreme type hierarchy and sparse composition. "Default-web brutalist" uses the browser's default styles with minimal overrides as an aesthetic statement.