Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← StylesCompare with another style

Brutalism, Web

Exposed structure, blunt typography, and the directness of the early web.

INDEPENDENT PUBLISHING / EST. 2014FREE TO READ. FREE TO KEEP.
PUBLIC
INDEX↗
01PDF
02TXT
03PDF
Common ground

A field guide to shared spaces: reading rooms, community gardens, and the people who keep them open.

2026 / PDF

3 publicationsLast updated: 16.09.2026

How it works

Color

InkDocumentLink blueLavenderYellow

Typography

Arial
Courier New
Times New Roman
Characteristics

Visible structure

Lists, rules, columns, and links remain prominent.

Unadorned surfaces

Simple fills and exposed text take precedence over decorative finish.

Blunt hierarchy

Large type and abrupt changes in scale can organize dense content.

Conventional controls

A raw appearance can retain clear navigation and predictable interactions.

Neobrutalist variation

The comparison adds colored panels, heavy outlines, and solid offset shadows.

Use it

Figma
Publication index
  1. Build a vertical Auto Layout frame with title, filters, and publication rows.
  2. Use a neutral background, system fonts, and underlined actions.
  3. Duplicate the frame and add colored panels, heavier borders, and solid offset shadows.
  4. Keep reading order, labels, and hit areas consistent between versions.
Starting points
  1. Build a working text index with clear links and divisions.
  2. Use type scale and spacing to make the structure visible.
  3. Compare a plain treatment with a separately considered neobrutalist version.
Research notes & sources

The term has loose boundaries. Pascal Deville's directory presents a broad visual field; NN/g distinguishes unadorned brutalism from deliberately disorienting antidesign. The comparison applies neubrutalism's colored panels, thick outlines, and hard shadows, which are not requirements of web brutalism. That polished strain has its own page.

Early-web precedents; named trend in the 2010s

Independent websites and digital design

The web

Brutalist Web Design

Related styles

  • NeubrutalismRaw web brutalism exposes the document; neubrutalism keeps the bluntness and makes it a polished, colorful component system.
  • Flat DesignShares simple surfaces but usually pursues a more uniform interface system.
  • MaximalismCan overlap with the more expressive end of web brutalism.
  1. Brutalist WebsitesPascal Deville
  2. Brutalism and AntidesignNielsen Norman Group
  3. Neobrutalism: Definition and Best PracticesNielsen Norman Group