Neo-Brutalism

Visible structure, hard outlines, flat color and blunt type across interfaces, products and real-world systems

Part of the Energy & Excitement mood, alongside Synthwave and Pop Art. Began in the 2020s, on the style timeline.

Collect references in this style →Compare Neo-Brutalism with another style →See the Neo-Brutalism typefaces →On the timeline · 2020s
Record033-NB
AestheticNeo-Brutalism
ClassGeometric / Digital
StatusINGESTING
Neo-Brutalism aesthetic archive image
Archive plate · Neo-Brutalism
A mint, lilac and burnt-orange synthesizer shop interface fills a real desktop monitor with hard borders and square controls.
Dossier sceneScreen · 1/5
01
The record

What it is, when it works, who it is for, and where it already exists.

How to use it

Record 033-NB - when it works, who it is for, what it looks like

FIELD 01

When to use it

  • Distinctive digital products
  • Graphic retail environments
  • High-contrast wayfinding
  • Packaging with visible structure
FIELD 02

Perfect for

  • Creative software and hardware
  • Independent retail and hospitality
  • Public-facing service systems
  • Product launches and packaging
FIELD 03

What it looks like

  • Heavy black borders
  • Solid offset shadows
  • Controlled flat accent colors
  • Bold sans-serif type and visible grids

In the wild, Neo-Brutalism aesthetic real-world examples

Where this aesthetic shows up in the real world · ↗ opens the source site

Omoro Style GuideEvery aesthetic, every field on this page, in one PDF.
$8Get the guide →
02
The anatomy

Where Neo-Brutalism came from, what makes it recognisable, and the fingerprint it leaves.

History, Neo-Brutalism aesthetic history

2020–present · Web design, internet; roots in 1950s architectural Brutalism

Neo-Brutalism (also styled 'New Brutalism' in design contexts) emerged around 2020–2022 as a UI and graphic design aesthetic that rejected the refined, shadow-free design language of Google Material Design and Apple Human Interface Guidelines. Its signature is visible structure: heavy outlines, flat unmodulated color, blunt typography, explicit grids, and deliberately hard offset shadows. The approach now extends beyond screens into packaging, retail systems, product graphics, wayfinding, and campaign design.

