Neubrutalism

---
name: neubrutalism
description: Apply the Neubrutalism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Neubrutalism, mentions neo-brutalism, neobrutalist, brutalist pop, or describes thick black borders, hard offset shadows, flat vivid colors — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Neubrutalism Design System

A loud, friendly take on brutalism: flat vivid color blocks, thick black borders, hard offset shadows, and chunky type. Everything looks like a sticker you could peel off the page.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Neubrutalism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (neo-brutalism, neobrutalist, brutalist pop), or describes its traits: thick black borders; hard offset shadows; flat vivid colors; chunky display type; no gradients or blur.

## Design tokens

### Color palette

- Warm off-white page background: `#fef2e8` (--color-bg)
- Card and panel background: `#ffffff` (--color-surface)
- Primary text, pure black: `#000000` (--color-text)
- Secondary text: `#3d3d3d` (--color-text-muted)
- Primary accent, hot pink: `#ff90e8` (--color-accent)
- Secondary accent, taxi yellow: `#ffc900` (--color-accent-2)
- Tertiary accent, teal: `#23a094` (--color-accent-3)
- All borders, pure black: `#000000` (--color-border)

### Typography

- Display / headings: Archivo Black (fallback: Arial Black, sans-serif)
- Body: Public Sans (fallback: Helvetica, Arial, sans-serif)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.05, letter-spacing -0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Compact inside components, generous between sections; elements sit close enough that their borders almost touch.
- Border radius: none 0px, sm 6px, pill 999px — Either sharp corners or a small 6px round; never large soft radii. Pills only for tags.
- Border treatment: 2px solid #000000 — Every card, button, and input gets the full 2px black border. 3px for emphasis.

### Shadows

- hard: `4px 4px 0 #000000` — Default for cards and buttons
- hard-hover: `6px 6px 0 #000000` — Hover state of hard-shadow elements
- hard-lg: `8px 8px 0 #000000` — Hero panels and modals
- pressed: `0 0 0 #000000` — Active/pressed state — element translates 4px toward the shadow

### Layout

- Max content width: 1200px
- Blocky sections with visible seams
- Sticker-like elements can overlap section boundaries slightly
- Grid gaps wide enough that black borders never merge

### Effects

- Occasional rotated (-2deg to 2deg) sticker elements
- Marquee or ticker strips for announcements

### Motion

- Easing: steps(1, end); durations 0ms / 100ms / 150ms
- Press effect: translate(4px, 4px) and swap to the pressed shadow on :active — instant (fast duration)
- Hover swaps hard to hard-hover shadow at base duration
- Snappy, near-instant state changes; no eased fades

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fef2e8;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-text-muted: #3d3d3d;
  --color-accent: #ff90e8;
  --color-accent-2: #ffc900;
  --color-accent-3: #23a094;
  --color-border: #000000;
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow-hard: 4px 4px 0 #000000;
  --shadow-hard-hover: 6px 6px 0 #000000;
  --shadow-hard-lg: 8px 8px 0 #000000;
  --shadow-pressed: 0 0 0 #000000;
  --border-default: 2px solid #000000;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Public Sans", Helvetica, Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.05;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: steps(1, end);
  --duration-fast: 0ms;
  --duration-base: 100ms;
  --duration-slow: 150ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400&family=Public+Sans:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 64px tall, page bg (--color-bg) with 2px black bottom border; logo in display face; nav links as bordered pill tags with the standard press-collapse behavior
- **Hero:** Giant Archivo Black headline (up to 96px), one accent-color highlight box behind a key word, bordered CTA with hard shadow
- **Card:** White surface, 2px black border, hard 4px shadow, 24px padding, optional accent color header strip
- **Button (primary):** Accent bg, black text, 2px black border, hard shadow, collapses on press
- **Button (secondary):** White bg, black text, same border and shadow treatment
- **Form fields:** White bg, 2px black border, no inner shadow; focus moves border to 3px and adds hard shadow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Solid offset drop-shadows (4px 4px 0 #000) paired with 2px black borders on every interactive element; pressing a button visually collapses the shadow. Spend boldness here; keep everything else quiet.

## Do

- Give every element a full black border and a hard shadow — consistency is the style
- Use flat, saturated fills straight from the palette
- Let headlines be oversized and slightly absurd
- Use the press-collapse interaction on all clickable elements

## Don't

- No gradients, blurs, or soft shadows anywhere
- No thin gray hairline borders — borders are black and thick or absent
- Don't desaturate the palette to make it 'tasteful'; restraint kills the style
- No rounded corners above 8px except pills

## Accessibility notes

- Black-on-accent combinations pass contrast easily, but check white text on yellow (#ffc900) — it fails; always use black text on accent fills
- The press-translate effect must respect prefers-reduced-motion

## Reference sites

- Gumroad: https://gumroad.com
- Neobrutalism components: https://www.neobrutalism.dev
- Figma brand pages: https://www.figma.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip neubrutalism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/neubrutalism.json

Settings → Capabilities → Skills → Upload skill → neubrutalism.zip