Neubrutalism

Also called: Neo-brutalism, Neo Brutalism

Thick black outlines, hard offset shadows and loud flat colours — brutalism made friendly.

“Sticker-bold”Bold & ExpressiveEra: 2020sPlayfulBoldEdgyFriendly

neubrutalism / landingEN

neubrutalism / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

Style palettes

UI Lingo pool

Radius sm6pxRadius md10pxRadius lg14pxRadius xl18pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

thick black bordershard offset shadowzero blurflat saturated coloursticker UIpress-down buttonschunky typeplayful rebellion

Neubrutalism keeps brutalism’s honesty — visible structure, no gradients, no blur — but adds saturated pastel-to-primary colour, chunky type and playful sticker-like components. Every surface has a 2–4px black border and a solid shadow offset down-right with zero blur, so buttons look like physical tiles you can press.

Best for

Startup and indie product launches
Creator tools and portfolios
Developer blogs and newsletters
Gen‑Z facing apps

Avoid for

Luxury or premium brands
Banking and healthcare that need calm trust
Dense enterprise data tools

✓ Do

Use 3px for containers and 2px for small inline items, with one down-right shadow direction
Pair black with 3–4 flat brights
Animate the shadow, not the colour, on press

✕ Don't

No gradients, blur or soft drop shadows
Cards 14px; never beyond 18px (the xl token) except pills and avatars
Don’t use thin hairline borders

Not to be confused with

Brutalism →Brutalism is raw and often ugly on purpose (system fonts, no colour system); Neubrutalism is polished and colourful.Flat Design →Flat design has no borders or shadows at all; Neubrutalism adds thick outlines and hard shadows.Memphis Design →Memphis is about decorative squiggles and confetti shapes; Neubrutalism is about the outlined component itself.

On mobile

Keep the 3px outlines but drop shadows to 3px on small cards; the floating tab bar becomes a bordered sticker. Press states (shadow → 0) feel great under the thumb.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinArchivo · 800

The quick brown fox

