neobrutalist-web-designer

Neobrutalist Web Designer

Creates modern 2026 web applications with authentic neobrutalist aesthetic. Not recreating brutalist architecture—extrapolating neobrutalism to modern digital contexts: SaaS products, e-commerce, indie creator platforms, and startup MVPs that need to stand out.

Decision Points

Color + Border + Shadow Selection by Component

Button States:
├── Primary CTA → Yellow bg + 3px black border + 4px hard shadow
├── Secondary → White bg + 3px black border + 4px hard shadow  
├── Danger → Red bg + 3px black border + 4px hard shadow
└── Ghost → Transparent bg + 3px black border + no shadow

Card Hierarchy: ├── Hero card → Bold accent color bg + 4px border + 8px shadow ├── Content card → White bg + 3px border + 6px shadow ├── Data card → Cream bg + 3px border + 4px shadow └── Inline card → White bg + 2px border + 3px shadow

Input Focus States: ├── Default → White bg + 3px black border + no shadow ├── Focus → White bg + 3px black border + 4px shadow ├── Error → White bg + 3px red border + 4px red shadow └── Success → White bg + 3px green border + 4px green shadow

Layout Container Choices: ├── Page hero → Full-width solid color + no border ├── Content section → Max-width + 4px bottom border ├── Sidebar → Solid bg + 4px right border └── Modal → White bg + 4px border + 12px shadow

### Typography Pairing Decision Tree

Text Purpose: ├── Hero headline → Archivo Black + 4-8rem + uppercase + -2% letter-spacing ├── Section header → Archivo Black + 2-3rem + uppercase ├── Body text → Space Grotesk + 1.125rem + normal case ├── Button text → Archivo Black + 1rem + uppercase ├── Form labels → Space Grotesk + 0.875rem + bold + uppercase └── Code/data → JetBrains Mono + 0.875rem + normal case

Context Modifiers: ├── SaaS dashboard → More readable fonts, less extreme sizing ├── Landing page → Maximum impact fonts, oversized headlines ├── E-commerce → Product names bold, prices in display font └── Blog/content → Prioritize readability with geometric sans

### Responsive Shadow/Border Scaling

Screen Size: ├── Mobile (<640px) → 2px borders + 3px shadows ├── Tablet (640-1024px) → 3px borders + 4px shadows ├── Desktop (1024-1440px) → 4px borders + 6px shadows └── Large (>1440px) → 4px borders + 8px shadows

Element Importance: ├── Hero elements → +2px to standard shadow ├── Interactive elements → Standard shadow + hover growth ├── Background cards → -1px from standard shadow └── Decorative elements → Half standard shadow

## Failure Modes

### **Shadow Softness Syndrome**
**Symptom**: Using `box-shadow: 0 4px 6px rgba(0,0,0,0.1)` with blur
**Detection rule**: If you see ANY blur value > 0 in shadows
**Diagnosis**: Applying generic web design instead of neobrutalism
**Fix**: Replace with `box-shadow: 4px 4px 0 #000000` (offset, no blur)

### **Gradient Creep**  
**Symptom**: Adding `linear-gradient()` or `radial-gradient()` backgrounds
**Detection rule**: If you see ANY gradient in CSS
**Diagnosis**: Trying to "soften" the aesthetic with blending
**Fix**: Pick ONE solid color per element. Embrace the flatness completely.

### **Border Timidity**
**Symptom**: Using `border: 1px solid #ddd` or similar thin borders  
**Detection rule**: If border width < 2px or color is not high-contrast
**Diagnosis**: Fear of visual weight, defaulting to subtle design
**Fix**: Use `border: 3px solid #000000` minimum. Bold borders define neobrutalism.

### **Shadow Overload Chaos**
**Symptom**: Every element has different shadow directions/sizes randomly
**Detection rule**: If >3 different shadow patterns exist on same screen
**Diagnosis**: Inconsistent design system application
**Fix**: Standardize to 2-3 shadow sizes maximum. Same direction (4px 4px) everywhere.

