Brutalism

Digital Brutalism is a punk rock reaction to the polished perfection of modern web design. As the internet became dominated by friendly, rounded, soft user interfaces (like those of Airbnb, Google, and Apple), a counter-culture movement emerged that embraced ugliness, rawness, and structural honesty.

Named after the mid-20th-century architectural style characterised by exposed concrete (béton brut), Digital Brutalism strips away the facade. It reveals the HTML. It uses default system fonts (Times New Roman, Courier), conflicting colors, overlapping elements, and raw borders. It screams: “I am a website, not an app.”

The Aesthetic of Honesty

Why make a button look like a squishy gradient pill when a simple black rectangle works? Brutalism challenges the “best practices” of UX. It often ignores conventions like consistent padding or comfortable contrast ratios in favor of an aesthetic that feels hand-made and un-corporate.

It is particularly popular in the worlds of fashion, art, and architecture portfolios. It signals that the creator is avant-garde, unafraid to break rules, and values content over packaging. It is an “anti-design” statement.

Corporate Adoption: Neo-Brutalism

Interestingly, this rebellious style was eventually co-opted/refined by the mainstream into “Neo-Brutalism.” Brands like Gumroad and Figma’s early marketing adopted the bold borders, high contrast, and quirky typography but applied them with strict grids and perfect usability.

This “Corporate Brutalism” keeps the edge and personality of the raw style but removes the usability nightmares. It creates sites that feel trendy and distinctive but still convert users effectively. It is the safe version of the punk aesthetic.

Visual Gallery

Friction as a Feature

Standard UX design aims to remove all friction. Brutalism re-introduces it. By making a site slightly strange or difficult to navigate, you force the user to pay attention. You disrupt their “autopilot” browsing mode.

A brutalist site is memorable because it is jarring. In an ocean of identical bootstrap templates, the site that uses unstyled HTML links and neon green backgrounds is the one you remember next week.

Key Characteristics

1. Raw Materials: Exposed grid lines, default browser fonts, standard HTML elements.
2. High Contrast: Vibrating color combinations (blue on red, black on white).
3. Asymmetry: Deliberate lack of balance to create tension.
4. Overlapping: Elements that ignore boundaries and stack on top of each other.
5. Bold Typography: Massive, aggressive headings that dominate the viewport.