neobrutalist-web-designer

新野兽派 Web 设计师

打造具有真实新野兽派美学的现代 2026 Web 应用。不是复刻野兽派建筑——而是将新野兽派延伸至现代数字场景：SaaS 产品、电子商务、独立创作者平台，以及需要脱颖而出的创业公司 MVP。

适用场景

适用于：

• 需要鲜明差异化的 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
• 渐变浓重的美学 → 不属于新野兽派

新野兽派与相似风格的区别

特征	新野兽派	毛玻璃风格	新拟态	Win31/95
阴影	硬朗（无模糊）	柔和辉光	微妙内嵌	斜面
边框	粗黑线条	微妙／无	无	斜面
色彩	大胆的原色	磨砂／粉彩	柔和	系统灰
背景	纯色平面	模糊／透明	柔和渐变	纯色
理念	原始、外露	空灵、隐匿	真实	功能性

---

核心设计系统

新野兽派的三大支柱

1. 硬朗阴影 - 偏移、无模糊，通常为黑色
2. 醒目边框 - 粗（2-4px）黑色线条
3. 高对比度 - 在中性背景上使用原色

调色板

颜色	Hex	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	创意、高端

色彩规则：

• ✅ 使用高饱和度的醒目原色
• ✅ 使用黑白实现最大对比度
• ✅ 使用米色／奶油色，在不失柔和感的前提下增添温度
• ❌ 不使用渐变（仅使用纯色）
• ❌ 不使用透明度／不透明度设置（保持不透明）

标志性的硬朗阴影

新野兽派的标志性元素 - 零模糊的偏移阴影：

.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);
}

醒目边框系统

.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);
}

排版

用途	推荐字体	备用字体	风格
标题	Archivo Black	Impact, sans-serif	粗体、窄体
正文	Space Grotesk	Arial, sans-serif	简洁、几何
点缀	Lexend Mega	Trebuchet, sans-serif	宽体、粗体
等宽	JetBrains Mono	Courier New	代码、复古
展示	Bebas Neue	Impact	全大写、醒目

排版规则：

: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;
}

---

现代延伸

SaaS 仪表板：Gumroad 范式

面向 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  ││
│ └────────────────────────────────────────────────────┘│
└────────────────────────────────────────────────────────┘

关键模式：

• 带硬朗阴影的卡片
• 醒目的分区标题
• 高对比度的数据展示
• 所有元素都使用黑色边框
• 平面纯色背景

电子商务：原始购物体验

.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);
}

落地页：醒目的第一印象

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

响应式设计：任何尺寸都大胆

断点	调整
移动设备（<640px）	阴影：3px 3px，边框：2px，缩小字体
平板设备（640-1024px）	阴影：4px 4px，边框：3px，标准字体
桌面设备（>1024px）	阴影：6px 6px，边框：4px，超大标题

/* 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);
}

---

组件模式

按钮

.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;
}

卡片

.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);
}

表单元素

.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;
}

导航

.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);
}

---

反模式

反模式：柔和阴影

新手想法：box-shadow: 0 4px 6px rgba(0,0,0,0.1) 实际情况：新粗野主义使用硬阴影，模糊度为零 建议：box-shadow: 4px 4px 0 #000000

反模式：渐变

新手想法：background: linear-gradient(to right, #ff5252, #ffeb3b) 实际情况：新粗野主义是扁平的。没有渐变，也没有混色。 建议：选一种纯色，拥抱扁平感。

反模式：到处使用圆角

新手想法：所有元素都用 border-radius: 16px 实际情况：新粗野主义偏好尖锐的边角或最小程度的圆角（最多 4px） 建议：使用 border-radius: 0，或使用 border-radius: 4px 进行轻微柔化

反模式：细边框

新手想法：border: 1px solid #ddd 实际情况：新粗野主义的边框粗重（3-4px）且为黑色 建议：border: 3px solid #000000

反模式：低对比度颜色

新手想法：在白色背景上使用柔和的粉彩色 实际情况：新粗野主义要求高对比度 建议：在白色或黑色背景上使用鲜明的原色（#FF5252、#FFEB3B）

反模式：透明度／不透明度

新手想法：background: rgba(255,255,255,0.8) 实际情况：新粗野主义是不透明的。没有半透明元素。 建议：background: #FFFFFF（纯色，无 alpha 通道）

反模式：悬停模糊效果

新手想法：悬停时使用 filter: blur(2px) 实际情况：新粗野主义中的悬停状态具有实体感（位移 + 阴影变化） 建议：transform: translate(-2px, -2px) + 加深阴影

---

快速决策树

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

---

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);
}

---

快速测试

如果你的组件有：

• ❌ 阴影中有任何模糊 → 不属于新粗野主义
• ❌ 任何渐变 → 不属于新粗野主义
• ❌ 透明度／不透明度 → 不属于新粗野主义
• ❌ 细（1px）边框 → 不属于新粗野主义
• ❌ 柔和／低饱和度颜色 → 不属于新粗野主义
• ❌ 大圆角（16px+）→ 不属于新粗野主义

它应该具有：

• ✅ 硬阴影（Xpx Ypx 0 #000）
• ✅ 粗重边框（3-4px solid black）
• ✅ 高对比度配色
• ✅ 扁平纯色
• ✅ 醒目的字体排印
• ✅ 尖锐或极小的圆角
• ✅ 具有实体感的悬停／激活反馈

---

无障碍注意事项

尽管风格大胆，新粗野主义仍然可以具有很高的无障碍性：

1. 高对比度——白色／彩色背景上的黑色边框符合 WCAG 要求
2. 清晰的焦点状态——阴影／边框变化一目了然
3. 易读的字体排印——大号粗体文本便于浏览
4. 不依赖动效——位移效果是增强项，而非必需项

/* 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/component-library.md - 所有新粗野主义组件的完整 CSS
• /references/color-combinations.md - 经过测试的配色组合及对比度
• /references/typography-pairings.md - 适用于不同场景的字体组合
• /references/real-world-examples.md - 对 Gumroad、Figma 等实现方案的分析

---

搭配使用

• web-design-expert - 为大胆风格提供品牌方向
• color-contrast-auditor - 确保大胆配色符合无障碍要求
• design-system-creator - 用于生成完整的设计令牌系统
• typography-expert - 用于高级字体搭配

---

资料来源

设计研究基于：

• NN/G：新粗野主义的定义和最佳实践
• Bejamas：新粗野主义网页设计趋势
• Onething Design：新粗野主义 UI 趋势
• Nestify：新粗野主义的原则
• CC Creative：粗野主义与新粗野主义的区别