The architectural Brutalism of the 1950s–1970s (Le Corbusier's Unité d'Habitation, Paul Rudolph's Art + Architecture Building) is a loose ancestor: both share an honest-materials aesthetic that refuses to hide structure behind cladding. But Neo-Brutalism's more immediate parents are flat design's backlash, the zine aesthetic of 1990s punk graphic design, and the anti-polish ethos of early internet web design. The Gumroad redesign (2021) and the Figma community around 2022 popularized the style for product design audiences.

Neo-Brutalism's appeal lies in its contrast to the homogenizing 'good taste' of Scandinavian-influenced startup design. Its ugliness is deliberate and communicative: 'we are not trying to hide anything,' 'we are not polished corporate,' 'we are raw and confident.' The style also solves an accessibility problem implicitly: black borders on white or pale-colored elements have very high contrast, and the flat drop-shadow makes click targets obvious.

Visible structure, translated from screens into objects and space.

Omoro dossier · 033-NB

Visual markers, Neo-Brutalism aesthetic visual markers

The visual DNA: what makes it recognisable

typography

See the fonts
  • Bold, heavy sans-serifs: often system fonts or classic grotesques used without apology
  • Uppercase type for headers, with normal weight body text: stark contrast
  • Black type on colored backgrounds, or reverse (white on black)
  • No typographic subtlety: size, weight, and contrast do the work, nothing else

grid

  • Explicit borders on all containers: no implied edges, everything boxed
  • Offset drop-shadow: solid color (usually black), no blur, offset 4–6px diagonal
  • Visible grid lines and dividers as design elements, not hidden infrastructure
  • Dense information layouts: no generous whitespace, elements close together

materials

  • White (#FFFFFF) or near-white as primary background
  • Flat accent palettes can shift by application: muted olive, aubergine, lilac, coral, celadon, chartreuse, or warm metallics
  • Black (#000000) for all borders, shadows, and text
  • Hard tonal breaks and unblurred shadows keep surfaces explicit; material texture can remain visible in physical applications

motifs

  • A heavy black outline around every panel, card, label and edge: the defining structural element
  • A hard offset shadow with no blur, on screen or thrown by a real object
  • Flat painted panels in one accent color each, with no gradient or gloss
  • Oversized blocky signage and numbered labels in bold sans-serif
  • Visible fixings, seams and grids left showing rather than hidden

Aesthetic profile

8-channel console with the fingerprint on its display. Save the card, or share the page

Aesthetic Profile
Neo-Brutalism
2020–present · Web design, internet; roots in 1950s architectural Brutalism
Attribute console · 033-NB
leans geometric, digital, expressive
8 CH
FIG. 1
MaximalMinimalDigitalAnalogExpressiveRestrainedWarmCoolFuturisticNostalgicStructuredChaoticLightDarkGeometricOrganic
01Minimal
Maximal30%
02Analog
Digital60%
03Restrained
Expressive50%
04Cool
WarmEVEN
05Futuristic
Nostalgic20%
06Structured
Chaotic30%
07Dark
Light30%
08Organic
Geometric70%
GeometricDigitalExpressive
Omoro · Attribute console · 033-NB
omoro.io/styles/neo-brutalism

Color Palettes, Neo-Brutalism color palettes and hex codes

5 color interpretations of this aesthetic

Neo-Brutalism
#111111 · #F3EBDD · #6B7F52 · #A990C5 · #D36B4F
Visible structure - flat accents on a hard outline
Pastel Brutal
#000000 · #FFB3C6 · #B3E5FC · #C8E6C9 · #FFF9C4
Soft neubrutalism: black border on pastel with a 4px shadow
Dark Brutal
#000000 · #111111 · #282828 · #FFFF00 · #00FF88
Night-mode neubrutalism: electric signals on jet black
Earth Brutal
#000000 · #8B4513 · #D4A017 · #6B8E6B · #F5F0E0
Brutalism meets the natural: raw border on warm earth
Omoro
#090909 · #3155E7 · #E72C7B · #EF6A2C · #F3C917
The Omoro brand system: black editorial ground and the four-color signal rail
Omoro Palette Pack575 curated palettes across every aesthetic, 5 export formats.
$8Get the palettes →

Adjacent Palettes, styles related to Neo-Brutalism

The colour of the styles sitting closest to this one

Punk
Swiss / International
Bauhaus
Vector Minimalism
EnergyRebellion
03
The direction

How to shoot it, how to prompt it, and how to board it.

Photo Direction

How to shoot this aesthetic

"Structure left showing: hard outlines, flat color and blunt type, from the screen out into the street"

Shot list

  • A Neo-Brutalist storefront shot straight on: flat painted panels, heavy black outlines, oversized bold signage and visible fixings
  • A real desktop monitor showing a Neo-Brutalist shop interface, bordered cards, square buttons and flat mint, lilac and coral panels filling the screen
  • Personal-care packaging arranged as a full-bleed still life: blocky labels, outlined bottles and tubes, flat aubergine, mint and peach

Lighting

Even, frontal daylight or a large soft source, bright enough that flat color reads flat; let hard objects throw one crisp shadow, never a gradient or glow

Omoro Director's Briefs151 photo shot-lists like this one, ready to shoot from.
$8Get the briefs →

Generative Prompt

Drop this into Studio to generate in this aesthetic

Neo-Brutalism aesthetic with visible structure, hard black outlines, flat unshaded color blocks, blunt bold sans-serif type, hard offset shadows with no blur, a near-black and bone base with controlled flat accents of olive, lilac and burnt coral

Paste as-is, or append your own subject
Variant 1 of 8Same style, a different picture each time. Hold a subject or a setting, or write your own, to vary only the rest.

Neo-Brutalism aesthetic with visible structure, hard black outlines, flat unshaded color blocks, blunt bold sans-serif type, hard offset shadows with no blur, a near-black and bone base with controlled flat accents of olive, lilac and burnt coral. Photograph: a neo-brutalist storefront shot straight on: flat painted panels, heavy black outlines, oversized bold signage and visible fixings. Set in street kiosk, market stall or coffee cart. Shot wide, the whole scene with room around it, even, frontal daylight or a large soft source, bright enough that flat color reads flat; let hard objects throw one crisp shadow, never a gradient or glow. Keep flat painted panels in one accent color each, with no gradient or gloss in the frame. Colour palette #111111 #F3EBDD #6B7F52 #A990C5 #D36B4F. Where a person appears: workwear or plain garments in one flat accent color against black or bone, simple geometric cuts, nothing glossy or patterned. Photographic, not an illustration. No text, no logos, no watermark.

Use as skill

The whole record as a portable skill for Claude, ChatGPT, Gemini, image and video models, or a human brief

The whole record, compiled into a skill another system can work inside: lineage, axes, palettes, type, materials, photography, verdicts and a critique checklist. Nothing is generated; it is the dossier, restructured.

Mood Board

The record applied to your project. The record's kit is free; your brand, references and plates come with membership

Mood board
The Neo-Brutalism board
8 frames · 4 selected
FIG. 4
Outline Black111111Bone GroundF3EBDDOlive Panel6B7F52Lilac BlockA990C5Burnt CoralD36B4F
Brand and references
IdleBrand and references open with membership
With membership: the brand's own facts and colours in every prompt, references carried into every frame, and the plates generated.
01 · Hero application
02 · Material and finish
03 · Palette in context
04 · Photography direction
05 · Pattern plate
06 · Object
07 · Environment
08 · Digital presence
Demo kit free, the rest with membershipThe record as a demo kit, free. Name a project and it is written for that
Omoro · Mood board · 033-NB
04
The judgement

Whether to use it, what it costs to do properly, and where it stands right now.

Creative verdict, Neo-Brutalism feasibility and strategic recommendation

Two written calls, seven meters, and when to walk away

Creative verdict
Should Neo-Brutalism be the call?
7 meters
FIG. 2
Assessment

Deliberate crudeness still requires precise construction. Hard shadows have to sit at a consistent offset and angle, or the page reads as broken rather than blunt, and the same goes for border weights. Pick a system and hold it everywhere. The bar is contrast: high-saturation blocks are easy, but keeping them accessible against black type is the actual work.

Verdict

Use it to say online and current, which is a short-dated claim. It arrived as a correct reaction to a decade of soft, rounded, indistinguishable SaaS interfaces; the open question is whether it is still a reaction or now just the new default, and it is already saturated in startup and portfolio work. Architects find the borrowed name careless, since it shares thick borders with concrete brutalism and almost nothing else.

Production cost
Low

Digital interface work only.

Creative difficulty
Medium

The 'ugly on purpose' move is well-known. Conviction is what sells it.

Execution difficulty
Low

Deliberately raw. Genuinely forgiving of imperfection.

Risk of misuse
Medium

Ugly on purpose without conviction just looks like a mistake.

Prevalence
Overused

Extremely common in startup and product design right now.

Longevity
Trend

A specific reaction to the smooth SaaS look. It will pass too.

Brand investment
Low

Interface work only.

Avoid if
The brand needs to feel premium or refined
Deliberately raw and unpolished. That reads as cheap in the wrong context.
The look needs to feel fresh, not familiar
Extremely common in product design right now.
Omoro · Creative verdict · 033-NB

Editorial Depth

A Pro feature: origins, practitioners, and pitfalls

Editorial depth
The Neo-Brutalism file
14 sections
FIG. 3
Context02Brands02Perception04Use04Index02
01Common MisconceptionThe principle beneath the surface
02Historical ContextOrigins, cultural moment, and reaction
03Brands That Accidentally Use This StyleNatural alignment, not category claims
04Brands That Perfectly Represent This StyleExceptional execution
05Psychological EffectHow visual decisions change perception
06Visual ChecklistInclude and avoid
07Creative FormulaThe visual system reduced to essentials
08Recognition SignalsHow to recognize it in two seconds
09When To Use This StyleContexts where the language performs
10Common Creative MistakesWhere imitation weakens the signal
11Best Brand ApplicationsIndustries with a natural advantage
12Creative Application AnalysisFit, feasibility, and production reality
13Related StylesClose languages and the key distinction
14Visual DNA SummaryThe sentence to remember
The editorial depth, with membershipOpening soon
Omoro · Editorial depth · 033-NB
05
The index

Neighbours, cross-references, blends, and the questions people ask.

Related concepts

Connected across the creative knowledge graph

Cultural relevance, Neo-Brutalism cultural relevance today

Where it stands now, and what it costs you to use it

Neo-Brutalism is a web aesthetic that borrowed a building name, and architects mostly find the borrowing careless. It shares thick borders and hard shadows with concrete brutalism and almost nothing else.

It arrived as a reaction to a decade of soft, rounded, indistinguishable SaaS interfaces, and the reaction was correct. Whether it is still a reaction or now just the new default is the open question.

It is already saturated in the startup and portfolio space. If you use it, it says you are online and current, which is a short-dated claim.

Cross-references

Brutalismparent aesthetic, more genuinely rawSwiss / Internationalboth use grid and systematic structureMemphisboth use flat color and bold bordersPunkshares anti-polish, raw-and-honest ethos

Compare

Neo-Brutalism vs BauhausNeo-Brutalism vs Swiss / International

Blend

Mix Neo-Brutalism with any style in the library, or see the pairs worth trying

Neo-Brutalism×
50%50%
38% alike
Neo-Brutalism referencePunk referenceNeo-Brutalism 50%Punk 50%

Merged palette

#111111

#F3EBDD

#FF0000

#6B7F52

#4B0082

Leads expressive, maximal, chaotic

Typography · from Neo-Brutalism

IBM Plex Sans over IBM Plex Mono

Materials

  • White (#FFFFFF) or near-white as primary background
  • Flat accent palettes can shift by application: muted olive, aubergine, lilac, coral, celadon, chartreuse, or warm metallics
  • Black (#000000) and white (#FFFFFF) as primary contrast pair

The calls this blend forces

These two disagree on 3 things, and a blend cannot average them: you pick a side. At this mix:

Digital or Analog? Neo-Brutalism is digital, Punk is analog. This mix lands analog.

Structured or Chaotic? Neo-Brutalism is structured, Punk is chaotic. This mix lands chaotic.

Geometric or Organic? Neo-Brutalism is geometric, Punk is organic. This mix lands geometric.

Use it

Neo-Brutalism aesthetic with visible structure, hard black outlines, flat unshaded color blocks, blunt bold sans-serif type, hard offset shadows with no blur, a near-black and bone base with controlled flat accents of olive, lilac and burnt coral (50%), infused with Punk aesthetic with DIY anti-establishment rawness, Vivienne Westwood and Sex Pistols-era London street style, aggressive high-contrast color-clash energy, rebellious anti-polish attitude, color palette strictly #111111 #F3EBDD #FF0000 #6B7F52 #4B0082, leaning digital over analog, structured over chaotic, geometric over organic, overall character: expressive, maximal, chaotic

Open in blends, with pairs worth trying →

About this aesthetic

What is Neo-Brutalism in design?

Neo-Brutalism is a graphic and UI design aesthetic defined by heavy black borders, flat unmodulated colors, and a crude solid-color drop shadow (no blur). It deliberately rejects the polished refinement of mainstream UX design trends in favor of raw, grid-visible, high-contrast layouts that read as honest and unfiltered.

What colors are used in Neo-Brutalism?

Neo-Brutalism usually anchors its palette with a dark structural color and a light ground, then adds one or more flat accents. Those accents can be vivid or muted. Recognition comes from hard separation, visible outlines, blunt hierarchy, and confident contrast rather than a fixed trio of primary colors.

What is the difference between Brutalism and Neo-Brutalism in web design?

Web brutalism (mid-2010s) was truly anti-design: intentionally ugly, HTML-default typography, no styling whatsoever. Neo-Brutalism (2020s) is a refined aesthetic that uses the visual signals of raw or unfinished design while still being carefully composed. It looks crude but is deliberate: Neo-Brutalism is styled brutalism.

Build with the neo-brutalism aesthetic

Every style in the library is broken down like this one: the palette, the typography, the materials and the lineage.

Explore the style library →