### **Contrast Cowardice**
**Symptom**: Using muted pastels (#F0F0F0, #E8E8E8) instead of bold colors
**Detection rule**: If background colors have <7:1 contrast ratio with text
**Diagnosis**: Avoiding visual tension that defines the aesthetic  
**Fix**: Use true primaries (#FF5252, #FFEB3B) with black/white text for maximum contrast.

## Worked Examples

### Example 1: E-commerce Product Card Transformation

**Before (Generic Card)**:
```css
.product-card {
  background: #fff;
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 16px;
}

Decision Process:

1. Border choice: Generic → Neobrutalist requires 3px+ black border
2. Shadow choice: Soft blur → Must be hard shadow with offset
3. Background: White OK, but needs high contrast with border
4. Border-radius: 12px too soft → Reduce to 4px or remove entirely

After (Neobrutalist Card):

.neo-product-card {
  background: #FFFFFF;
  border: 3px solid #000000;
  border-radius: 4px; /* Minimal softening */
  box-shadow: 6px 6px 0 #000000; /* Hard shadow */
  padding: 1rem;
  transition: all 0.1s ease;
}

.neo-product-card:hover {
  box-shadow: 8px 8px 0 #000000;
  transform: translate(-2px, -2px); /* Physical movement */
}

What novice misses: The hover state needs physical feedback (transform) + shadow growth, not just color changes.

Example 2: SaaS Dashboard "Too Many Shadows" Fix

Problem: Designer used 6 different shadow patterns across dashboard components.

Failure symptoms detected:

• Cards: box-shadow: 2px 4px 0 #000
• Buttons: box-shadow: 4px 4px 0 #000
• Modals: box-shadow: 8px 12px 0 #000
• Tooltips: box-shadow: 3px 3px 0 #000
• Alerts: box-shadow: 6px 6px 0 #000
• Navigation: box-shadow: 1px 2px 0 #000

Decision process:

1. Audit existing shadows → Found 6 different patterns
2. Categorize by importance → Hero (8px), Standard (6px), Subtle (3px)
3. Apply consistently → Same elements use same shadows
4. Verify hierarchy → Most important elements have largest shadows

Solution:

/* Standardized shadow system */
:root {
  --shadow-hero: 8px 8px 0 #000000;    /* Modals, hero cards */
  --shadow-standard: 6px 6px 0 #000000; /* Regular cards, buttons */
  --shadow-subtle: 3px 3px 0 #000000;   /* Small elements, tooltips */
}

Result: Visual hierarchy became clear, design felt cohesive instead of chaotic.

Example 3: Form Validation with Neobrutalist States

Challenge: Show error/success states without soft styling.

Novice approach: Red text color change only Expert approach: Color + border + shadow coordination

/* Base input */
.neo-input {
  background: #FFFFFF;
  border: 3px solid #000000;
  padding: 0.75rem 1rem;
  box-shadow: none;
}

/* Focus state */
.neo-input:focus {
  box-shadow: 4px 4px 0 #000000;
  outline: none;
}

/* Error state - coordinated red theme */
.neo-input--error {
  border-color: #FF5252;
  box-shadow: 4px 4px 0 #FF5252;
}

/* Success state - coordinated green theme */
.neo-input--success {
  border-color: #4CAF50;
  box-shadow: 4px 4px 0 #4CAF50;
}

What expert catches: Error states need FULL visual coordination (border + shadow color match), not just text color changes.

Quality Gates

• All shadows use 0 blur value (hard shadows only)
• Contrast ratio ≥7:1 between text and background colors
• Shadow count ≤3 different sizes across entire interface
• All borders are ≥2px width with high-contrast colors
• Primary elements use bold accent colors (#FF5252, #FFEB3B, #2196F3)
• No gradients or transparency effects used anywhere
• Interactive elements have physical hover feedback (transform + shadow change)
• Typography uses display fonts for headers, geometric sans for body
• Border-radius ≤4px (or 0px for sharp corners)
• Color palette limited to ≤5 colors total (including black/white)

Not-For Boundaries

Do NOT use neobrutalist-web-designer for:

• Glassmorphism/blur effects → Use vaporwave-glassomorphic-ui-designer instead
• Windows 3.1/95 retro styling → Use windows-3-1-web-designer or windows-95-web-designer
• Soft shadows and neumorphism → Use native-app-designer instead
• Corporate subtle/minimal design → Use web-design-expert instead
• Gradient-heavy aesthetics → No specific alternative, avoid gradients entirely
• Medical/legal interfaces requiring calm → Use accessibility-first-designer instead
• Data visualization requiring subtlety → Use data-visualization-expert instead

Delegate to other skills when user asks for:

• "Soft professional look" → web-design-expert
• "Accessible government site" → accessibility-first-designer
• "Glassmorphism effects" → vaporwave-glassomorphic-ui-designer
• "Windows retro aesthetic" → windows-95-web-designer
• "Subtle data dashboard" → data-visualization-expert