Neubrutalism deliberately breaks conventional design rules with raw, unpolished, high-contrast elements. Thick black borders. Hard shadows. Clashing colors. Zero gradients. Zero blur. All function.
Neubrutalism (also spelled Neobrutalism or Neo-Brutalism) is a UI and visual design aesthetic that deliberately breaks conventional design rules with raw, unpolished, high-contrast elements. It evolved from traditional web brutalism but adds modern usability, bold color palettes, and a sense of intentional imperfection.
The style is defined by thick black borders, hard-offset solid shadows with zero blur, oversized UI components, deliberately clashing vibrant colors, and unusual grotesque typography. It functions as a direct counter-movement to the polished smoothness of Flat Design, Corporate Memphis, and Glassmorphism -- prioritizing function over form while embracing visual confrontation and accessibility through oversized, high-contrast elements.
The building blocks that define every neubrutalist interface.
Every element -- cards, buttons, inputs, images -- is framed by bold, solid black borders, typically 2-3px wide.
Drop shadows use X and Y offset with zero blur and full-opacity black, creating a stark pseudo-3D cutout effect.
Surfaces are strictly flat, solid-color fills. The only depth comes from hard shadows and borders, never smooth transitions.
Buttons, inputs, and interactive elements are deliberately larger than conventional design norms for impact and accessibility.
Bold, saturated, often contrasting or off-putting color combinations that reject harmony in favor of visual energy.
Intentional roughness and imperfection. Elements feel hand-placed rather than pixel-perfect. Zig-zags and jagged edges welcome.
Layouts may expose their underlying grid structure or use ruled-paper backgrounds as decorative elements.
References to old OS chrome: Windows 98-style title bars, monospace system fonts, and faux browser window frames.
Raw, unrefined rectangles, circles, stars, and polygons with visible strokes. Content organized in rigid rectangular blocks.
Bold, saturated, often clashing colors alongside pure black and white. No gradients. No tones. No smooth transitions.
Bold, chunky, and impactful. Unusual and grotesque. Uppercase-heavy. Sans-serif dominant. Typography is a primary decorative element, not just a vehicle for content.
Interactive elements built with thick borders, hard shadows, and bold color. Every component shifts toward its shadow on press.
Warm highlight background with bold borders.
Cool accent background, same hard shadows.
Success state or positive content container.
Feature highlight or badge-style container.
The defining CSS pattern: thick borders, hard-offset zero-blur shadows, and snappy hover states that translate elements toward their shadow on interaction.
/* The quintessential neubrutalist card */
.nb-card {
background: var(--nb-white);
border: 2px solid #000000;
box-shadow: 4px 4px 0px 0px #000000; /* zero blur, always */
border-radius: 0; /* never round */
padding: 24px;
transition: box-shadow 0.15s, transform 0.15s;
}
/* Hover: shift toward the shadow */
.nb-card:hover {
box-shadow: 2px 2px 0px 0px #000000;
transform: translate(2px, 2px);
}
/* Active: fully pressed into shadow */
.nb-card:active {
box-shadow: 0px 0px 0px 0px #000000;
transform: translate(4px, 4px);
}The hard rules that separate authentic neubrutalism from imitation.
Thick borders. Hard shadows. Clashing colors. Zero blur. Zero gradients. All attitude. Use this reference to build interfaces that refuse to blend in.
Back to Top