Stylogeny combining Material Design × Brutalist Web Design

Try

Style combination · Contrasts

Material Design × Brutalist Web Design

Where Material hides structure behind polished components, brutalism exposes it; one raw, default-styled element signals 'under the hood' in a polished product.

From the research on Material Design

Mix them and make something Material Design Brutalist Web Design

GridMaterial Design × Brutalist Web Design
A sample layout drawn from the recipe: shapes from Brutalist Web Design, their arrangement from Material Design, the finish from Brutalist Web Design. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Material Design Brutalist Web Design

Type from Brutalist Web Design
Colour from Material Design
Form from Brutalist Web Design
Composition from Material Design

Brutalist Web Design avoids illusion of depth: this is where the two pull against each other, which is the point of the contrast.

Surface from Brutalist Web Design

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Brutalist Web Design

Grid

Newsreader; Brutalist Web Design used Times New Roman and Courier New and system monospace

Text · Material Design

Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021).

Inter; Material Design used Roboto and Google Sans

03

The colours

The ground and leading colours come from Material Design, with a counter-accent from Brutalist Web Design. The ink reads on the ground at 4.5:1 or more.

Material Design Brutalist Web Design

  • #fafafa ground · 36%
  • #212121 ink · 14%
  • #ffc107 accent · 18%
  • #ff0000 accent · 14%
  • #ff4081 accent · 10%
  • #0000ee accent · 8%

As CSS

:root {
  --ground: #fafafa;
  --ink: #212121;
  --accent-1: #ffc107;
  --accent-2: #ff0000;
  --accent-3: #ff4081;
  --accent-4: #0000ee;
  --font-display: "Newsreader", serif;
  --font-text: "Inter", sans-serif;
}

04

The two styles

A plant-care homepage titled Sproutly features a large “Greener Days” headline beside an illustrated potted plant and light, water, and growth indicators. Below are four feature links and four colorful plant-category cards showing tropical plants, a snake plant, a trailing plant, and a succulent. 2014–present · North America, Global / networked Material Design Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021). A white website homepage titled “RIVER SONGS” uses enormous black serif lettering, blue underlined links, and thick black dividing rules. A high-contrast image of rippling water sits beside a blue latest-posts panel and text about river essays and field recordings. 2014–present · Global / networked, Central Europe Brutalist Web Design A reaction against templated, conversion-optimised web design that exposes the raw materials of the browser: default system fonts, blue underlined links, visible borders, unstyled forms and plain document flow. Named after architectural Brutalism by Pascal Deville's survey site brutalistwebsites.com (2014), it ranges from functional austerity to deliberately abrasive antidesign.

05

More combinations

With Material Design

With Brutalist Web Design

All 14 combinations with Brutalist Web Design

Every style combination