/neubrutalism

name: neubrutalism
description: Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
license: MIT
user-invocable: false
disable-model-invocation: false

Neubrutalism Design Spec

Core Principles

1. **Thick Borders** — Bold `3–5px solid` black outlines on all elements 2. **Offset Solid Shadows** — Hard-edge `box-shadow` with zero blur (e.g. `5px 5px 0 #000`) 3. **High Saturation Colors** — Vivid, punchy fills: pinks, yellows, blues, greens 4. **Minimal Radius** — `0–8px` border-radius; sharp or barely rounded corners 5. **Flat Aesthetic** — No gradients, no blur, no transparency

CSS Tokens

Reference: [references/tokens.css](references/tokens.css)

@import 'references/tokens.css';

.nb-card {
  background: var(--nb-yellow);
  border: var(--nb-border-thick);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
}

Component Examples

Card

.nb-card {
  background: var(--nb-white);
  border: var(--nb-border-thick);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
  padding: 1.5rem;
}

Button

.nb-btn {
  background: var(--nb-yellow);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow-sm);
  padding: 0.6rem 1.4rem;
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.nb-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--nb-shadow);
}
.nb-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

Navbar

.nb-nav {
  background: var(--nb-bg);
  border-bottom: var(--nb-border-thick);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

Input

.nb-input {
  background: var(--nb-white);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow-sm);
  padding: 0.6rem 1rem;
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight-body);
}
.nb-input:focus {
  outline: none;
  box-shadow: var(--nb-shadow);
}

Badge

.nb-badge {
  background: var(--nb-pink);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  padding: 0.2rem 0.8rem;
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight);
  font-size: 0.85rem;
}

Typography

• Use bold, geometric sans-serif fonts (Space Grotesk, Inter, etc.)
• Headings: `font-weight: 700`, `letter-spacing: -0.02em`
• Body: `font-weight: 500`
• Uppercase sparingly for labels/badges

h1, h2, h3 {
  font-family: var(--nb-font-heading);
  font-weight: var(--nb-font-weight);
  letter-spacing: var(--nb-letter-spacing);
}
body {
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight-body);
}

Accessibility Notes

• Thick borders provide strong visual boundaries — good for low-vision users
• Ensure color contrast ≥ 4.5:1 for text on colored backgrounds
• Active/hover states use `transform` shifts — provide `prefers-reduced-motion` fallback

@media (prefers-reduced-motion: reduce) {
  .nb-btn:hover, .nb-btn:active {
    transform: none;
  }
}