Neo-brutalism vs. AI-average: when rough design wins over smooth design

16 minutes of reading · neo-brutalism · web design · trends · UI

There are two sites. One is perfect. Smooth gradients, thin shadows, soft rounded cards, single set icons, Inter 400 font on white background. Looks professional, clean, modern.

The second one is audacious. Fat black curbs 3-4px. Bright yellow background. Graphic font in 80px bold. Shadows are like a card magician – shifted explicitly and intentionally. The buttons look like they are cut out of cardboard.

The first site was done by AI. The second is no. And the second one is memorable.

Neo-brutalism is not just a visual trend. This is a structural response to the problem. When AI tools are optimized for “good” design, design that violates the rules of “good” becomes noticeable. That’s why rough design now wins over smooth.

## What is Neo-Brutalism

Original Brutalism in Architecture – 1950-70s. Raw concrete, function to shape, visible structure. Nothing superfluous. The integrity of the material.

In web design, brutalism emerged as a provocation: raw HTML pages, minimal CSS, a visible “internal structure” as opposed to a polished commercial web. Around 2014-2018.

**Neo-brutalism, 2020 interpretation. Not “bad design” or “no design.” These are deliberately applied principles: visible structural elements, a limited and bright palette, no imitation of depth (no blurring, no subtle shadows), rough boundaries, an obvious grid.

Keyword: intentionally. Accidental thick curbs are bad design. Fat curbs as a conscious choice - neo-brutalism.

## Why Neo-Brutalism Works Now

### Contrast with the norm

AI tools – Figma AI, Galileo, v0, Lovable – produce content that converges to a specific visual standard. This standard: soft shadows, rounded corners, neutral colors, Inter or similar grotesque, a lot of white space.

It's not a bad standard. It's just standard. And precisely because it's a standard, anything that's very different from it immediately stands out.

Neo-brutalism is far from the AI standard. Where AI softens, neo-brutalism is tough. Where AI rounds is neo-brutalism angular. Where AI uses neutral tones, neo-brutalism is bright. Contrast creates attention.

### Transmitting confidence

Soft, apologetic, “everyone-friendly” design conveys neutrality well. But neutrality is not remembered.

Neo-brutalism as an aesthetic says, “We’re not trying to please everyone.” It's a statement of position. In categories where confidence and point of view are values – design studios, media, creative agencies, technology products for designers – this works better than “convenient.”.

### Integrity of construction

Brutalism in architecture valued the “honesty of the material” – concrete looks like concrete, does not pretend to be marble. Web-neo-brutalism applies the same logic: elements look like elements, do not pretend to be three-dimensional objects.

Flat buttons with thick shadow create the illusion of volume - but in an honest way. It's not a thin shadow pretending to be real light. It's an obvious construction.

## The basic principles of Neo-brutalism in design

### Hard boundaries

Borders 2-4px in black or very dark color. Not thin lines are visible frames. Border cards are not shadow cards.

IN CSS:

border: 3px solid #000;

Instead:

box-shadow: 0 4px 20px rgba(0,0,0,0.08);

### Offset shadows

“Brutal shadow” is not a blur but a displacement. The hard rectangle is shifted 4-8px to the right and down. Creates visual volume without imitating real light.

.card {
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
}

When hovering - the displacement decreases, creating the effect of "pressing":

.card:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #000;
}

### Limited bright palette

One or two colors + black + white. But the colors are saturated. Not muted sage, but acid yellow. Not blue mist, but electric blue.

Logic: fewer colors, but each color carries the maximum load.

Frequent neo-brutalism palettes:

• Yellow (#FFE600 or brighter) + black + white
• Bright pink + black + white
• Lime + black + white

### Typography as a design element

In neo-brutalism, typography doesn’t “serve” design—it’s design. The headlines are huge. A font is often a Bold or Black type. The serifs work well – they contrast with pure geometric elements.

Text sometimes intersects with other elements, goes beyond the grid, is used as texture.

### Visible grid

In "regular" design, the grid is hidden - it's a tool invisible as a result. In neo-brutalism, the grid sometimes becomes visible: dividing lines, explicit columns, elements that clearly sit in the cells.

## Where Neo-Brutalism Works Where No

### It works

A designer who uses neo-brutalism says, “I know the rules well enough to break them.” It's a forensic signal.

Media and publications. Visually loaded publications, blogs with a point of view. Neo-brutalism creates a "journal" sensation.

Technological products for developers and designers. Audience that evaluates deliberate rule violation.

Early startups. Doing a “professional corporate” style at the idea stage is often impossible without a budget. Neo-brutalism allows you to look intentional - not "we just couldn't pay for a designer.".

Limited collections, merch, events. High memorability in the tape.

### It's not working

** Finance, medicine, law.** Categories where trust is built through traditional visual cues. Rigid curbs and acidic colors conflict with the feeling of “reliable and serious”.

Neo-brutalism is perceived as “niche” – not in a bad sense, but in the sense that not for everyone. If the target audience is all 18 to 65, that’s a problem.

Neo-brutalism works well for Landing Pages, cards, titles. In an interface with many tables and forms, it is tiring.

## Neo-brutalism in UI: Practical Applications

### Buttons

.button {
  background: #FFE600;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

.button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #000;
}

### Cards

.card {
  background: #fff;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
  padding: 24px;
}

### Navigation

Horizontal nav with rigid curbs between the elements. Active state is the background of accent color. Hover is a color/background inversion.

## Neo-brutalism vs Flat Design vs Glassmorphism

Glassmorphism is absolutely in the comfort zone of AI generation. Flat design, too. Neo-brutalism requires a deliberate choice of violations that AI does not make by default.

## AI and Neo-Brutalism: How to Use Claude

### Prompt: Create a Neo-Brutalism Design System

Help me create a neo-brutalism design system for [project type].

Project:
Type: [site/app/landing page]
- Audience: [who uses]
- Character of the brand: [three words]
Primary accent color: [color or select]

Create design tokens and CSS:
1. Color system: primary, secondary, accent, text, background
2. Borders (thickness, color, radius)
3. Shadow system (offset-x, offset-y, color for different levels)
4. Typographic scale (sizes, weights, line-height)
5. Spatial Scale (Spacing)
6. CSS for basic components: button (all states), card, input, badge
Format: CSS custom properties + class examples

### Prompt: Evaluate whether neo-brutalism is suitable for the project

Let’s see how good neo-brutalism is for our project.

About the project:
- What we do: [product/service description]
Audience: [who are users — age, profession, context]
Market Category: [B2B/B2C, industry]
Competitors and their style: [what the main players look like]
Design goals: [rememberability/trust/conversion/other]
Are there restrictions: [brand guidelines, corporate requirements]

Give an honest assessment:
1. How organic is neo-brutalism for this audience and category
2. Risks (which you may not like or distrust)
3. What are the opportunities (which can enhance)
4. Alternatives If Neo-Brutalism Doesn't Apply Completely - What to Take From It
5. If you recommend where to start (which element to make "brutal" first)

### Prompt: Convert existing design into neo-brutalism

I have the usual "smooth" design. Help convert it to neo-brutalism.

Current design:
- Colors: [Description]
Style of components: [cards, buttons, inputs – how they look]
- Typography: [fonts, dimensions]

Objectives of conversion:
- I want to keep:
I want to change what I want to do more.
- How radical the transition should be: [complete neo-brutalism/individual elements]

Give:
1. Specific changes for each type of component
2. CSS diff (before/after) for key elements
3. Color recommendation – what to save, what to enhance
4. The order of change: where to start to see the results quickly
5. What to check with users after changes

### Prompt: Write a description of neo-brutalism aesthetics for brief

Help write a description of neo-brutalism style for brief to a designer or developer.

Draft: [Description]
Our version of neo-brutalism:
- How radical: [soft/medium/hard]
Color Preferences: What You Like/Not
References you like: [description or examples]
- What you can't do:

Write a description for the brief that includes:
1. Philosophy (why this style for this project)
2. Specific visual characteristics (colors, typography, components)
3. What is “our neo-brutalism” vs generic (as we differ from standard neo-brutalism)
4. Examples of applications: home page, card, form, mobile version
5. What a designer should avoid to avoid going too hard or too soft