Heading · ThaiKanit · 600/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinPublic Sans · 400/500/700

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Kanit matches Archivo’s heavy, squat headlines; IBM Plex Sans Thai mirrors Public Sans’ neutral grotesque body.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 10px · lg 14px · xl 18px · pill 999px`
Border	`3px`
Shadow	`5px 5px 0 var(--c-border)`
Display	`clamp(2.75rem, 6.5vw, 5.25rem)`
Motion	`120ms cubic-bezier(.2,.8,.2,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Neubrutalism (neubrutalism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Archivo:wght@800&family=Public+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Kanit:wght@600;800&family=IBM+Plex+Sans+Thai:wght@400;500;700&display=swap
 */
:root {
  --radius: 14px;
  --background: #FFF8E7;
  --foreground: #0A0A0A;
  --card: #FFFFFF;
  --card-foreground: #0A0A0A;
  --popover: #FFFFFF;
  --popover-foreground: #0A0A0A;
  --primary: #FFD23F;
  --primary-foreground: #0A0A0A;
  --secondary: #FF6B9D;
  --secondary-foreground: #0A0A0A;
  --muted: #FFE8A3;
  --muted-foreground: #3B3B3B;
  --accent: #FFE8A3;
  --accent-foreground: #0A0A0A;
  --destructive: #E5383B;
  --border: #0A0A0A;
  --input: #0A0A0A;
  --ring: #FFD23F;
  --chart-1: #4D7CFE;
  --chart-2: #FF6B9D;
  --chart-3: #FFD23F;
  --chart-4: #2EC4B6;
  --chart-5: #0A0A0A;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0A0A0A;
  --sidebar-primary: #FFD23F;
  --sidebar-primary-foreground: #0A0A0A;
  --sidebar-accent: #FFE8A3;
  --sidebar-accent-foreground: #0A0A0A;
  --sidebar-border: #0A0A0A;
  --sidebar-ring: #FFD23F;
}

.dark {
  --background: #141414;
  --foreground: #FAFAFA;
  --card: #1F1F1F;
  --card-foreground: #FAFAFA;
  --popover: #1F1F1F;
  --popover-foreground: #FAFAFA;
  --primary: #FFD23F;
  --primary-foreground: #0A0A0A;
  --secondary: #FF6B9D;
  --secondary-foreground: #0A0A0A;
  --muted: #2A2A2A;
  --muted-foreground: #C9C9C9;
  --accent: #2A2A2A;
  --accent-foreground: #FAFAFA;
  --destructive: #FF5A5F;
  --border: #FAFAFA;
  --input: #FAFAFA;
  --ring: #FFD23F;
  --chart-1: #7FA0FF;
  --chart-2: #FF6B9D;
  --chart-3: #FFD23F;
  --chart-4: #2EC4B6;
  --chart-5: #FAFAFA;
  --sidebar: #1F1F1F;
  --sidebar-foreground: #FAFAFA;
  --sidebar-primary: #FFD23F;
  --sidebar-primary-foreground: #0A0A0A;
  --sidebar-accent: #2A2A2A;
  --sidebar-accent-foreground: #FAFAFA;
  --sidebar-border: #FAFAFA;
  --sidebar-ring: #FFD23F;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Neubrutalism (neubrutalism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Archivo:wght@800&family=Public+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Kanit:wght@600;800&family=IBM+Plex+Sans+Thai:wght@400;500;700&display=swap
 */
@theme {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFE8A3;
  --color-text: #0A0A0A;
  --color-text-muted: #3B3B3B;
  --color-primary: #FFD23F;
  --color-on-primary: #0A0A0A;
  --color-secondary: #FF6B9D;
  --color-on-secondary: #0A0A0A;
  --color-accent: #4D7CFE;
  --color-border: #0A0A0A;
  --color-success: #1F9D55;
  --color-warning: #E8A100;
  --color-danger: #E5383B;
  --color-chart-1: #4D7CFE;
  --color-chart-2: #FF6B9D;
  --color-chart-3: #FFD23F;
  --color-chart-4: #2EC4B6;
  --color-chart-5: #0A0A0A;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-sm: 3px 3px 0 var(--color-border);
  --shadow-md: 5px 5px 0 var(--color-border);
  --shadow-lg: 8px 8px 0 var(--color-border);
  --font-heading: "Archivo", "Kanit", system-ui, sans-serif;
  --font-body: "Public Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

.dark {
  --color-bg: #141414;
  --color-surface: #1F1F1F;
  --color-surface-2: #2A2A2A;
  --color-text: #FAFAFA;
  --color-text-muted: #C9C9C9;
  --color-primary: #FFD23F;
  --color-on-primary: #0A0A0A;
  --color-secondary: #FF6B9D;
  --color-on-secondary: #0A0A0A;
  --color-accent: #7FA0FF;
  --color-border: #FAFAFA;
  --color-success: #3DDC84;
  --color-warning: #FFC145;
  --color-danger: #FF5A5F;
  --color-chart-1: #7FA0FF;
  --color-chart-2: #FF6B9D;
  --color-chart-3: #FFD23F;
  --color-chart-4: #2EC4B6;
  --color-chart-5: #FAFAFA;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Neubrutalism (neubrutalism). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Archivo:wght@800&family=Public+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Kanit:wght@600;800&family=IBM+Plex+Sans+Thai:wght@400;500;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9059
          ],
          "hex": "#fff8e7"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9098,
            0.6392
          ],
          "hex": "#ffe8a3"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.2314,
            0.2314
          ],
          "hex": "#3b3b3b"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.2471
          ],
          "hex": "#ffd23f"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.6157
          ],
          "hex": "#ff6b9d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.302,
            0.4863,
            0.9961
          ],
          "hex": "#4d7cfe"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.6157,
            0.3333
          ],
          "hex": "#1f9d55"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.6314,
            0
          ],
          "hex": "#e8a100"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.2196,
            0.2314
          ],
          "hex": "#e5383b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.302,
            0.4863,
            0.9961
          ],
          "hex": "#4d7cfe"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.6157
          ],
          "hex": "#ff6b9d"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.2471
          ],
          "hex": "#ffd23f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.7686,
            0.7137
          ],
          "hex": "#2ec4b6"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0784,
            0.0784
          ],
          "hex": "#141414"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1216,
            0.1216
          ],
          "hex": "#1f1f1f"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1647,
            0.1647
          ],
          "hex": "#2a2a2a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9804,
            0.9804,
            0.9804
          ],
          "hex": "#fafafa"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.7882,
            0.7882
          ],
          "hex": "#c9c9c9"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.2471
          ],
          "hex": "#ffd23f"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.6157
          ],
          "hex": "#ff6b9d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0392
          ],
          "hex": "#0a0a0a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.6275,
            1
          ],
          "hex": "#7fa0ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9804,
            0.9804,
            0.9804
          ],
          "hex": "#fafafa"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.8627,
            0.5176
          ],
          "hex": "#3ddc84"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7569,
            0.2706
          ],
          "hex": "#ffc145"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.3725
          ],
          "hex": "#ff5a5f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.6275,
            1
          ],
          "hex": "#7fa0ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.6157
          ],
          "hex": "#ff6b9d"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.2471
          ],
          "hex": "#ffd23f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.7686,
            0.7137
          ],
          "hex": "#2ec4b6"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9804,
            0.9804,
            0.9804
          ],
          "hex": "#fafafa"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 3,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.0392,
              0.0392
            ],
            "hex": "#0a0a0a"
          },
          "offsetX": {
            "value": 3,
            "unit": "px"
          },
          "offsetY": {
            "value": 3,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.0392,
              0.0392
            ],
            "hex": "#0a0a0a"
          },
          "offsetX": {
            "value": 5,
            "unit": "px"
          },
          "offsetY": {
            "value": 5,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.0392,
              0.0392
            ],
            "hex": "#0a0a0a"
          },
          "offsetX": {
            "value": 8,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Archivo",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Public Sans",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Space Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 120,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: claude-haiku-5-5
Auditor: claude-opus-5-5

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!