neobrutalist-web-designer

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: neobrutalist-web-designer
description: Modern web applications with authentic neobrutalist aesthetic. Bold typography, hard shadows (no blur), thick black borders, high-contrast primary colors, raw visual tension. Extrapolates neobrutalism
  to SaaS dashboards, e-commerce, landing pages, startup MVPs. Activate on 'neobrutalism', 'neubrutalism', 'brutalist', 'bold borders', 'hard shadows', 'raw aesthetic', 'anti-minimalism', 'gumroad style',
  'figma style'. NOT for glassmorphism (use vaporwave-glassomorphic-ui-designer), Windows retro (use windows-3-1-web-designer or windows-95-web-designer), soft shadows, gradients, neumorphism.
allowed-tools: Read,Write,Edit,Glob,Grep
metadata:
  category: Design & Creative
  tags:
  - neobrutalist
  - web
  - designer
  pairs-with:
  - skill: web-design-expert
    reason: Neobrutalism is a specific web design trend requiring general web design foundations
  - skill: typography-expert
    reason: Bold, oversized typography is the defining visual element of neobrutalist design
  - skill: windows-95-web-designer
    reason: Both share retro-inspired thick borders and high-contrast aesthetics with different era references
---

# 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.

## When to Use

**Use for:**
- SaaS dashboards that need bold differentiation (Gumroad, Figma style)
- E-commerce with memorable, raw aesthetic (Tony's Chocolonely style)
- Indie creator platforms and portfolios
- Startup landing pages and MVPs
- Educational platforms seeking approachable boldness
- Music, art, and social media apps
- Any UI that needs to "shout" rather than whisper

**Do NOT use for:**
- Glassmorphism/blur effects → use **vaporwave-glassomorphic-ui-designer**
- Windows 3.1 retro → use **windows-3-1-web-designer**
- Windows 95 retro → use **windows-95-web-designer**
- Soft shadows/neumorphism → use **native-app-designer**
- Subtle corporate design → use **web-design-expert**
- Gradient-heavy aesthetics → NOT neobrutalism

## Neobrutalism vs Similar Styles

| Feature | Neobrutalism | Glassmorphism | Neumorphism | Win31/95 |
|---------|--------------|---------------|-------------|----------|
| Shadows | **Hard (no blur)** | Soft glow | Subtle inset | Beveled |
| Borders | **Thick black strokes** | Subtle/none | None | Beveled |
| Colors | **Bold primaries** | Frosted/pastel | Muted | System gray |
| Background | **Solid flat** | Blur/transparent | Soft gradient | Solid |
| Philosophy | **Raw, exposed** | Ethereal, hidden | Realistic | Functional |

---

## Core Design System

### The Three Pillars of Neobrutalism

1. **Hard Shadows** - Offset, no blur, usually black
2. **Bold Borders** - Thick (2-4px) black strokes
3. **High Contrast** - Primary colors against neutral backgrounds

### Color Palette

| Color | Hex | CSS Variable | Usage |
|-------|-----|--------------|-------|
| Black | #000000 | `--neo-black` | Borders, shadows, text |
| White | #FFFFFF | `--neo-white` | Backgrounds, contrast |
| Cream/Beige | #F5F0E6 | `--neo-cream` | Soft background alternative |
| Red | #FF5252 | `--neo-red` | Danger, emphasis |
| Yellow | #FFEB3B | `--neo-yellow` | Highlights, warnings |
| Blue | #2196F3 | `--neo-blue` | Links, primary actions |
| Pink | #FF4081 | `--neo-pink` | Accent, playful |
| Green | #4CAF50 | `--neo-green` | Success states |
| Orange | #FF9800 | `--neo-orange` | CTAs, attention |
| Purple | #9C27B0 | `--neo-purple` | Creative, premium |

**Color Rules:**
- ✅ Bold primaries with high saturation
- ✅ Black and white for maximum contrast
- ✅ Beige/cream for warmth without softness
- ❌ NO gradients (use flat colors only)
- ❌ NO transparency/opacity (stay opaque)

### The Signature Hard Shadow

**THE defining neobrutalist element** - offset shadow with