Neo-Brutalism

Neo-Brutalism

"Brutalism, but make it pop. Hard lines, stark shadows, and vibrant, unashamed colors."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Hard Drop Shadows: Solid black shadows with no blur. Usually offset by a few pixels down and to the right.
2. Thick Outlines: Everything has a heavy, solid black border (usually 2px-4px).
3. Flat, High-Contrast Colors: Bright, saturated pastels or primary colors contrasting against pure white or black.

Visual DNA

• Colors: Start with an off-white background (like #FDF8F5), add stark black borders #000000, and use saturated accents like lemon yellow, bright cyan, or coral.
• Typography: Very bold, geometric sans-serifs (e.g., Space Grotesk, Archivo Black, Inter Black).
• Shapes: Sharp rectangles or completely rounded pill shapes, but always with a heavy stroke.

Web Implementation

• The defining feature is the box-shadow with 0 blur.
• CSS Example:

:root {
  --neo-border: 3px solid #000000;
  --neo-shadow: 6px 6px 0px #000000;
  --neo-bg: #F4F4F0;
  --neo-accent: #FF3366;
}

body {
  background-color: var(--neo-bg);
  font-family: 'Space Grotesk', sans-serif;
}

.neo-card {
  background-color: #ffffff;
  border: var(--neo-border);
  box-shadow: var(--neo-shadow);
  border-radius: 8px; /* Optional, sharp is fine too */
  padding: 32px;