Back to Details

neobrutalist-web-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
打造具有纯正新粗野主义美学的2026款现代Web应用。并非复刻粗野主义建筑——而是将新粗野主义延伸至现代数字场景：需要脱颖而出的SaaS产品、电商平台、独立创作者平台以及初创公司MVP。

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
适用场景：
  • 需要鲜明差异化的SaaS仪表盘（Gumroad、Figma风格）
  • 具有难忘原始美学的电商平台（Tony's Chocolonely风格）
  • 独立创作者平台与作品集
  • 初创公司着陆页与MVP
  • 追求亲切醒目风格的教育平台
  • 音乐、艺术与社交媒体应用
  • 任何需要“引人注目”而非“低调内敛”的UI
不适用场景：
  • 玻璃拟态/模糊效果 → 请使用 vaporwave-glassomorphic-ui-designer
  • Windows 3.1复古风格 → 请使用 windows-3-1-web-designer
  • Windows 95复古风格 → 请使用 windows-95-web-designer
  • 软阴影/新拟态 → 请使用 native-app-designer
  • 低调企业设计 → 请使用 web-design-expert
  • 大量使用渐变的美学风格 → 不属于新粗野主义

Neobrutalism vs Similar Styles

新粗野主义与相似风格对比

FeatureNeobrutalismGlassmorphismNeumorphismWin31/95
ShadowsHard (no blur)Soft glowSubtle insetBeveled
BordersThick black strokesSubtle/noneNoneBeveled
ColorsBold primariesFrosted/pastelMutedSystem gray
BackgroundSolid flatBlur/transparentSoft gradientSolid
PhilosophyRaw, exposedEthereal, hiddenRealisticFunctional
特性新粗野主义玻璃拟态新拟态Win31/95
阴影硬阴影（无模糊）柔和光晕微妙内阴影斜面效果
边框粗黑描边细微/无边框无边框斜面效果
色彩醒目原色磨砂/马卡龙色柔和色调系统灰色
背景纯色扁平模糊/透明柔和渐变纯色
设计理念原始、直白空灵、隐蔽写实功能性

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
  1. 硬阴影 - 偏移、无模糊，通常为黑色
  2. 粗边框 - 粗（2-4px）黑描边
  3. 高对比度 - 原色搭配中性背景

Color Palette

调色板

ColorHexCSS VariableUsage
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)
颜色十六进制值CSS变量用途
黑色#000000
--neo-black
边框、阴影、文本
白色#FFFFFF
--neo-white
背景、对比色
奶油色/米色#F5F0E6
--neo-cream
柔和背景替代色
红色#FF5252
--neo-red
危险提示、强调
黄色#FFEB3B
--neo-yellow
高亮、警告
蓝色#2196F3
--neo-blue
链接、主要操作
粉色#FF4081
--neo-pink
强调色、活泼风格
绿色#4CAF50
--neo-green
成功状态
橙色#FF9800
--neo-orange
主行动按钮、吸引注意力
紫色#9C27B0
--neo-purple
创意、高端风格
色彩规则：
  • ✅ 饱和度高的醒目原色
  • ✅ 黑白配色实现极致对比
  • ✅ 米色/奶油色增添温暖感但不失硬朗
  • ❌ 禁止使用渐变（仅使用纯色）
  • ❌ 禁止使用透明/透明度（保持不透明）

The Signature Hard Shadow

标志性硬阴影

THE defining neobrutalist element - offset shadow with zero blur:
css
.neo-shadow {
  /* THE neobrutalist shadow formula */
  box-shadow: 4px 4px 0 #000000;
}

.neo-shadow--deep {
  box-shadow: 8px 8px 0 #000000;
}

.neo-shadow--subtle {
  box-shadow: 2px 2px 0 #000000;
}

/* Hover: shadow grows */
.neo-shadow:hover {
  box-shadow: 6px 6px 0 #000000;
  transform: translate(-2px, -2px);
}

