# Neo-Brutalism

> A friendly, commercial descendant of web brutalism that keeps its blunt boxes but adds candy colour: thick black outlines, hard unblurred offset shadows, flat saturated fills and chunky sans-serif type on conventional, usable layouts. Popularised by Gumroad's 2021 rebrand and named 'neubrutalism' around 2022, it spread across startup, creator-economy and indie product sites.

- Period: 2020–present
- Where: Global / networked, North America
- Origin: Startup, creator-economy and indie product websites, spread through Dribbble and UX Collective
- Branch: Digital native
- Also known as: Neubrutalism, Neobrutalism
- Page: https://stylogeny.com/styles/neo-brutalism/

## How it works

- Outline every card, button and input with a thick (2–5px) solid near-black border.
- Drop a hard, zero-blur shadow a few pixels down and right; shift the element into it on press so buttons feel physically clickable.
- Fill blocks with flat, saturated colours such as pink, yellow, mint and lilac on white or cream, never gradients.
- Set big, heavy grotesque or geometric sans headlines, with a monospace for labels and metadata.
- Keep the underlying layout conventional and usable, letting the raw styling supply the attitude.
- Break the box grid sparingly with tilted stickers, badges and starbursts.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Cards & bento tiles](https://stylogeny.com/design-choices/cards-and-bento-tiles/) (defining)
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (characteristic)
- [Dynamic asymmetry](https://stylogeny.com/design-choices/dynamic-asymmetry/) (occasional)
- [Broken grid](https://stylogeny.com/design-choices/broken-grid/) (occasional)

### Space & hierarchy
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)
- [Extreme scale contrast](https://stylogeny.com/design-choices/extreme-scale-contrast/) (characteristic)
- [Visual tension](https://stylogeny.com/design-choices/visual-tension/) (occasional)

### Typography
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic)
- [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (characteristic)
- [Type as image](https://stylogeny.com/design-choices/type-as-image/) (characteristic)
- [Monospace](https://stylogeny.com/design-choices/monospace/) (occasional)
- [Rotated & vertical setting](https://stylogeny.com/design-choices/rotated-and-vertical-setting/) (occasional)

### Colour
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (defining)
- [Full polychrome](https://stylogeny.com/design-choices/full-polychrome/) (characteristic)
- [Pastel](https://stylogeny.com/design-choices/pastel/) (characteristic)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic)
- [Fluorescent & neon](https://stylogeny.com/design-choices/fluorescent-and-neon/) (occasional)

### Form & shape
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (characteristic)
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (characteristic)
- [Squiggles & confetti](https://stylogeny.com/design-choices/squiggles-and-confetti/) (occasional)

### Surface & texture
- [Hard offset shadow](https://stylogeny.com/design-choices/hard-offset-shadow/) (defining)
- [Flat](https://stylogeny.com/design-choices/flat/) (defining)

### Ornament
- [Rules & bars](https://stylogeny.com/design-choices/rules-and-bars/) (characteristic)
- [Cosmic & celestial](https://stylogeny.com/design-choices/cosmic-and-celestial/) (occasional)
- [Emblems & badges](https://stylogeny.com/design-choices/emblems-and-badges/) (occasional)

### Imagery
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (characteristic)
- [Comic & cartoon](https://stylogeny.com/design-choices/comic-and-cartoon/) (occasional)
- [Flat vector illustration](https://stylogeny.com/design-choices/flat-vector-illustration/) (occasional)

### Medium & production
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (characteristic)

### Tone & intent
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (defining)
- [Rebellious & subversive](https://stylogeny.com/design-choices/rebellious-and-subversive/) (occasional)
- [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (occasional)

Avoids: Gradients, Frosted glass, Soft extrusion, Gloss & highlights, Chrome & 3D render, Luxurious & glamorous, Calm & contemplative

Palette: #fffdf5, #000000, #ff90e8, #ffc900, #23a094, #90a8ed

Typefaces: Space Grotesk, Archivo Black, Space Mono, Lexend

Known for: Gumroad rebrand (2021); neobrutalism.dev component library; 'Neubrutalism is taking over the web', UX Collective (2022)

## Where it comes from, and what it’s close to

- Grew out of: [Brutalist Web Design](https://stylogeny.com/styles/web-brutalism.md) (2014–present)
- Influenced by: [Memphis Design](https://stylogeny.com/styles/memphis.md) (1981–1988)
- Influenced by: [Pop Art Graphics](https://stylogeny.com/styles/pop-art.md) (1955–1975)
- Influenced by: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016)
- Alike in its design choices: [Material Design](https://stylogeny.com/styles/material-design.md) (2014–present), 56% alike
- Alike in its design choices: [Techno-Futurist Graphics](https://stylogeny.com/styles/techno-futurism.md) (1986–2002), 49% alike
- Alike in its design choices: [Corporate Memphis](https://stylogeny.com/styles/corporate-memphis.md) (2017–present), 49% alike
- Alike in its design choices: [Czech Poetist Book Design (Devětsil)](https://stylogeny.com/styles/czech-poetism.md) (1922–1938), 48% alike
- Alike in its design choices: [Roman-like Thai Typography (modern loopless Thai)](https://stylogeny.com/styles/thai-loopless-type.md) (1973–present), 47% alike
- Alike in its design choices: [Japanese Dense Web Design](https://stylogeny.com/styles/japanese-dense-web.md) (1999–present), 45% alike

## Real works

- [Neobrutalism components (neobrutalism.dev), homepage](https://web.archive.org/web/20240606105249/https://www.neobrutalism.dev/): Samuel Breznjak (ekmas), 2024 (archived 6 June 2024; library begun July 2023), Internet Archive Wayback Machine
- [RetroUI homepage (retroui.dev)](https://web.archive.org/web/20250123034330/https://retroui.dev/): Arif Hossain, 2025 (archived 23 January 2025; first archived October 2024), Internet Archive Wayback Machine
- [Gumroad homepage](https://web.archive.org/web/20220301011921/https://gumroad.com/): Gumroad, 2022 (archived 1 March 2022; rebrand launched 2021), Internet Archive Wayback Machine
- [MotherDuck homepage](https://web.archive.org/web/20230925071510/https://motherduck.com/): MotherDuck, 2023 (archived 25 September 2023), Internet Archive Wayback Machine

## Sources

- 'Neubrutalism is taking over the web', UX Collective (uxdesign.cc, March 2022)
- neobrutalism.dev documentation (neobrutalism.dev)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Neo-Brutalism”, https://stylogeny.com/styles/neo-brutalism/