Neo-brutalism
Also called neubrutalism or neo-brutalist design
A bold UI style with thick black borders, hard offset shadows, flat bright colors, and chunky type that looks raw on purpose.
export function SignupCard() {
return (
<form className='w-80 rounded-lg border-3 border-black bg-white p-6 text-black shadow-[6px_6px_0_#000]'>
<h2 className='text-2xl font-extrabold'>Join the beta</h2>
<p className='mt-1 text-sm font-medium'>
Get early access and help shape what we build.
</p>
<input
type='email'
aria-label='Email'
placeholder='you@studio.com'
className='mt-4 h-11 w-full rounded-md border-3 border-black px-3 font-medium outline-none focus-visible:shadow-[4px_4px_0_#000]'
/>
{/* On press, move by the shadow's offset and drop the shadow, so it looks pushed flat. */}
<button
type='submit'
className='mt-4 h-11 w-full rounded-md border-3 border-black bg-[#ffd60a] font-extrabold shadow-[4px_4px_0_#000] transition-[translate,box-shadow] duration-100 active:translate-1 active:shadow-none'
>
Get early access
</button>
</form>
);
}Restyle the signup card in a neo-brutalist style: white background, 3px solid black border, 8px radius, box-shadow: 6px 6px 0 #000, a bright yellow (#ffd60a) primary button with the same border and a 4px hard shadow, and 800-weight headings. On press, move the button 4px right and down and remove its shadow over 100ms.
Paste into Layerwise or any AI coding tool.
What is Neo-brutalism?
Neo-brutalism takes the raw, unpolished feel of brutalist web design and adds color. Elements get 2 to 4px solid borders, hard shadows offset down and to the right with no blur, saturated flat fills such as yellow, pink, and mint, and heavy sans-serif type. Nothing is subtle, and that is the point.
Gumroad’s redesign helped popularize it, and it suits creative tools, indie products, portfolios, and landing pages that want personality. Hard shadows also make press feedback easy: on click, move the element by the shadow offset and drop the shadow, so it looks pushed flat.
Keep the layout tidy so the bold styling reads as intentional, and check contrast: black text on bright yellow works well, while white text on light pink usually fails.
Related terms
All termsFlat design
A design style that uses solid colors, simple shapes, and clean type, with no gradients, textures, or realistic shadows.
Press feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Drop shadow
A shadow cast behind an element to make it look raised off the page, with larger, softer shadows signaling higher elevation.
Typographic hierarchy
Using differences in text size, weight, and color so people can tell at a glance what to read first, second, and last.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.