← Back to Styles
2014-present

Brutalist

A bold, raw aesthetic featuring stark typography, monolithic elements, and deliberately rough or unfinished appearances. Embraces digital constraints as design features.

Live Demo

🏗️

Interactive Brutalist Demo

Origins & History

Web Brutalism emerged around 2014 as a reaction against the homogenized, polished aesthetics of modern web design. The term derives from Brutalist architecture, which emphasized raw concrete (béton brut in French).

Pioneering websites like Craigslist, Bloomberg, and various avant-garde art portfolios embraced this anti-establishment aesthetic. Designers Pascal Deville and others documented the movement through projects like Brutalist Websites.

Brutalism challenges conventional usability principles, prioritizing authentic expression over user-friendly conventions. It represents a return to the raw, unfiltered nature of early web design while maintaining artistic intentionality.

Key Characteristics

  • Raw, unpolished aesthetics
  • Stark, high-contrast typography
  • Monolithic visual elements
  • Exposed structural elements (visible HTML/CSS)
  • Anti-design or deliberately ugly approaches
  • Focus on content over decoration

Why This Demo Is Authentic

This implementation faithfully recreates the Brutalist through careful attention to typography, grid systems, color usage, and compositional principles documented in the original movement. Every design decision is grounded in historical research.

Style Guide

Color Palette
Typography

Times New Roman

Secondary: Courier New

Brutalist design often uses default system fonts or intentionally 'ugly' typefaces. Oversized,...

Grid

Intentionally broken or asymmetric grid structures