Neubrutalism

Applying a Neubrutalism visual direction

You are being asked to apply a Neubrutalism visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Neubrutalism” means here

Neubrutalism keeps the exposed structure and hard edges of brutalist work but drops its severity. Blocks are outlined in thick dark borders and cast hard, unblurred shadows offset to one side, as though cut from colored paper and laid slightly above the page. Colors are bright and flat. Elements sit a few pixels out of alignment with each other on purpose, so the composition feels hand-placed rather than snapped to a grid.

The difference from brutalism proper is worth stating, because the two get conflated. Brutalism is austere: black, white, a restricted palette, no shadow, nothing rounded. Neubrutalism is cheerful: it welcomes bright color, it depends on drop shadows, and it is perfectly happy with rounded corners. What the two share is the refusal to smooth anything over — no blur, no gradient, no soft elevation.

The shadow is doing structural work here, not decorative work. It has no blur and a real offset, so it reads as a solid object displaced behind the element rather than as light falling on it. That is why pressing a button can move the element into its own shadow: the interaction is physical and the feedback is obvious.

Recommendations

• Outline everything that is a distinct object — cards, buttons, inputs, images — with a thick dark border, two pixels or more. The outline is what makes the block read as a cut shape.
• Give each block a hard shadow: zero blur, offset by at least four pixels on both axes, in a solid dark color. Keep the offset direction identical across the whole interface so the composition feels coherent.
• Fill blocks with flat saturated color. No gradients, no tints of the same hue used to fake depth. If you want variety, use more colors, not softer ones.
• Pick one corner radius and use it everywhere, or use none at all. Mixed radii are the fastest way to make this direction look accidental.
• Nudge things out of alignment deliberately — a few pixels, not dozens. The composition should look placed by hand, not broken.
• Make buttons feel physical: on press, remove the shadow and move the element by exactly the shadow’s offset, quickly. The element appears to be pushed down onto the page.
• Check text contrast against the actual block color. Bright saturated fills are exactly where this fails, particularly yellow and lime.

Avoid

• Soft or blurred shadows, which immediately return the interface to conventional elevation.
• Gradients or tinted fills used to suggest depth; depth here comes only from outline and offset.
• Several different corner radii across the interface.
• Misalignment large enough to read as a layout bug rather than as a decision.
• Thin or light-colored borders, which cannot hold a bright fill.
• Dark text on a saturated fill without measuring the contrast first.

How to check your own work

Before considering the result finished, look at it and ask:

• Does any shadow have blur? If yes, set it to zero — that single property is most of the style.
• Do all the shadows fall in the same direction? Inconsistent offsets make the composition feel unresolved rather than playful.
• Are the corner radii consistent across every element, or did some component bring its own?
• Press a button. Does anything physical happen? If the only feedback is a color change, the interaction is not carrying its share of the direction.
• Take the brightest fill on the page and measure the contrast of the text on it. This is where the style most often fails.

Neubrutalism — Specification

Definition

Neubrutalism is a web-interface design style that retains brutalism’s exposed structure and hard edges while replacing its severity with bright, playful color. Objects are outlined in thick dark borders, filled with flat saturated color, and displaced by hard unblurred shadows, producing surfaces that read as cut paper laid slightly above the page. Unlike brutalism, it permits rounded corners and depends on drop shadow as a structural device.

Core principles

• Outline defines the object. A thick dark border, not a background change, is what makes a block read as a distinct shape.
• Shadow is structure, not light. Offsets are hard and unblurred, describing displacement rather than illumination.
• Flat saturated color. Variety comes from adding colors, never from softening them into gradients or tints.
• Deliberate imbalance. Small, intentional misalignments make the composition read as hand-placed.
• Physical interaction. Controls respond by moving into their own shadow, so feedback is spatial rather than merely chromatic.

Visual characteristics

• Thick dark outlines on every distinct object, including images and inputs.
• Hard drop shadows with no blur, offset consistently in one direction.
• Bright, flat, saturated block fills with no gradient anywhere.
• A single corner radius applied uniformly, or none at all.
• Sibling blocks offset from one another by small, visible amounts.
• Press states that remove the shadow and displace the element by the same offset.

Rules

1. Thick dark outline. Every container and control is bounded by a heavy dark border. Acceptance criterion: Computed border-width is 2px or greater on every container and interactive element, with a border color whose relative luminance is below 0.15.

2. Hard offset shadow. Blocks are displaced by shadow rather than lit by it. Acceptance criterion: Each block has a box-shadow with a blur radius of exactly 0 and an offset of at least 4px on both axes.

3. Flat saturated fills. Color is applied as solid blocks. Acceptance criterion: Each primary block has a solid computed background-color with saturation of 50% or greater, and no linear-gradient or radial-gradient appears anywhere on the page.

4. Uniform corner radius. Rounding, where present, is consistent. Acceptance criterion: The set of non-zero computed border-radius values across the page reduces to exactly one value.

5. Deliberate misalignment. The composition reads as placed rather than snapped. Acceptance criterion: At least two sibling blocks have positional offsets differing by between 4px and 24px, documented as intentional rather than incidental.

6. Physical press feedback. Controls move into their own shadow when activated. Acceptance criterion: In the :active state, the control’s shadow resolves to 0 and the element translates by exactly its resting shadow offset, within 100ms or less.

7. Contrast over saturated fills. Text remains readable on bright blocks. Acceptance criterion: Every text element measures at least 4.5:1 against the solid fill color of the block containing it.

Avoid

• Soft or blurred shadows, which restore conventional elevation and dissolve the style.
• Gradients or same-hue tints used to imply depth.
• Multiple corner radii across the interface.
• Misalignment large enough to read as a layout defect rather than a decision.
• Thin or light-colored borders that cannot hold a saturated fill.
• Text placed on a bright fill without a measured contrast result.

Acceptance criteria

• Rule 1: Every container and control has a dark border of at least 2px.
• Rule 2: Every block has a zero-blur shadow offset at least 4px on both axes.
• Rule 3: All fills are solid and saturated, with no gradients present.
• Rule 4: Exactly one non-zero corner radius is used across the page.
• Rule 5: At least two sibling blocks are intentionally offset by 4–24px.
• Rule 6: Active controls lose their shadow and translate by its offset within 100ms.
• Rule 7: All text meets 4.5:1 against its containing block’s fill.

Blocking failures

• Shadows carry a blur radius greater than zero, which removes the single property the style is built on and returns the interface to conventional soft elevation.
• Text on a saturated fill falls below 4.5:1, which occurs most often on yellow and lime blocks and is not correctable by adjusting the border.
• A control’s press state produces no spatial change, so the physical interaction model the style promises does not exist and pressed state is conveyed by color alone.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Border width (Rule 1) may reduce at narrow viewports but never below 2px, since a thinner outline cannot hold a saturated fill.
• Shadow offset (Rule 2) may reduce proportionally to no less than 4px; the blur radius stays at 0 at every breakpoint without exception.
• Deliberate misalignment (Rule 5) is reduced or removed at the narrowest widths, where a single-column layout leaves no siblings to offset against; this is an acceptable relaxation, unlike the others.
• The uniform radius (Rule 4), the press feedback (Rule 6), and the contrast floor (Rule 7) hold unchanged at every breakpoint.