Design for AI

Neo-brutalism: UI design prompt

Palette, type rules and a pasteable prompt for neo-brutalism. Also called neubrutalism, neo-brutalist web, Gumroad style, thick-border UI. 2021-2024 (Gumroad redesign 2021 popularised it).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

## Tokens
: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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.

Snippets in this style

All brutalist buttons