Raw borders, bold shadows, bright accents. The playful, colorful cousin of Brutalism that powers modern web products like Gumroad and the Figma community.
01 / Color Palette
Neubrutalism pairs a warm off-white background with saturated, almost neon accent colors. Every accent pops hard against thick black borders. The palette is loud on purpose.
Foundation
Ink Black
#1A1A2E
White
#FFFFFF
Warm Gray
#F5F0EB
Primary Accents
Electric Lime
#B8F84E
Hot Pink
#FF6B9D
Sunshine
#FFE156
Vivid Purple
#A855F7
Secondary Accents
Sky Blue
#60A5FA
Tangerine
#FB923C
Teal
#2DD4BF
Red Alert
#EF4444
02 / Typography
Space Grotesk handles display and headings with its geometric, slightly quirky letterforms. DM Sans provides clean, readable body text. Both are frank and functional, never decorative.
Bold Moves
Raw and Structured
Thick Borders, Bright Colors
Offset shadows create depth without subtlety
Neubrutalism strips away polish to reveal the structure beneath. Every border is visible, every shadow is deliberate, and every color choice shouts rather than whispers. It borrows the honesty of Brutalism but replaces the concrete gray with playful, saturated hues.
Metadata, timestamps, labels, and supplementary interface text. Legible at small sizes.
03 / Spacing
A 4px base unit creates a rhythmic grid. Generous padding inside bordered containers keeps content from feeling trapped. The gap between elements should feel deliberate, not tight.
04 / Buttons
Buttons are chunky, bordered, and shadowed. They lift on hover and press down on click, creating a tangible, almost physical interaction. The offset shadow is the signature move.
05 / Forms
Form controls get the full Neubrutalist treatment: thick borders, offset shadows, and a satisfying focus state that makes the shadow grow. Inputs feel like physical objects you can grab.
We will never share your email.
06 / Cards & Panels
Cards are bordered rectangles with bold offset shadows. They mix rounded and sharp corners, white and colored backgrounds. Hover lifts them further off the page.
The defining visual trait. Hard-edged shadows at a fixed pixel offset create a physical, sticker-like quality that makes every element feel like it was cut and pasted.
2-4px solid black borders wrap every interactive element. No gradients, no blur. The border is the frame, the stage, the structure itself.
Unlike classic Brutalism's raw gray, Neubrutalism embraces saturated pastels and neons. Lime green, hot pink, and electric yellow scream for attention.
Bright background panels draw the eye. Use sparingly for emphasis or calls to action.
White text on saturated backgrounds. Make sure the contrast ratio meets accessibility standards.
Dark accents work beautifully for featured content and important announcements.
Where Brutalism said "ugly is honest," Neubrutalism says "raw is fun." It keeps the structural honesty -- visible borders, no drop-shadow blur, no gradients pretending to be three-dimensional -- but adds color, personality, and a wink. The result is a design language that feels handmade, approachable, and unmistakably modern.
Some Neubrutalist interfaces go fully sharp. Zero border-radius reinforces the raw, unpolished aesthetic and works especially well for dashboard layouts and data-heavy UIs.
07 / Alerts & Notifications
Status messages get the same bordered, shadowed treatment as everything else. The background fill signals severity while the icon provides an immediate visual cue.
Information
Your profile has been updated. Changes may take a few minutes to appear across the platform.
Success
Payment processed. Your order #4821 is confirmed and will ship within 24 hours.
Warning
Your API rate limit is at 85%. Consider upgrading your plan to avoid service interruption.
Error
Unable to save changes. The server returned a 500 error. Please try again or contact support.
08 / Badges & Tags
Small inline labels for categorization and status. Both rounded pill and sharp square variants are provided.
09 / Design Principles
Neubrutalism is built on a few non-negotiable rules that keep the aesthetic coherent across any UI.
01
Visible Structure
Every border is visible. No hiding behind subtle gradients or feathered shadows. If it is a box, it looks like a box.
02
Hard Shadows
Offset box-shadows with zero blur. The shadow is a solid rectangle, not a soft halo. This creates a physical, stacked-paper feel.
03
Color Without Apology
Bright, saturated fills are used boldly. No muted pastels or safe grays. Every accent demands attention.
04
Playful but Functional
The aesthetic is expressive without sacrificing usability. Hover and active states provide clear feedback. Hierarchy is maintained through size, weight, and color.
05
Mix Sharp and Round
Some corners are rounded, others are razor-sharp. This tension between polish and rawness is what makes Neubrutalism feel alive.
06
Honest Materials
No skeuomorphism, no faux textures. The building blocks are flat color, solid borders, and hard shadows. What you see is what you get.