What Is Neubrutalism?
Neubrutalism is a contemporary web and UI design movement that rejects polished neutrality in favor of graphic bluntness: high-contrast palettes, bold typography, strongly defined shapes, and conspicuous structure — especially outlines and hard shadows.
Unlike earlier web brutalism, which was often deliberately raw, awkward, and anti-conventional, neubrutalism translates that rebellious energy into a repeatable, commercially usable interface grammar. It is less "true brutalism on the web" and more a productized anti-design dialect. The interface doesn't disappear into frictionless neutrality — it declares its presence.
Its core philosophy can be stated plainly: explicitness over subtlety, personality over invisibility, and memorable structure over perfect polish. Good neubrutalism is intentionally emphatic, not accidentally clumsy. That final distinction is crucial.
Three Generations of Brutalism
Architectural Brutalism
- Domain
- Built environment. Post-WWII modernism. Exposed materials and structure.
- Visual signature
- Mass, heavy forms. Material texture. Exposed services.
- Usability stance
- Not a UI concept. Judged via architecture's functional aims.
- Execution
- Material "truth." Minimal ornament.
- Intent
- Structural honesty and utilitarian function.
Web Brutalism
- Domain
- Digital. Rawness and anti-template pushback. Often contested definition.
- Visual signature
- Either extreme simplicity or deliberate rule-breaking.
- Usability stance
- Sometimes anti-UX. Sometimes "UX minimalist."
- Execution
- Directories. Raw HTML aesthetics.
- Intent
- Ideological pushback against "the pretty web."
Neubrutalism
- Domain
- Digital product & marketing UI. Boldness plus modern UI structure.
- Visual signature
- Thick outlines, hard shadows, flat high-contrast color, oversized type.
- Usability stance
- Usually pro-UX in navigation clarity, pro-impact in visuals.
- Execution
- Design systems, UI kits, templates, standardized tokens.
- Intent
- Commercial differentiation. Personality at scale.
See the Difference
Toggle between standard SaaS styling and neubrutalist styling to see the transformation in real time. Same content, same layout — radically different personality.
Collaboration Tools
Real-time editing, comments, and version history for your entire team. Ship faster together.
Get StartedWhat Changed?
border-radius: 12px became 0. box-shadow: 0 4px 12px rgba() became 8px 8px 0 0 #000. border: 1px solid #e2e2e2 became 3px solid #000. The font got bolder. The badge got louder. Three CSS properties, total personality shift.
The Anatomy of Neubrutalism
Neubrutalism is not a single "look" — it's a repeatable visual grammar that can be reduced to a small set of tokens and rules. Here's every building block, explained and demonstrated.
A Color Theory
Neubrutalist color is categorical, not ambient. Colors carve surfaces into obvious objects, create instant memory, and heighten the sense that the interface is assembled from discrete parts. No gradients. Flat fills with pop-art energy. A black-and-white structural base punctuated by one to three saturated accents.
A Canonical Neubrutalist Palette
Do
- Use a structurally simple palette even when it's visually loud
- One neutral base + one dark outline color + limited accents
- Ensure body text has 4.5:1 contrast ratio (WCAG AA)
- Use color to carve surfaces into discrete, identifiable objects
Don't
- Use gradients (flat fills are the grammar)
- Let every component compete at maximum saturation
- Mistake "loud" for accessible — yellow on white fails contrast
- Rely on color alone to convey state or meaning
B Geometry & Borders
The signature neubrutalist move is the heavy outline. Cards, buttons, inputs, and illustrations read as if stamped, boxed, or screen-printed. The border is both brand signal and structural language — it restores edge clarity in an era of soft cards and low-contrast surfaces.
Corner Radius Comparison
SaaS default
Pill shape
Neubrutalist
Production Rule
Use a single canonical stroke width for most components (e.g., 2–3px). Only deviate intentionally for hierarchy. In code, border-width becomes a design token. Prefer square or near-square corners. The outline should clarify the object, not overpower its content.
C Shadows & Depth
Neubrutalist depth is anti-naturalistic. Instead of blurred, atmospheric elevation, it uses hard, offset shadows with little or no blur. Elements feel stacked, shifted, or physically misregistered — like printed layers that don't fully align.
Shadow Comparison
box-shadow: none0 4px 12px rgba(0,0,0,.15)5px 5px 0 0 #00010px 10px 0 0 #000The Three-Tier Shadow System
3px 3px 0 0 #000Badges, chips, inline actions
5px 5px 0 0 #000Cards, buttons, panels
8px 8px 0 0 #000Overlays, hero elements, focus
D Typography
Neubrutalist typography is assertive contrast: oversized sans-serif display headlines, abrupt scale shifts, and occasional tension elements. The best implementations separate expressive display type from calm operational body copy.
Body text in neubrutalism should be boring on purpose. People primarily scan web content rather than reading it linearly. Calm paragraph text and predictable spacing are what make the bold gestures sustainable. Reserve your most extreme typographic moves for headlines, hero modules, and calls to action.
box-shadow: 5px 5px 0 0 #000;
border-radius: 0;
background: #FFD23F;
Do
- Use impact face for headlines: grotesque/display sans, high weight, tight tracking
- Use utility face for body: highly legible sans, generous line-height
- Reserve extreme typographic gestures for headlines and CTAs
- Contrast via scale and weight, not novelty letterforms
Don't
- Make the entire typographic system shout at the same volume
- Use ornate or decorative fonts — the style is "loud" in scale, not letterform
- Sacrifice body readability for aesthetic consistency
- Ignore line-height and spacing in pursuit of impact
E Layout
Neubrutalist layouts appear "broken" but the good ones are not random. They use underlying grids and then selectively disrupt them through offset modules, asymmetric spacing, and overscaled elements. The operative rule: broken but not random.
Structured Disruption
Keep navigation and core reading flows predictable. Allow local "breaks" — offset cards, overlapped panels, rotated elements — to create energy. Users tolerate expressive composition far more readily than expressive forms.
Macro vs. Micro
Use asymmetry at the macro level (heroes, card stacks, illustrations). Keep the micro level mechanically aligned (labels, fields, buttons, error states). Once disruption interferes with comprehension, the design crosses from expression into sabotage.
Fonts for Neubrutalism
Typography is neubrutalism's primary graphic device. The right pairing doesn't just carry content — it is the visual punch. Here are the typefaces that define the movement, organized by role. All freely available on Google Fonts.
Role Display
Your poster fonts. Oversized headlines, hero statements, brand-defining moments. High weight, tight tracking, maximum impact.
Syne
Used on this siteBebas Neue
Archivo Black
Role Heading
Section headers, card titles, navigation. Readable at medium sizes with enough personality to carry the brand voice.
Space Grotesk
Used on this sitePlus Jakarta Sans
Outfit
Role Body
The calm counterweight. Body text should be boring on purpose — generous line-height, conventional sizes, predictable spacing. This is what makes the bold gestures sustainable.
Inter
Used on this siteDM Sans
Role Monospace
Code blocks, labels, tokens, meta information. Monospace faces reinforce the "exposed structure" philosophy — they make the interface feel engineered.
Space Mono
Used on this sitebox-shadow: 5px 5px 0 0 #000;
JetBrains Mono
border-radius: 0;
Recommended Pairings
Three curated font stacks that nail the neubrutalist voice. Each pairs an impact display face, a structural heading face, a calm body face, and an engineered mono.
From Concrete to CSS
Neubrutalism didn't appear from nowhere. It's the latest node in a design lineage that runs from postwar architecture through radical anti-design, web brutalism, and the platform economy that made the style remixable at scale.
New Brutalism in Architecture
In 1950, Swedish architect Hans Asplund coins "nybrutalism" (new brutalism) to describe Villa Göth in Uppsala. Critic Reyner Banham sets out the criteria in his 1955 essay: memorability as an image, clear exhibition of structure, and valuation of material "as found" (he would complicate his own definition in the 1966 book The New Brutalism: Ethic or Aesthetic?). Alison & Peter Smithson champion "New Brutalism" in Britain. The name traces not to "brutal" as in cruel but to Le Corbusier's béton brut — raw concrete.
Radical Anti-Design & Memphis
Italian groups like Archizoom and Superstudio, followed by the Memphis Group, challenge rationalist restraint with provocation, bright color, exaggeration, and deliberate friction. Neubrutalism's digital personality owes as much to this anti-modernist theatricality as it does to concrete architecture.
Web Brutalism Is Named
Pascal Deville launches Brutalist Websites in 2014, curating and codifying the trend. By 2016, major commentary frames web brutalism as pushback against the "lightness, optimism, and frivolity" of polished startup aesthetics. Bloomberg's stark redesign becomes Exhibit A. The seeds are planted.
The Platform Infrastructure Matures
Figma Community launches, enabling remixable design files. Tailwind CSS matures with JIT mode in 2021, making arbitrary shadow/border values trivial. Webflow and Framer collapse design-to-deployment. The distribution rails for a style like neubrutalism are now in place.
Neubrutalism Crystallizes
In March 2022, Polish designer Michał Malewicz publishes "Neubrutalism is taking over the web" — the essay most credited with naming and popularizing the trend. Shots tagged "neobrutalism" cluster on Dribbble the same spring. By early 2023, Figma-linked UI kits make it teachable; by mid-2023, WhiteUI's "Bruddle" packages it as a purchasable SaaS design system. The style crosses from aesthetic mood to reproducible asset class.
Infrastructure & Mainstreaming
Webflow has dedicated "Neobrutalism" categories. GitHub hosts open-source neubrutalist component libraries. Framer's marketplace has thousands of tagged templates. The style is no longer a visual fad — it's a taxonomy, a template market, and a developer ecosystem.
The "Patient Zero" Problem
There is no single, universally accepted originator. The public record shows distributed emergence: roughly simultaneous circulation across Dribbble shots, Behance challenges, Figma community assets, and template marketplaces. That makes neubrutalism look less like a founder-led movement and more like a style crystallized by platforms.
The closest thing to a namer is Michał Malewicz, whose March 2022 essay gave the trend its label and is widely credited with popularizing it (he's also associated with naming neumorphism and glassmorphism). But explicitly tagged work was already circulating concurrently — so he popularized far more than he invented.
The most defensible "patient zero moments" are not singular origins but auditable inflection points: explicit-tag Dribbble work in 2022, challenge-based circulation in late 2022, kit-ification via Figma in early 2023, and marketplace codification by mid-2023.
The Figma Effect
Figma's importance was not that it invented neubrutalism. Its importance was that it turned a look into a remix economy. Designers could inspect and copy live component files, not just see screenshots. Variables and tokenization made the style parameterized — you could change --border-width and --shadow-offset and get a different flavor of the same grammar. Framer and Webflow completed the loop from moodboard to production.
This is the deep historical shift: first-wave web brutalism was anti-system. Neubrutalism became system-friendly. It spread precisely because it became easier to reproduce.
Building with Neubrutalism
One of the reasons neubrutalism spread so fast is that its grammar is simple, discrete, and component-friendly. Borders, square corners, offset shadows, and loud fills are trivial to express in CSS. Here's how.
The Token System
The entire style can be compressed into a handful of CSS custom properties. This is what makes it parameterized and themeable — change the tokens, change the flavor.
/* The border is the main structural signifier */
--border: 3px solid #000;
/* Hard shadows: offset, zero blur, always */
--shadow-sm: 3px 3px 0 0 #000;
--shadow: 5px 5px 0 0 #000;
--shadow-lg: 8px 8px 0 0 #000;
/* Square corners. That's the point. */
--radius: 0;
/* Palette: neutral base + loud accents */
--bg: #FFFDF5;
--yellow: #FFD23F;
--pink: #FF6B6B;
--blue: #74B9FF;
}
The Canonical Button
border: 3px solid #000;
border-radius: 0;
background: #FFD23F;
color: #000;
box-shadow: 5px 5px 0 0 #000;
font-weight: 700;
padding: 12px 24px;
cursor: pointer;
transition: all 0.1s ease;
}
.btn:hover {
transform: translate(-2px, -2px);
box-shadow: 7px 7px 0 0 #000;
}
.btn:active {
transform: translate(3px, 3px);
box-shadow: none;
}
/* Never forget focus */
.btn:focus-visible {
outline: 3px solid #74B9FF;
outline-offset: 3px;
}
The pattern is always the same: border + flat fill + hard shadow. On hover, the shadow grows and the element lifts. On click/active, the element "presses down" by moving in the shadow direction and the shadow disappears. It's physical, immediate, satisfying.
Live Demo
The Canonical Card
background: #fff;
border: 3px solid #000;
box-shadow: 5px 5px 0 0 #000;
padding: 1.5rem;
transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
transform: translate(-2px, -2px);
box-shadow: 7px 7px 0 0 #000;
}
Card Variations
Standard Card
Black border, black shadow. The workhorse. Works on any background.
Colored Shadow
Matching border and shadow color adds personality while keeping structure.
Filled Card
Loud background fill. The border and shadow contain the energy. Great for CTAs.
Neubrutalist Form Elements
Forms are where most design systems fall apart. Here's every standard form control styled with the neubrutalist grammar — borders, flat fills, hard shadows, zero radius. All fully functional and accessible.
padding: 0.75rem 1rem;
border: 3px solid #000;
border-radius: 0;
background: #fff;
box-shadow: 3px 3px 0 0 #000;
transition: box-shadow 0.15s, transform 0.15s;
}
.nb-input:focus {
outline: 3px solid #74B9FF;
outline-offset: 2px;
box-shadow: 5px 5px 0 0 #000;
transform: translate(-1px, -1px);
}
Notification Toasts
Toasts and alerts are where neubrutalism's bold personality really shines. High-contrast backgrounds, thick borders, and the signature hard shadow make notifications impossible to miss.
Interactive Playground
Drag the sliders to feel the grammar. Watch how border weight, shadow depth, and corner radius transform a simple card from minimal to maximally neubrutalist.
Live Preview
This card updates in real time as you adjust the controls.
Full Token Reference
| Token | Value | Purpose |
|---|---|---|
--border | 3px solid #000 | Default component border |
--border-thin | 2px solid #000 | Secondary borders, dividers |
--border-thick | 4px solid #000 | Section dividers, hero elements |
--shadow-sm | 3px 3px 0 0 #000 | Badges, chips, small controls |
--shadow | 5px 5px 0 0 #000 | Cards, buttons, panels |
--shadow-lg | 8px 8px 0 0 #000 | Hover states, overlays |
--shadow-xl | 12px 12px 0 0 #000 | Hero elements, dialogs |
--radius | 0 | All components |
Why It Translates So Well to Code
CSS natively exposes the exact primitives the style relies on: box-shadow defines offset and blur; border-radius controls softness; border, color, and typography remain explicit rather than atmospheric. In Tailwind, this maps to border border-black rounded-none shadow-[5px_5px_0_0_#000] — the utility model makes neubrutalism unnaturally easy to author.
When to Use Neubrutalism (And When Not To)
Neubrutalism's central UX tension is straightforward: it gains distinctiveness by violating expectations, but usability depends on reliably managing them. The more an interface emphasizes collision and visual noise, the more carefully it must protect hierarchy, affordance, and reading order.
Sector Fit Analysis
Where it works best
Audiences value personality, novelty, and expressive branding. Simple top-of-funnel journeys where first impressions matter most.
Differentiation from years of flat, gradient-light, near-identical startup pages. A cheap visual moat shipped fast with modern tooling.
Anti-establishment signaling, attention economics, and hype-friendly energy. The early public evidence is dense with wallet and NFT concepts.
Use with caution
Works for brand marketing pages. Scale back for cart, checkout, and account management where cognitive load is already high.
Great for mastheads and article heroes. But dense reading layouts need calmer treatment to preserve scan paths.
Use neubrutalist tokens for brand accent. But information-dense panels, tables, and settings need conventional interaction patterns.
Avoid or heavily moderate
Trust must be signaled through calm, conventional professionalism. Loud palettes and aggressive borders can read as unserious.
High-stakes clarity is non-negotiable. Visual friction can cause real anxiety. Every accessibility failure matters more here.
Accessibility compliance is mandatory. Universal usability outweighs personality. The audience is everyone, not a self-selected niche.
Accessibility: Where the Style Helps and Where It Breaks
Potential Strengths
- Large headings and strong edge definition support scanning
- Clear borders improve control discoverability vs. ultra-flat UI
- High-contrast palette can exceed WCAG thresholds naturally
- Hard shadows make interactive elements feel obviously clickable
Common Failure Modes
- Contrast failures: Yellow on white, pink on orange, mid-tones all fail WCAG
- Color-only state: Using only color to convey meaning violates 1.4.1
- Fake hit areas: Thick borders imply larger targets than actual code provides
- Focus obscured: Decorative shadows can hide keyboard focus indicators
| WCAG Criterion | Requirement | Neubrutalist Concern |
|---|---|---|
| 1.4.3 Contrast (Minimum) | 4.5:1 for normal text, 3:1 for large text | Loud palettes don't guarantee compliance. Test every combination. |
| 1.4.11 Non-text Contrast | 3:1 for UI component boundaries | Decorative borders can obscure meaningful state changes. |
| 2.4.7 Focus Visible | Keyboard focus clearly indicated | Thick outlines must not swallow focus rings. Use outline-offset. |
| 2.5.8 Target Size | 24×24px minimum (AA) | Visual bulk from borders ≠ actual clickable area. Verify padding. |
| 1.4.1 Use of Color | Color not sole information channel | Palette experimentation increases risk of color-only signaling. |
Which standard? These criteria are from WCAG 2.2, the current W3C Recommendation (published October 2023, updated December 2024). WCAG 3.0 is still an early working draft — not expected to reach Recommendation before roughly 2029, and it will coexist with rather than replace 2.2. Build against 2.2 today.
Contrast Checker
Neubrutalism's loud palettes don't automatically pass WCAG. Test your color combinations here — enter any two hex colors and see the contrast ratio instantly.
Implementation Best Practices
Separate Expression from Interaction
Use neubrutalism aggressively on hero sections, marketing blocks, and editorial modules. Dial it down inside dashboards, forms, and transactional flows.
Tokenize the Aesthetic
Define explicit tokens for stroke widths, shadow offsets, and accent colors. Change the variables, change the intensity — without rebuilding components.
Make "Loud" Serve Hierarchy
Let backgrounds be weird but keep type systematic and readable. If every object is loud, nothing is legible.
Prove WCAG Compliance Early
Neubrutalism's palette freedom is where projects fail. Enforce contrast ratios during design, not after launch.
Treat Borders as Semantics
A border should communicate: container, interactive, focus, selected, or error. If it doesn't communicate any of these, remove it.
Reserve Harshest Gestures
One bold border system. One hard-shadow behavior. One loud display scale. The style deteriorates when every component tries to be the poster.
The Neubrutalist Ecosystem
Neubrutalism is a distributed movement. There's no single founding figure. Instead, it was crystallized by an ecosystem of platforms, kit-makers, educators, and open-source libraries.
The Four Layers
Showcase
Designers whose public shots made the style legible and desirable. Dribbble, Behance, and Awwwards galleries served as the initial circulation layer, with work explicitly tagged "neobrutalism" clustering through the spring of 2022.
Education
People and communities who translated the aesthetic into recipes. Michał Malewicz's widely-read March 2022 essay, UX-publication explainers, and Behance challenge culture moved the style from pure inspiration into teachable visual logic.
Productization
Kit makers and marketplace sellers. Dozens of Figma Community kits and WhiteUI's "Bruddle" SaaS kit packaged neubrutalism as reusable infrastructure — sold on Gumroad, ThemeForest, and Awwwards Market. That's how a visual trend becomes operationalized.
Implementation
Open-source libraries and developer-facing component systems. Projects like neobrutalism.dev (Tailwind/React) and neubrutalism-css (vanilla CSS) converted the style into installable production code.
Key Platforms
Dribbble
Naming, early visual clustering, and trend visibility. By April 2022, shots were explicitly tagged "neobrutalism."
Figma Community
Remixability and system diffusion. Live, inspectable component files turned screenshots into copyable infrastructure.
Awwwards / Markets
Packaging the style as purchasable design systems by mid-2023. Commercialization marks maturity.
Webflow
Dedicated "Neobrutalism" showcase categories. Low-code publication and template circulation at scale.
Framer
2,000+ responsive templates. Design-and-publish in one place. Made "designed weirdness" shippable without developers.
GitHub / npm
Dedicated topics, libraries, and curated lists. The style crossed from inspiration into installable front-end primitives.
Notable Brand Adoption
The strongest brand-level adopters have been challenger brands, creator-economy platforms, and developer tools rather than conservative incumbents. Adoption is typically surface-layer (marketing pages, editorial microsites) rather than deep product UI. Every example below was verified against the brand's live site — the style fatigues fast, so cite with care.
Gumroad
The poster child. Sahil Lavingia's 2021 10-year rebrand traded the corporate SaaS look for flat candy fills, sharp black outlines, and hard offset shadows. Still unmistakably neubrutalist today.
Tony's Chocolonely
Proof it scales past tech. Clashing flat color fields, oversized chunky display type, and square-cornered buttons drive a mainstream consumer brand — loud by design, on purpose.
Panda CSS
CSS-in-JS library with a fully neubrutalist marketing site — 4px 4px 0 0 black shadows and 3px solid black borders straight from the production stylesheet. Dev tools are a natural home for the style.
neobrutalism.dev
The canonical component library (5,000+ GitHub stars). A shadcn/ui-based React + Tailwind system whose own docs site is a textbook reference implementation: grid background, thick borders, hard shadows on every control.
Dodonut
Design-studio portfolio leaning all the way in: black-bordered nav and buttons with hard offset shadows, flat lime and purple fills, oversized type. Agencies use the style as a craft signal.
Figma Cautionary
An early, influential adopter (~2019–2023): heavy black outlines and bold flat color. But its 2024 rebrand deliberately dropped those outlines — a reminder that even category leaders cycle out of a trend.
What Comes Next?
Is neubrutalism a bubble or a durable shift? The honest answer is: both. The maximal form is almost certainly a trend. The underlying grammar is almost certainly permanent.
Why It Won't Disappear
Neubrutalism has progressed further into infrastructure than short-lived decorative crazes like glassmorphism. Templates, component libraries, GitHub topics, marketplace kits, and no-code deployment paths give it operational embedding that outlasts pure mood-board fashion.
It's not one optical trick (frosted glass, soft shadows). It's a compositional stance that can survive moderation. That makes it easier to absorb into mainstream design systems in diluted form.
Why It Won't Become Universal
Historically, brutalism in web design has been poorly defined and its more aggressive expressions are polarizing. It's unlikely to replace mainstream enterprise UI conventions. Instead, it becomes a calibrated brand dial applied where differentiation matters most.
The most likely future is hybridization: neubrutalist energy on marketing surfaces, calmer interaction models in dense product flows.
The Anti-AI Signal
A fresh accelerant is keeping the style alive past its predicted peak: as AI-generated layouts flood the web with frictionless, average-of-everything sameness, visibly hand-built aesthetics read as a human signal. Asymmetry, clashing color, and deliberate roughness are hard to prompt and easy to recognize. Neubrutalism's "made by a person, not a model" energy has become part of its staying power — design as a mark of authorship.
Contrast with Competing Movements
vs. Clean Minimal
Minimalism optimizes for calm, efficiency, and universal deployability. It's the better default for dense products and regulated industries. Neubrutalism is not a replacement — it's an expressive overlay.
vs. Corporate Memphis
Where Corporate Memphis says "don't worry, we're approachable," neubrutalism says "notice us, we are not generic." It's sharper, less utopian, more confrontational — design as stance rather than comfort.
vs. Glassmorphism
Glassmorphism is a single rendering trick (frosted translucency). Neubrutalism is a grammar (stroke, depth, type hierarchy, layout). That makes it more adaptable long-term — but it will still cycle based on cultural fatigue.
Emerging Subtypes
Soft Neubrutalism
Keeps the border/shadow grammar but relaxes color intensity and spacing. The most plausible long-term survivor in mainstream product design.
Memphis Hybrid
Combines hard-outline UI with playful, flat geometric illustration. The rigid frame of neubrutalism paired with cheerful Memphis-derived corporate art.
Cyber-brutalism
Cyberpunk aesthetics meet raw layouts: glitch art, dark backgrounds, neon accents, monospace type overload. Blade Runner meets structural honesty.
Cute-alism
Raw brutalist boxes meet neon pinks, sticker graphics, rounded buttons, and emoji accents. Kawaii energy inside a neubrutalist container — surprisingly popular in 2025.
Component-Library Neubrutalism
The style as code artifact: Tailwind/React ecosystems, shadcn-based systems like neobrutalism.dev (5,000+ stars). The most infrastructurally embedded variant.
Editorial/Poster Neubrutalism
Art-directed, typographic, more common in agency and portfolio work than in product UI. The most visually ambitious expression.
The Neubrutalism Cheat Sheet
Everything you need to know in one glance. Copy the CSS, internalize the rules, ship with confidence.
Border
border: var(--border);
Shadow
box-shadow: var(--shadow);
Corner Radius
border-radius: 0;
Shadow Blur
/* Always zero. Always. */
Hover
transform: translate(-2px, -2px);
Active/Press
transform: translate(3px, 3px);
Display Font
font-family: 'Syne', sans-serif;
Heading Font
font-family: 'Space Grotesk';
Body Font
font-family: 'Inter', sans-serif;
Mono Font
font-family: 'Space Mono';
Color: Base
Contrast ratio: 18.5:1
Min Contrast
/* WCAG AA for normal text */
The One Rule
Start with a standard UX skeleton, then wrap it in neubrutalist tokens. Use conventional navigation, predictable information architecture, and clear system-status feedback before applying visual aggression. Neubrutalism is a theme layer on top of a conventional interaction model, not permission to abandon interaction standards.
Sources & Further Reading
This page is a synthesis, not an opinion. Claims here are traceable to primary and authoritative secondary sources — design history, the W3C, the Nielsen Norman Group, and the people who named and built the style. Verify, disagree, go deeper.
Foundations & History
- Brutalist Architecture — Wikipedia. Asplund's 1950 coinage, Villa Göth, the Smithsons, béton brut.
- Reyner Banham, "The New Brutalism" — Architectural Review, Dec 1955 (and the 1966 book The New Brutalism: Ethic or Aesthetic?).
- Brutalist Websites — Pascal Deville's 2014 archive that named and codified web brutalism.
- Michał Malewicz, "Neubrutalism is taking over the web" — UX Collective, March 2022. The essay that named the trend.
Best Practice & Standards
- Neobrutalism: Definition and Best Practices — Nielsen Norman Group, April 2025.
- WCAG 2.2 — W3C Recommendation (Oct 2023, updated Dec 2024). The accessibility baseline.
- Neubrutalism in Web Design — LogRocket UX guide.
- Neubrutalism — Aesthetics Wiki. Useful on distributed origins and Y2K lineage.
Tools & Libraries
- neobrutalism.dev — the canonical shadcn/ui-based React + Tailwind component library (5,000+ stars).
- Awesome Neobrutalism — a curated list of kits, libraries, and examples.
- Panda CSS — a production marketing site built in the style.
- "Introducing the new Gumroad" — Sahil Lavingia on the 2021 rebrand that became the poster child.
How this page is sourced
Historical and standards claims are tied to primary sources above. Brand examples were each checked against the live site's rendered CSS — not blog hearsay — and dropped when they no longer matched the grammar (Figma's 2024 rebrand is the cautionary case). Where the record is genuinely contested, such as who "coined" the digital term, the page says so rather than inventing a clean origin story.
Found an error or a better source? Open an issue.