neobrutalism

name	Neobrutalism
description	Bold, aggressive, no-nonsense design with thick black borders, hard shadows, and high-contrast colors. Use this when you want maximum visual impact, energy, and rebellion against polished aesthetics—perfect for indie products, creative portfolios, and brands targeting young/tech audiences.

What is Neobrutalism?

Neobrutalism is a web design movement reacting against the flat, polished, minimalist aesthetic that dominated the 2010s. It embraces:

• Raw physicality: Visible borders and hard shadows that feel tangible and weighted
• Unapologetic boldness: No apologies for taking up space or being loud
• Anti-design: Deliberately rejecting "good taste" to feel more authentic and human
• Grid/structure visibility: Often exposes the underlying layout grid
• Typography as graphic: Text becomes part of the visual composition, not just content

Historical context: A reaction to skeuomorphism's fussiness AND minimalism's sterility. Popularized by Gumroad's 2023 redesign, embraced by brands like Are.na, Cargo, and young crypto/tech startups.

Core Principles

1. Thick black borders (2-4px solid #000000) — Creates hard edges and visual weight. Everything feels solid and present.
2. Hard shadows (4px 4px 0px #000, 6px 6px 0px #000) — Offset shadows (never blurred) create a printed/stamped effect, not a floating one.
3. No border-radius — Sharp corners = sharper, more aggressive feel. (Rare exception: 2-4px for readability only.)
4. High-contrast loud colors — Acid yellows (#FFD700, #FFFF00), hot pink (#FF69B4), electric blue (#4169E1), lime (#00FF00) paired with black.
5. Monospace or heavy sans-serif typography — Courier New, IBM Plex Mono, Roboto Black, Bebas Neue emphasize the "raw, honest" ethos.
6. Visible grid/structure — Layout lines, dotted borders, explicit spacing dividers reinforce the constructed nature.

Visual Language

/* Core neobrutalism CSS patterns */

/* Borders & shadows */
border: 2px solid #000000;
box-shadow: 4px 4px 0px #000000;

/* Alternative hard shadows for depth */
box-shadow: 6px 6px 0px #000000, 8px 8px 0px rgba(0, 0, 0, 0.2);

/* No gradients, no subtle colors */
background-color: #FFFFFF;

/* Accent colors: pick ONE loud color per component */
background-color: #FFD700; /* Gold */
background-color: #FF69B4; /* Hot Pink */
background-color: #4169E1; /* Electric Blue */

/* Typography */
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: clamp(1.25rem, 5vw, 3rem);
letter-spacing: -0.02em; /* Tight tracking adds aggression */

/* Spacing: use 8px, 16px, 24px, 32px grid */
padding: 24px;
margin: 32px 0;

/* No rounded corners */
border-radius: 0px;

Component Patterns

Buttons

.btn-neobrutalism {
  border: 3px solid #000000;
  background: #FFD700;
  padding: 16px 32px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 4px 4px 0px #000000;
  transition: all 0.05s ease-out;
}

.btn-neobrutalism:hover {
  box-shadow: 6px 6px 0px #000000; /* Deepen shadow on hover */
  transform: translate(-1px, -1px);
}

.btn-neobrutalism:active {
  box-shadow: 2px 2px 0px #000000; /* Flatten on click */
  transform: translate(2px, 2px);
}

Cards

.card-neobrutalism {
  border: 3px solid #000000;
  background: #FFFFFF;
  padding: 32px;
  box-shadow: 6px 6px 0px #000000;
  position: relative;
}

.card-neobrutalism::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed #000000;
  opacity: 0.3;
  pointer-events: none;
}

Input Fields

.input-neobrutalism {
  border: 2px solid #000000;
  padding: 12px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  background: #FFFFFF;
}

.input-neobrutalism:focus {
  outline: none;
  box-shadow: 0 0 0 4px #FFD700;
  border-color: #000000;
}

Code Generation Guidance

When implementing neobrutalism, follow this decision tree:

1. Every interactive element must have a border (minimum 2px solid #000)
2. Every element that "sits" must have a shadow (4px 4px 0px #000 or stronger)
3. Typography must be at least semi-bold (weight ≥ 600)
4. Color must choose: black + white + ONE acid color (gold, hot pink, electric blue, lime)
5. Spacing must be visible and generous (24px+ gaps between major sections)
6. No blur, no gradients, no transparency abuse (except shadows)

For React:

const NeobrutalistButton = ({ label, onClick }) => (
  <button
    onClick={onClick}
    style={{
      border: '3px solid #000',
      background: '#FFD700',
      padding: '16px 32px',
      fontFamily: 'IBM Plex Mono, monospace',
      fontWeight: 700,
      boxShadow: '4px 4px 0px #000',
      cursor: 'pointer',
    }}
  >
    {label}
  </button>
);

Accessibility Notes

• High contrast borders (black on white) exceed WCAG AAA standards (7:1 ratio)
• Monospace typography must be at least 14px for body text to ensure readability
• Hard shadows don't convey information; use explicit text labels for button states
• Avoid pure #000/#FFF on colored backgrounds; adjust to #1A1A1A/#F5F5F5 for sustained reading
• Keyboard navigation: Ensure focus states are visible via outline or box-shadow

Examples

Input: E-commerce "Add to Cart" Button

Output (Neobrutalism):

<button
  style={{
    border: '4px solid #000000',
    background: '#FF69B4',
    color: '#FFFFFF',
    padding: '20px 40px',
    fontFamily: 'IBM Plex Mono, monospace',
    fontWeight: 700,
    fontSize: '1.125rem',
    boxShadow: '6px 6px 0px #000000',
    textTransform: 'uppercase',
  }}
>
  Add to Bag!
</button>

Input: Product Card Layout

Output (Neobrutalism):

<div style={{
  border: '3px solid #000000',
  padding: '24px',
  background: '#FFFFFF',
  boxShadow: '4px 4px 0px #000000',
}}>
  <img src="product.jpg" alt="Product" style={{ border: '2px solid #000000' }} />
  <h3 style={{ fontFamily: 'Bebas Neue', fontSize: '1.75rem', margin: '16px 0' }}>
    BOLD PRODUCT NAME
  </h3>
  <p style={{ fontFamily: 'IBM Plex Mono', fontSize: '0.9rem', color: '#666' }}>
    $99.99
  </p>
  <div style={{
    border: '2px solid #FFD700',
    padding: '12px',
    marginTop: '16px',
    background: '#FFD700',
    fontWeight: 700,
  }}>
    BUY NOW
  </div>
</div>