Updated: Jul 19, 2026
Version: v1.3.0
Sources: 2 sources
Status: Published

Terminology classification · Industry-coined trend

Neobrutalism

Saturated blocks, thick black outlines, and crisp shadows without blur.

Also called: neo-brutalism, neubrutalism, neo brutalist UI

Saturated fills, uniform outline, and hard shadow.

Understand

Definition and scope

Neobrutalism is a deliberately designed graphic language. It combines saturated fills, uniform dark outlines, hard offset shadows, and heavy typography so elements resemble printed stickers.

Scope: This style is not raw HTML. Its appearance is highly composed. Strict Web Brutalism remains the right category for native materials and exposed structure.

Recognize

The four defining signals should remain visible without relying on the style name.

Geometry

Thick outlines

Cards, buttons, fields, and images carry a visible uniform dark stroke.

Depth

Hard offset shadows

The shadow is a solid offset shape with no blur.

Color

Saturated color blocks

Yellow, pink, green, or cyan appear as direct flat fills on a light ground.

Typography

Chunky typography

Headings are wide, bold, and short, while body text stays plain.

Style DNA

What the style requires, what usually comes with it, what can change without leaving it, and what betrays it.

Weekly report

Active sessions

12,480+8.2% vs last week

On track

Open the style gallery

Same card, rendered in Neobrutalism.

Defines the style

A visible uniform dark stroke on cards, buttons, fields, and images.
A solid offset shadow with no blur at all.
Saturated flat fills placed directly on a light ground.

Supports the style

Wide, bold, short headings with plain body text.
Square or barely rounded corners.
Outlined labels that resemble printed stickers.

Can vary

The flat-fill palette: yellow, pink, green, or cyan.
Stroke width and shadow offset, as long as they stay constant across the screen.
The typeface family, provided headings stay heavy.

Avoid

Accessibility defectA focus treatment that blends into the thick borders already present.
Accessibility defectThe offset shadow as the only signal of a pressed or disabled state.
CaricatureColors, patterns, and outlines multiplied until reading becomes chaotic.
ContradictionA blurred shadow or soft gradient that drifts back toward flat or glass.

Close cousins

Styles that share a signal without sharing the rule.

Same card, four styles

Choose

Good context

An expressive brand that accepts strong hierarchy and a bold graphic presence.
A landing page or creative tool with few simultaneous interface levels.

Misuse

Multiplying colors, patterns, and outlines until reading becomes chaotic.
Calling a page brutalist only because it uses a bold font.

Compare

Decisive difference with the closest neighbor

Neobrutalism vs Web BrutalismNeobrutalism designs a raw-looking appearance with substantial CSS. Web Brutalism genuinely exposes web structure and native materials.

Ready-to-use briefs

Choose the intent that matches your work, then copy this static brief into your agent.

Create

Create this interface with Neobrutalism using saturated fills, a uniform 2 to 3px dark stroke, solid offset shadows without blur, and heavy headings. Keep body text simple and highly contrasted.

Modify

Preserve existing components and hierarchy. Replace blurred shadows with crisp offsets, apply one outline rule, and limit the palette to a few coherent flat fills.

Repair

Repair the system by harmonizing outline width, shadow offset, and pressed states. Reduce the number of colors and ensure focus remains visible beside the borders.

Understand → Recognize → Choose → Compare

Pack for your agent

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

Implement correctly

Create a coherent Neobrutalism direction

# Implement Neobrutalism in your agent

## Objective
Create this interface with Neobrutalism using saturated fills, a uniform 2 to 3px dark stroke, solid offset shadows without blur, and heavy headings. Keep body text simple and highly contrasted.

## Prerequisites
- Inspect existing components, tokens, and brand constraints.
- Confirm that this style fits the surface and content.
- Preserve existing structure, semantics, and interactions.

## Behavior and surfaces
- Thick outlines — Cards, buttons, fields, and images carry a visible uniform dark stroke.
- Hard offset shadows — The shadow is a solid offset shape with no blur.
- Saturated color blocks — Yellow, pink, green, or cyan appear as direct flat fills on a light ground.
- Chunky typography — Headings are wide, bold, and short, while body text stays plain.

## States
- Cover existing default, hover, focus, active, disabled, loading, and error states.
- Provide a static state when reduced motion is requested.

## Accessibility
- Check text contrast on every saturated fill.
- Add a focus treatment distinct from the existing thick borders.
- Do not use the offset shadow as the only signal for pressed or disabled states.

## When not to use
- Multiplying colors, patterns, and outlines until reading becomes chaotic.
- Calling a page brutalist only because it uses a bold font.

## Acceptance criteria
- An expressive brand that accepts strong hierarchy and a bold graphic presence.
- A landing page or creative tool with few simultaneous interface levels.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · Existing tokens, components, and brand constraints

Why it works

The style is framed by signals and surfaces, not just a visual reference.
States and fallbacks preserve use when motion or an API is unavailable.
Accessibility and performance criteria prevent aesthetics from becoming debt.

Try next

Audit Neobrutalism in the product

# Audit Neobrutalism on the real surface

## Objective
Check that Neobrutalism remains consistent, accessible, and measured on the components that actually use it.

