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.

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.

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.

implementation

Implement in your agent

# 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.

## Non-goals
- 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.

sha256:25b83a866d17176baae83ba8d36c101dc773e0f9719b26f2a00ac48047f8277c

debugging

Debug in your agent

# Debug Neobrutalism in your agent

## Observed symptom
[DÉCRIS ICI LE SYMPTÔME]

## 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.

sha256:81a1c7f9d2176dbc738c43e6095f0fd8c01b1a51ae4ba27b9bc1b991f0b3d04b

Pack digest: sha256:e89b2ee7fc5eb09dd864f071ced6e94632d979d1a20ff42cd359430ac8225a8a

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

Editorial revision: 1.2.2
Sources consulted on: 2026-07-20
Source catalog digest: sha256:6e047c91ac34b3558576dea986805be6086c1a5a18ed2ed27fa1e56214cef304; 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. ## Non-goals - 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.

# Debug Neobrutalism in your agent ## Observed symptom [DÉCRIS ICI LE SYMPTÔME] ## 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.