/* Active: shadow shrinks (pressed) */
.neo-shadow:active {
  box-shadow: 2px 2px 0 #000000;
  transform: translate(2px, 2px);
}
新粗野主义的核心元素 - 偏移阴影，无模糊：
css
.neo-shadow {
  /* THE neobrutalist shadow formula */
  box-shadow: 4px 4px 0 #000000;
}

.neo-shadow--deep {
  box-shadow: 8px 8px 0 #000000;
}

.neo-shadow--subtle {
  box-shadow: 2px 2px 0 #000000;
}

/* Hover: shadow grows */
.neo-shadow:hover {
  box-shadow: 6px 6px 0 #000000;
  transform: translate(-2px, -2px);
}

/* Active: shadow shrinks (pressed) */
.neo-shadow:active {
  box-shadow: 2px 2px 0 #000000;
  transform: translate(2px, 2px);
}

Bold Border System

粗边框系统

css
.neo-border {
  border: 3px solid #000000;
}

.neo-border--thick {
  border: 4px solid #000000;
}

.neo-border--thin {
  border: 2px solid #000000;
}

/* Colored borders for emphasis */
.neo-border--accent {
  border: 3px solid var(--neo-pink);
}
css
.neo-border {
  border: 3px solid #000000;
}

.neo-border--thick {
  border: 4px solid #000000;
}

.neo-border--thin {
  border: 2px solid #000000;
}

/* Colored borders for emphasis */
.neo-border--accent {
  border: 3px solid var(--neo-pink);
}

Typography

排版

