# Neo-brutalism

Also called: neubrutalism, neo-brutalist web, Gumroad style, thick-border UI  
Era: 2021-2024 (Gumroad redesign 2021 popularised it)  
Page: https://designforai.dev/style/neo-brutalism

## Traits

- thick black borders (2-4px) on everything, hard offset shadows (no blur)
- flat, saturated colours: yellow, pink, lime, sky, on cream or white
- zero radius or a tiny 4-6px; elements look like stickers
- big bold grotesk type, sometimes mixed with a mono for labels
- deliberate misalignment, rotated stickers, marquee strips
- interactions are physical: the button moves into its shadow when pressed
- high contrast, loud, playful rather than raw

Palette: #fffdf5 page, #000000 borders and text, #ffde59 primary, #ff6b9d secondary, #9ef01a tertiary, #4d9fff info

Type: Space Grotesk or Archivo Black for headings, Work Sans or IBM Plex Sans for body, Space Mono for tags; headings 800 at 40-72px, body 400-500 at 16-18px

## Do

- use one shadow rule everywhere: 4px 4px 0 #000, and 6px on hover, 0 on active with a matching translate
- keep at least three loud colours and use them at full saturation
- make borders and text the same black so the page reads as one drawing

## Don't

- do not use gradients, blur or soft shadows; hard edges only
- do not go pastel; the style needs punch
- do not add subtle 1px borders; either thick or none

Known for it: Gumroad, Figma community files, Poolsuite, Mschf drops

## CSS seed

```css
:root{--bg:#fffdf5; --fg:#000000; --accent:#ffde59; --accent2:#ff6b9d; --radius:4px; --border:3px solid #000; --shadow:4px 4px 0 #000; --font:'Space Grotesk',sans-serif}
```

## Prompt

Build the site in neo-brutalist style. Page background #fffdf5, all text and borders #000000. Every card, button, input and nav item gets border 3px solid #000, border-radius 4px, box-shadow 4px 4px 0 #000. Colour blocks: primary #ffde59, secondary #ff6b9d, tertiary #9ef01a, info #4d9fff, applied as solid fills to buttons, tags and section backgrounds. Fonts: Space Grotesk 800 for headings at 72/48/32px with tight line-height 1.05, Work Sans 500 for body at 18px, Space Mono for labels in uppercase. No gradients, no blur, no opacity effects. Rotate a couple of decorative tags by -3deg and 2deg. Hover: shadow becomes 6px 6px 0 #000 and element moves -2px/-2px; active: shadow 0 and element moves +4px/+4px, 100ms linear. Spacing chunky: 24px gaps, 32px card padding, 120px section spacing.