Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Neo-Brutalism

neo-brutalism

Add to comparison +
Visual stylesScope: Whole experienceneo-brutalism · v0.1.0

A direct, conspicuous digital visual language using pronounced outlines, hard shadows, and bold color blocks.

Interactive specimen · Fictional product FIELDNOTES
FIELDNOTESCITY / OBSERVE / EVERYDAY
COLLECT THE EVERYDAY

Look
closer.

On familiar streets, notice the everyday anew.

01 / WALK

Weekend walk

Rediscover the city along its old streets.

02 / BOOKS

A bookshop

Pause and make some time to read.

03 / DAILY

After the rain

Keep an ordinary moment in a note.

Recognizing it

  • Pronounced dark borders
  • Offset shadows with little or no blur
  • Strong contrasts in color blocks and typography

Concept boundary

This entry uses the contemporary UI community meaning. It should not be equated with architectural Brutalism or Web Brutalism.

When to consider it

  • The brand needs a conspicuous expression
  • The page can accommodate a strong visual rhythm

When to be cautious

  • Giving every secondary element equal visual emphasis
  • Assuming high-contrast colors automatically ensure accessibility

Tradeoff

The style is recognizable, but borders and shadows consume space; the number of emphasis levels needs restraint.

Conditional rules · Editorial advice

When Applying it to a complex applicationRecommendedMaintain a clear hierarchy and reserve distinct meanings for status signals.

Related entries

Swiss / International Typographic Style ↗Conditional alternative · Choosing the primary visual language

The expressive intensity differs, while content and semantic structure can remain the same.

Bento Grid ↗Works with · Emphasizing distinct content blocks

Style and layout are independent choices.

Sources and what they support

StyleKit · Neo-Brutalist ↗

The directory defines this UI style through heavy outlines, hard shadows, and high contrast. It is not historical or effectiveness research.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "tokens": {
    "surface": "#fff6d8",
    "ink": "#18231f",
    "accent": "#d7ef78",
    "radiusPx": 0,
    "shadow": "5px 5px 0 #18231f"
  },
  "tokenScope": "A recipe for this specimen, not a universal standard."
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.