UseFont SuggestionFallbackStyle
HeadlinesArchivo BlackImpact, sans-serifBold, condensed
BodySpace GroteskArial, sans-serifClean, geometric
AccentLexend MegaTrebuchet, sans-serifWide, bold
MonoJetBrains MonoCourier NewCode, retro
DisplayBebas NeueImpactAll-caps impact
Typography Rules:
css
:root {
  --font-neo-display: 'Archivo Black', 'Impact', sans-serif;
  --font-neo-body: 'Space Grotesk', 'Arial', sans-serif;
  --font-neo-accent: 'Lexend Mega', sans-serif;
  --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Headlines are BOLD and often oversized */
h1 {
  font-family: var(--font-neo-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Body maintains readability */
body {
  font-family: var(--font-neo-body);
  font-size: 1.125rem;
  line-height: 1.6;
}
用途推荐字体备选字体样式
标题Archivo BlackImpact, sans-serif粗体、紧凑
正文Space GroteskArial, sans-serif简洁、几何感
强调文本Lexend MegaTrebuchet, sans-serif宽幅、粗体
代码JetBrains MonoCourier New代码风格、复古
展示文本Bebas NeueImpact全大写、醒目
排版规则：
css
:root {
  --font-neo-display: 'Archivo Black', 'Impact', sans-serif;
  --font-neo-body: 'Space Grotesk', 'Arial', sans-serif;
  --font-neo-accent: 'Lexend Mega', sans-serif;
  --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Headlines are BOLD and often oversized */
h1 {
  font-family: var(--font-neo-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Body maintains readability */
body {
  font-family: var(--font-neo-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

Modern Extrapolations

现代延伸应用

SaaS Dashboard: The Gumroad Paradigm

SaaS仪表盘：Gumroad范式

Neobrutalism for SaaS emphasizes function over flourish:
┌────────────────────────────────────────────────────────┐
│ ██████████████████████████████████████████████████████ │
│ █ DASHBOARD                              [?] [⚙] [👤] █│
│ ██████████████████████████████████████████████████████ │
├────────────────────────────────────────────────────────┤
│ ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│ │ ████████████ │  │ ████████████ │  │ ████████████ │  │
│ │ REVENUE      │  │ CUSTOMERS    │  │ PRODUCTS     │  │
│ │ ════════════ │  │ ════════════ │  │ ════════════ │  │
│ │ $12,450      │  │ 1,234        │  │ 12           │  │
│ │ ↑ 23%        │  │ ↑ 15%        │  │ → 0%         │  │
│ └──────────────┘  └──────────────┘  └──────────────┘  │
│                                                        │
│ ┌────────────────────────────────────────────────────┐│
│ │ RECENT SALES                              [View All]││
│ │ ════════════════════════════════════════════════════││
│ │ ▓ Product A          $49.00         Jan 31, 10:23  ││
│ │ ▓ Product B          $29.00         Jan 31, 09:45  ││
│ │ ▓ Product A          $49.00         Jan 31, 08:12  ││
│ └────────────────────────────────────────────────────┘│
└────────────────────────────────────────────────────────┘
Key patterns:
  • Cards with hard shadows
  • Bold section headers
  • High-contrast data display
  • Black borders on everything
  • Flat, solid background colors
面向SaaS的新粗野主义强调功能优先于装饰：
┌────────────────────────────────────────────────────────┐
│ ██████████████████████████████████████████████████████ │
│ █ DASHBOARD                              [?] [⚙] [👤] █│
│ ██████████████████████████████████████████████████████ │
├────────────────────────────────────────────────────────┤
│ ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│ │ ████████████ │  │ ████████████ │  │ ████████████ │  │
│ │ REVENUE      │  │ CUSTOMERS    │  │ PRODUCTS     │  │
│ │ ════════════ │  │ ════════════ │  │ ════════════ │  │
│ │ $12,450      │  │ 1,234        │  │ 12           │  │
│ │ ↑ 23%        │  │ ↑ 15%        │  │ → 0%         │  │
│ └──────────────┘  └──────────────┘  └──────────────┘  │
│                                                        │
│ ┌────────────────────────────────────────────────────┐│
│ │ RECENT SALES                              [View All]││
│ │ ════════════════════════════════════════════════════││
│ │ ▓ Product A          $49.00         Jan 31, 10:23  ││
│ │ ▓ Product B          $29.00         Jan 31, 09:45  ││
│ │ ▓ Product A          $49.00         Jan 31, 08:12  ││
│ └────────────────────────────────────────────────────┘│
└────────────────────────────────────────────────────────┘
核心模式：
  • 带硬阴影的卡片
  • 醒目区域标题
  • 高对比度数据展示
  • 所有元素均有黑边框
  • 纯色扁平背景

E-Commerce: The Raw Shopping Experience

电商平台：原始购物体验

css
.neo-product-card {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  padding: 0;
  overflow: hidden;
}

.neo-product-card:hover {
  box-shadow: 8px 8px 0 var(--neo-black);
  transform: translate(-2px, -2px);
}

.neo-product-card__image {
  border-bottom: 3px solid var(--neo-black);
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.neo-product-card__content {
  padding: 1rem;
}

.neo-product-card__price {
  font-family: var(--font-neo-display);
  font-size: 1.5rem;
  background: var(--neo-yellow);
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--neo-black);
}

.neo-add-to-cart {
  width: 100%;
  background: var(--neo-black);
  color: var(--neo-white);
  border: 3px solid var(--neo-black);
  padding: 0.75rem;
  font-family: var(--font-neo-display);
  text-transform: uppercase;
  cursor: pointer;
}

.neo-add-to-cart:hover {
  background: var(--neo-pink);
  color: var(--neo-black);
}
css
.neo-product-card {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  padding: 0;
  overflow: hidden;
}

.neo-product-card:hover {
  box-shadow: 8px 8px 0 var(--neo-black);
  transform: translate(-2px, -2px);
}

.neo-product-card__image {
  border-bottom: 3px solid var(--neo-black);
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.neo-product-card__content {
  padding: 1rem;
}

.neo-product-card__price {
  font-family: var(--font-neo-display);
  font-size: 1.5rem;
  background: var(--neo-yellow);
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--neo-black);
}

.neo-add-to-cart {
  width: 100%;
  background: var(--neo-black);
  color: var(--neo-white);
  border: 3px solid var(--neo-black);
  padding: 0.75rem;
  font-family: var(--font-neo-display);
  text-transform: uppercase;
  cursor: pointer;
}

.neo-add-to-cart:hover {
  background: var(--neo-pink);
  color: var(--neo-black);
}

Landing Page: Bold First Impressions

着陆页：醒目第一印象

╔══════════════════════════════════════════════════════════════╗
║                                                              ║
║  ████████  WE BUILD                                         ║
║  ████████  BOLD                                             ║
║  ████████  PRODUCTS                                         ║
║                                                              ║
║  ┌─────────────────────────────────────────────────────────┐║
║  │                                                         │║
║  │  No more boring SaaS. We create tools that              │║
║  │  stand out, work hard, and make you money.              │║
║  │                                                         │║
║  └─────────────────────────────────────────────────────────┘║
║                                                              ║
║         ╔═══════════════════════════════════════╗           ║
║         ║  → START FREE TRIAL                   ║           ║
║         ╚═══════════════════════════════════════╝           ║
║                                                              ║
╚══════════════════════════════════════════════════════════════╝
╔══════════════════════════════════════════════════════════════╗
║                                                              ║
║  ████████  WE BUILD                                         ║
║  ████████  BOLD                                             ║
║  ████████  PRODUCTS                                         ║
║                                                              ║
║  ┌─────────────────────────────────────────────────────────┐║
║  │                                                         │║
║  │  No more boring SaaS. We create tools that              │║
║  │  stand out, work hard, and make you money.              │║
║  │                                                         │║
║  └─────────────────────────────────────────────────────────┘║
║                                                              ║
║         ╔═══════════════════════════════════════╗           ║
║         ║  → START FREE TRIAL                   ║           ║
║         ╚═══════════════════════════════════════╝           ║
║                                                              ║
╚══════════════════════════════════════════════════════════════╝

Responsive: Bold at Every Size

响应式设计：全尺寸保持醒目

BreakpointAdjustments
Mobile (<640px)Shadow: 3px 3px, Border: 2px, Font scale down
Tablet (640-1024px)Shadow: 4px 4px, Border: 3px, Standard fonts
Desktop (>1024px)Shadow: 6px 6px, Border: 4px, Oversized headlines
css
/* Mobile-first approach */
:root {
  --neo-shadow-size: 3px;
  --neo-border-width: 2px;
}

@media (min-width: 640px) {
  :root {
    --neo-shadow-size: 4px;
    --neo-border-width: 3px;
  }
}

@media (min-width: 1024px) {
  :root {
    --neo-shadow-size: 6px;
    --neo-border-width: 4px;
  }
}

.neo-card {
  border: var(--neo-border-width) solid var(--neo-black);
  box-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black);
}
断点调整项
移动端 (<640px)阴影：3px 3px，边框：2px，字体缩小
平板端 (640-1024px)阴影：4px 4px，边框：3px，标准字体
桌面端 (>1024px)阴影：6px 6px，边框：4px，超大号标题
css
/* Mobile-first approach */
:root {
  --neo-shadow-size: 3px;
  --neo-border-width: 2px;
}

@media (min-width: 640px) {
  :root {
    --neo-shadow-size: 4px;
    --neo-border-width: 3px;
  }
}

@media (min-width: 1024px) {
  :root {
    --neo-shadow-size: 6px;
    --neo-border-width: 4px;
  }
}

.neo-card {
  border: var(--neo-border-width) solid var(--neo-black);
  box-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black);
}

Component Patterns

组件模式

Buttons

按钮

css
.neo-button {
  background: var(--neo-white);
  color: var(--neo-black);
  border: 3px solid var(--neo-black);
  box-shadow: 4px 4px 0 var(--neo-black);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-neo-display);
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.1s ease;
}

.neo-button:hover {
  box-shadow: 6px 6px 0 var(--neo-black);
  transform: translate(-2px, -2px);
}

.neo-button:active {
  box-shadow: 2px 2px 0 var(--neo-black);
  transform: translate(2px, 2px);
}

/* Primary variant */
.neo-button--primary {
  background: var(--neo-yellow);
}

/* Danger variant */
.neo-button--danger {
  background: var(--neo-red);
  color: var(--neo-white);
}

/* Ghost variant */
.neo-button--ghost {
  background: transparent;
  box-shadow: none;
}

.neo-button--ghost:hover {
  background: var(--neo-black);
  color: var(--neo-white);
  box-shadow: none;
  transform: none;
}
css
.neo-button {
  background: var(--neo-white);
  color: var(--neo-black);
  border: 3px solid var(--neo-black);
  box-shadow: 4px 4px 0 var(--neo-black);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-neo-display);
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.1s ease;
}

.neo-button:hover {
  box-shadow: 6px 6px 0 var(--neo-black);
  transform: translate(-2px, -2px);
}

.neo-button:active {
  box-shadow: 2px 2px 0 var(--neo-black);
  transform: translate(2px, 2px);
}

/* Primary variant */
.neo-button--primary {
  background: var(--neo-yellow);
}

/* Danger variant */
.neo-button--danger {
  background: var(--neo-red);
  color: var(--neo-white);
}

/* Ghost variant */
.neo-button--ghost {
  background: transparent;
  box-shadow: none;
}

.neo-button--ghost:hover {
  background: var(--neo-black);
  color: var(--neo-white);
  box-shadow: none;
  transform: none;
}

Cards

卡片

css
.neo-card {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  padding: 1.5rem;
}

.neo-card__header {
  border-bottom: 2px solid var(--neo-black);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.neo-card__title {
  font-family: var(--font-neo-display);
  font-size: 1.25rem;
  text-transform: uppercase;
}

/* Feature card with accent color */
.neo-card--featured {
  background: var(--neo-yellow);
}

/* Highlighted state */
.neo-card--highlight {
  border-color: var(--neo-pink);
  box-shadow: 6px 6px 0 var(--neo-pink);
}
css
.neo-card {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  padding: 1.5rem;
}

.neo-card__header {
  border-bottom: 2px solid var(--neo-black);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.neo-card__title {
  font-family: var(--font-neo-display);
  font-size: 1.25rem;
  text-transform: uppercase;
}

/* Feature card with accent color */
.neo-card--featured {
  background: var(--neo-yellow);
}

/* Highlighted state */
.neo-card--highlight {
  border-color: var(--neo-pink);
  box-shadow: 6px 6px 0 var(--neo-pink);
}

Form Elements

表单元素

css
.neo-input {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  padding: 0.75rem 1rem;
  font-family: var(--font-neo-body);
  font-size: 1rem;
  width: 100%;
}

.neo-input:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--neo-black);
}

.neo-input::placeholder {
  color: #888;
}

/* Labels are bold and uppercase */
.neo-label {
  font-family: var(--font-neo-display);
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Checkbox/Radio */
.neo-checkbox {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 3px solid var(--neo-black);
  background: var(--neo-white);
  cursor: pointer;
}

.neo-checkbox:checked {
  background: var(--neo-black);
}

.neo-checkbox:checked::after {
  content: '✓';
  color: var(--neo-white);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
css
.neo-input {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  padding: 0.75rem 1rem;
  font-family: var(--font-neo-body);
  font-size: 1rem;
  width: 100%;
}

.neo-input:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--neo-black);
}

.neo-input::placeholder {
  color: #888;
}

/* Labels are bold and uppercase */
.neo-label {
  font-family: var(--font-neo-display);
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Checkbox/Radio */
.neo-checkbox {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 3px solid var(--neo-black);
  background: var(--neo-white);
  cursor: pointer;
}

.neo-checkbox:checked {
  background: var(--neo-black);
}

.neo-checkbox:checked::after {
  content: '✓';
  color: var(--neo-white);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Navigation

导航栏

css
.neo-nav {
  background: var(--neo-black);
  border-bottom: 4px solid var(--neo-black);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.neo-nav__logo {
  font-family: var(--font-neo-display);
  font-size: 1.5rem;
  color: var(--neo-white);
  text-transform: uppercase;
}

.neo-nav__links {
  display: flex;
  gap: 1.5rem;
}

.neo-nav__link {
  color: var(--neo-white);
  text-decoration: none;
  font-family: var(--font-neo-body);
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
}

.neo-nav__link:hover {
  border-bottom-color: var(--neo-yellow);
}

.neo-nav__link--active {
  border-bottom-color: var(--neo-pink);
}
css
.neo-nav {
  background: var(--neo-black);
  border-bottom: 4px solid var(--neo-black);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.neo-nav__logo {
  font-family: var(--font-neo-display);
  font-size: 1.5rem;
  color: var(--neo-white);
  text-transform: uppercase;
}

.neo-nav__links {
  display: flex;
  gap: 1.5rem;
}

.neo-nav__link {
  color: var(--neo-white);
  text-decoration: none;
  font-family: var(--font-neo-body);
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
}

.neo-nav__link:hover {
  border-bottom-color: var(--neo-yellow);
}

.neo-nav__link--active {
  border-bottom-color: var(--neo-pink);
}

Anti-Patterns

反模式

Anti-Pattern: Soft Shadows

反模式：软阴影

Novice thinking: 
box-shadow: 0 4px 6px rgba(0,0,0,0.1)
Reality: Neobrutalism uses HARD shadows with zero blur Instead: 
box-shadow: 4px 4px 0 #000000
新手误区：
box-shadow: 0 4px 6px rgba(0,0,0,0.1)
正确做法：新粗野主义使用无模糊的硬阴影 替代方案：
box-shadow: 4px 4px 0 #000000

Anti-Pattern: Gradients

反模式：渐变

Novice thinking: 
background: linear-gradient(to right, #ff5252, #ffeb3b)
Reality: Neobrutalism is FLAT. No gradients, no blending. Instead: Pick ONE solid color. Embrace the flatness.
新手误区：
background: linear-gradient(to right, #ff5252, #ffeb3b)
正确做法：新粗野主义是扁平风格，禁止使用渐变与混合效果 替代方案：选择一种纯色，拥抱扁平感

Anti-Pattern: Rounded Corners Everywhere

反模式：全圆角

Novice thinking: 
border-radius: 16px
on everything Reality: Neobrutalism prefers sharp corners or minimal rounding (4px max) Instead: 
border-radius: 0
or 
border-radius: 4px
for subtle softening
新手误区：所有元素都设置
border-radius: 16px
正确做法：新粗野主义偏好直角或极小圆角（最大4px） 替代方案：
border-radius: 0
或 
border-radius: 4px
实现轻微柔化

Anti-Pattern: Thin Borders

反模式：细边框

Novice thinking: 
border: 1px solid #ddd
Reality: Neobrutalist borders are BOLD (3-4px) and BLACK Instead: 
border: 3px solid #000000
新手误区：
border: 1px solid #ddd
正确做法：新粗野主义边框为粗黑边框（3-4px） 替代方案：
border: 3px solid #000000

Anti-Pattern: Low Contrast Colors

反模式：低对比度色彩

Novice thinking: Subtle pastels on white background Reality: Neobrutalism demands HIGH contrast Instead: Bold primaries (#FF5252, #FFEB3B) on white/black
新手误区：白色背景搭配柔和马卡龙色 正确做法：新粗野主义要求高对比度 替代方案：醒目原色（#FF5252、#FFEB3B）搭配黑/白背景

Anti-Pattern: Transparency/Opacity

反模式：透明/透明度

Novice thinking: 
background: rgba(255,255,255,0.8)
Reality: Neobrutalism is OPAQUE. No see-through elements. Instead: 
background: #FFFFFF
(solid, no alpha)
新手误区：
background: rgba(255,255,255,0.8)
正确做法：新粗野主义是不透明风格，禁止使用半透明元素 替代方案：
background: #FFFFFF
（纯色，无透明度）

Anti-Pattern: Hover Blur Effects

反模式：悬停模糊效果

Novice thinking: 
filter: blur(2px)
on hover Reality: Hover states in neobrutalism are physical (translate + shadow change) Instead: 
transform: translate(-2px, -2px)
+ increased shadow
新手误区：悬停时设置
filter: blur(2px)
正确做法：新粗野主义的悬停状态为物理反馈（位移+阴影变化） 替代方案：
transform: translate(-2px, -2px)
+ 增大阴影

Quick Decision Tree

快速决策树

Is it a container element?
├── Card/Panel? → 3px black border + hard shadow
├── Section? → Full-width, solid background color
├── Modal? → Heavy shadow (8px+), thick border
└── Nav? → Black background or thick bottom border

Is it interactive?
├── Button? → Hard shadow that responds to hover/active
├── Link? → Underline or bottom border, color change on hover
├── Input? → Thick border, shadow on focus
└── Checkbox? → Thick border, solid fill when checked

Is it typography?
├── Headline? → Oversized, bold display font, uppercase optional
├── Body? → Clean geometric sans, good line height
├── Label? → Bold, uppercase, smaller size
└── Code? → Monospace, possibly with background

Is it a status indicator?
├── Success? → Green background or border
├── Error? → Red background or border
├── Warning? → Yellow background or border
└── Info? → Blue background or border
是否为容器元素？
├── 卡片/面板？ → 3px黑边框 + 硬阴影
├── 区域？ → 全屏宽度、纯色背景
├── 模态框？ → 厚重阴影（8px+）、粗边框
└── 导航栏？ → 黑色背景或粗下边框

是否为交互元素？
├── 按钮？ → 硬阴影，悬停/激活状态有响应
├── 链接？ → 下划线或下边框，悬停时变色
├── 输入框？ → 粗边框，聚焦时显示阴影
└── 复选框？ → 粗边框，选中时纯色填充

是否为排版元素？
├── 标题？ → 超大号、醒目展示字体，可选全大写
├── 正文？ → 简洁几何无衬线字体，合适行高
├── 标签？ → 粗体、全大写、小字号
└── 代码？ → 等宽字体，可搭配背景

是否为状态指示器？
├── 成功？ → 绿色背景或边框
├── 错误？ → 红色背景或边框
├── 警告？ → 黄色背景或边框
└── 信息？ → 蓝色背景或边框

CSS Variables Template

CSS变量模板

css
:root {
  /* Core palette */
  --neo-black: #000000;
  --neo-white: #FFFFFF;
  --neo-cream: #F5F0E6;

  /* Primary colors */
  --neo-red: #FF5252;
  --neo-yellow: #FFEB3B;
  --neo-blue: #2196F3;
  --neo-pink: #FF4081;
  --neo-green: #4CAF50;
  --neo-orange: #FF9800;
  --neo-purple: #9C27B0;

  /* Typography */
  --font-neo-display: 'Archivo Black', 'Impact', sans-serif;
  --font-neo-body: 'Space Grotesk', 'Arial', sans-serif;
  --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --neo-spacing-xs: 0.25rem;
  --neo-spacing-sm: 0.5rem;
  --neo-spacing-md: 1rem;
  --neo-spacing-lg: 1.5rem;
  --neo-spacing-xl: 2rem;

  /* Shadows & Borders */
  --neo-shadow-size: 4px;
  --neo-border-width: 3px;
  --neo-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black);
}
css
:root {
  /* Core palette */
  --neo-black: #000000;
  --neo-white: #FFFFFF;
  --neo-cream: #F5F0E6;

  /* Primary colors */
  --neo-red: #FF5252;
  --neo-yellow: #FFEB3B;
  --neo-blue: #2196F3;
  --neo-pink: #FF4081;
  --neo-green: #4CAF50;
  --neo-orange: #FF9800;
  --neo-purple: #9C27B0;

  /* Typography */
  --font-neo-display: 'Archivo Black', 'Impact', sans-serif;
  --font-neo-body: 'Space Grotesk', 'Arial', sans-serif;
  --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --neo-spacing-xs: 0.25rem;
  --neo-spacing-sm: 0.5rem;
  --neo-spacing-md: 1rem;
  --neo-spacing-lg: 1.5rem;
  --neo-spacing-xl: 2rem;

  /* Shadows & Borders */
  --neo-shadow-size: 4px;
  --neo-border-width: 3px;
  --neo-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black);
}

The Quick Test

快速测试

If your component has:
  • ❌ Any blur in shadows → NOT neobrutalism
  • ❌ Any gradients → NOT neobrutalism
  • ❌ Transparency/opacity → NOT neobrutalism
  • ❌ Thin (1px) borders → NOT neobrutalism
  • ❌ Soft/muted colors → NOT neobrutalism
  • ❌ Heavy border-radius (16px+) → NOT neobrutalism
It should have:
  • ✅ Hard shadows (Xpx Ypx 0 #000)
  • ✅ Bold borders (3-4px solid black)
  • ✅ High contrast color combinations
  • ✅ Flat, solid colors
  • ✅ Bold typography
  • ✅ Sharp or minimal corners
  • ✅ Physical hover/active feedback
如果你的组件包含：
  • ❌ 阴影带模糊 → 不属于新粗野主义
  • ❌ 包含渐变 → 不属于新粗野主义
  • ❌ 透明/透明度 → 不属于新粗野主义
  • ❌ 细边框（1px） → 不属于新粗野主义
  • ❌ 柔和/低饱和度色彩 → 不属于新粗野主义
  • ❌ 大圆角（16px+） → 不属于新粗野主义
正确的组件应包含：
  • ✅ 硬阴影（Xpx Ypx 0 #000）
  • ✅ 粗边框（3-4px纯黑）
  • ✅ 高对比度色彩组合
  • ✅ 纯色扁平色彩
  • ✅ 醒目排版
  • ✅ 直角或极小圆角
  • ✅ 物理化悬停/激活反馈

Accessibility Considerations

无障碍设计考量

Despite its boldness, neobrutalism can be highly accessible:
  1. High contrast - Black borders on white/colored backgrounds pass WCAG
  2. Clear focus states - Shadow/border changes are obvious
  3. Readable typography - Large, bold text is easy to scan
  4. No motion dependency - Transforms are enhancers, not requirements
css
/* Ensure focus is visible */
.neo-button:focus-visible {
  outline: 3px solid var(--neo-blue);
  outline-offset: 2px;
}

/* Reduce motion if preferred */
@media (prefers-reduced-motion: reduce) {
  .neo-button {
    transition: none;
  }

  .neo-button:hover {
    transform: none;
    box-shadow: var(--neo-shadow); /* Keep shadow, skip animation */
  }
}
尽管风格醒目，新粗野主义仍可具备高度无障碍性：
  1. 高对比度 - 黑边框搭配白/彩色背景符合WCAG标准
  2. 清晰聚焦状态 - 阴影/边框变化清晰可见
  3. 易读排版 - 大号粗体文本便于扫描
  4. 无动效依赖 - 位移效果为增强项，非必需
css
/* Ensure focus is visible */
.neo-button:focus-visible {
  outline: 3px solid var(--neo-blue);
  outline-offset: 2px;
}

/* Reduce motion if preferred */
@media (prefers-reduced-motion: reduce) {
  .neo-button {
    transition: none;
  }

  .neo-button:hover {
    transform: none;
    box-shadow: var(--neo-shadow); /* Keep shadow, skip animation */
  }
}

References

参考资料

  • /references/component-library.md
    - Full CSS for all neobrutalist components
  • /references/color-combinations.md
    - Tested color pairings with contrast ratios
  • /references/typography-pairings.md
    - Font combinations for different contexts
  • /references/real-world-examples.md
    - Analysis of Gumroad, Figma, and other implementations
  • /references/component-library.md
    - 所有新粗野主义组件完整CSS代码
  • /references/color-combinations.md
    - 经过测试的色彩搭配及对比度
  • /references/typography-pairings.md
    - 不同场景下的字体组合
  • /references/real-world-examples.md
    - Gumroad、Figma及其他案例分析

Pairs With

搭配工具

  • web-design-expert - For brand direction alongside bold style
  • color-contrast-auditor - Ensure accessibility with bold colors
  • design-system-creator - For generating full design token systems
  • typography-expert - For advanced type pairing
  • web-design-expert - 结合醒目风格提供品牌方向
  • color-contrast-auditor - 确保醒目色彩符合无障碍标准
  • design-system-creator - 生成完整设计令牌系统
  • typography-expert - 提供高级字体搭配方案

Sources

资料来源

Design research based on:
设计研究基于：