## Checks
- Compare interactive states and fallbacks.
- Check contrast, focus, and reduced motion.
- Report visual effects that weaken hierarchy or performance.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

StyleWeb Brutalism

sha256:3919cd89ab16d8f2f07c7a98bf3322c140c841ac2dfc0bbc50f98f470ed143bc

Diagnose a problem

Fix Neobrutalism inconsistencies

# Debug Neobrutalism in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Compare the surface with the documented visual signals.
- Verify contrast, focus, reduced motion, and fallback behavior.
- Isolate the visual layer without changing functional structure.

## Possible causes
- The style hides hierarchy or reduces contrast.
- The effect is applied to too many surfaces or depends on an unavailable API.
- An interactive state is no longer perceivable.

## Bounded corrections
Repair the system by harmonizing outline width, shadow offset, and pressed states. Reduce the number of colors and ensure focus remains visible beside the borders.

## Final verification
- Check text contrast on every saturated fill.
- Add a focus treatment distinct from the existing thick borders.
- Do not use the offset shadow as the only signal for pressed or disabled states.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · Existing tokens, components, and brand constraints

Why it works

The diagnosis compares observable signals instead of judging taste.
The visual layer is isolated to preserve structure and interactions.
The fix stays tied to fallbacks, contrast, and interactive states.

Try next

Stabilize Neobrutalism in the design system

# Prevent Neobrutalism drift

## Objective
Turn the visual fix into a reusable rule and focused check without freezing the whole interface.

## Checks
- Isolate the responsible tokens or variants.
- Add focused evidence for the affected states.
- Compare nearby styles before widening the rule.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

StyleWeb Brutalism

sha256:3cd6d20d9de23cb59de61aa4fa44fecac33beaf3bfabca1807c7b5099d67cff2

Pack digest: sha256:5218415a064d67896071f80415a174c36f88ac52d8a95442cbf50f9ef593c591

Accessibility and verification

1Check text contrast on every saturated fill.
2Add a focus treatment distinct from the existing thick borders.
3Do not use the offset shadow as the only signal for pressed or disabled states.

Sources

Content revision: 1.3.0
Sources consulted on: 2026-07-20
Source catalog digest: sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6; sha256-utf8-canonical-json-lf/v1

Open the versioned source catalog

Choose

Good context

An expressive brand that accepts strong hierarchy and a bold graphic presence.
A landing page or creative tool with few simultaneous interface levels.

Misuse

Multiplying colors, patterns, and outlines until reading becomes chaotic.
Calling a page brutalist only because it uses a bold font.

# Implement Neobrutalism in your agent ## Objective Create this interface with Neobrutalism using saturated fills, a uniform 2 to 3px dark stroke, solid offset shadows without blur, and heavy headings. Keep body text simple and highly contrasted. ## Prerequisites - Inspect existing components, tokens, and brand constraints. - Confirm that this style fits the surface and content. - Preserve existing structure, semantics, and interactions. ## Behavior and surfaces - Thick outlines — Cards, buttons, fields, and images carry a visible uniform dark stroke. - Hard offset shadows — The shadow is a solid offset shape with no blur. - Saturated color blocks — Yellow, pink, green, or cyan appear as direct flat fills on a light ground. - Chunky typography — Headings are wide, bold, and short, while body text stays plain. ## States - Cover existing default, hover, focus, active, disabled, loading, and error states. - Provide a static state when reduced motion is requested. ## Accessibility - Check text contrast on every saturated fill. - Add a focus treatment distinct from the existing thick borders. - Do not use the offset shadow as the only signal for pressed or disabled states. ## When not to use - Multiplying colors, patterns, and outlines until reading becomes chaotic. - Calling a page brutalist only because it uses a bold font. ## Acceptance criteria - An expressive brand that accepts strong hierarchy and a bold graphic presence. - A landing page or creative tool with few simultaneous interface levels. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Audit Neobrutalism on the real surface ## Objective Check that Neobrutalism remains consistent, accessible, and measured on the components that actually use it. ## Checks - Compare interactive states and fallbacks. - Check contrast, focus, and reduced motion. - Report visual effects that weaken hierarchy or performance. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Debug Neobrutalism in your agent ## Observed symptom [DESCRIBE THE SYMPTOM HERE] ## Observable checks - Compare the surface with the documented visual signals. - Verify contrast, focus, reduced motion, and fallback behavior. - Isolate the visual layer without changing functional structure. ## Possible causes - The style hides hierarchy or reduces contrast. - The effect is applied to too many surfaces or depends on an unavailable API. - An interactive state is no longer perceivable. ## Bounded corrections Repair the system by harmonizing outline width, shadow offset, and pressed states. Reduce the number of colors and ensure focus remains visible beside the borders. ## Final verification - Check text contrast on every saturated fill. - Add a focus treatment distinct from the existing thick borders. - Do not use the offset shadow as the only signal for pressed or disabled states. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Prevent Neobrutalism drift ## Objective Turn the visual fix into a reusable rule and focused check without freezing the whole interface. ## Checks - Isolate the responsible tokens or variants. - Add focused evidence for the affected states. - Compare nearby styles before widening the rule. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.