新野兽派Neo-Brutalism

核心特征

• 鲜亮的底色与色块：柠檬黄、薄荷蓝、珊瑚红
• 所有元素 3px 纯黑描边
• 5px 5px 0 #000 的硬投影，不带任何模糊
• Archivo Black 粗体标题，辨识度高
• 轻微圆角，比野兽派更圆润友好

色板与字体

英文

Space Grotesk、Archivo Black（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

标题可用 Archivo Black、Rubik 或 Bricolage Grotesque 的粗体，正文用 Space Grotesk、DM Sans 等几何无衬线字体。

起源与代表作

年代：2021 年前后流行（Gumroad 改版等带火）

新野兽派是 2020 年代初从网页野兽派中分化出来的产品界面风格。2021 年 Gumroad 改版，采用粉色、粗黑描边与硬投影，让这种做法进入主流 SaaS 与创作者工具的视野。它继承了野兽派的直白与不修饰，却换上高饱和的色块、轻微圆角与友好的插画，既有态度又保持可用性。如今大量独立产品、创作者平台与模板网站都在使用它。

AI 设计提示词 · Prompt

新野兽派（Neo-Brutalism）风格界面：页面背景柠檬黄 #FFE066，文字纯黑 #000000，次要文字 #222222。所有卡片、按钮、导航与输入框都有 3px 纯黑实线描边，并带 5px 5px 0 #000000 的硬投影，不用任何模糊；圆角 8px。导航条为白底，卡片依次填白色、薄荷蓝 #A0E7E5、薰衣草紫 #C3A6FF；主按钮珊瑚红 #FF6B6B 底、黑字，次按钮白底黑字。标题使用 Archivo Black，字号 36px，行高 1.1；正文使用 Space Grotesk，字重 500–700。标签是薄荷蓝底、黑色描边的胶囊。图标放在 34px 的白色圆形里，带 2px 黑边。底部信息条白底黑边。不使用渐变、阴影模糊与半透明。所有文字对比度不低于 4.5:1。

A Neo-Brutalism interface: page background lemon yellow #FFE066, text pure black #000000, secondary text #222222. All cards, buttons, the navbar and inputs carry a 3px solid black border and a 5px 5px 0 #000000 hard shadow with no blur at all; corner radius 8px. The navbar is white and the cards are filled white, mint #A0E7E5 and lavender #C3A6FF in turn; the primary button is coral #FF6B6B with black text and the secondary button is white with black text. Headings use Archivo Black at 36px with a line height of 1.1; body text uses Space Grotesk at weights 500–700. Tags are mint pills with a black border. Icons sit in 34px white circles with a 2px black border. The bottom bar is white with a black border. No gradients, blurred shadows or transparency. Keep all text contrast at least 4.5:1.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #ffe066;
  --ds-text: #000000;
  --ds-accent: #ff6b6b;
  --ds-mint: #a0e7e5;
  --ds-lavender: #c3a6ff;
  --ds-border: 3px solid #000000;
  --ds-radius: 8px;
  --ds-shadow: 5px 5px 0 #000000;
}

适合与不适合

和相近风格的区别

• 野兽派：新野兽派保留粗黑描边与硬投影，但加入高饱和色块与轻微圆角，更友好、更像成熟产品；野兽派是几乎无样式的白底黑字，刻意粗糙。
• 孟菲斯：新野兽派只保留粗黑描边、硬投影和少量色块，版式规整；孟菲斯靠波点斜纹等装饰图案与多色撞色制造热闹感，来自 1980 年代。

常见踩坑

• 黄色底配白色文字对比度很低，亮色块上一律使用纯黑文字，并检查是否达到 4.5:1
• 硬投影与粗描边叠得太多会显得拥挤，卡片间距建议不小于 16px，避免投影压到相邻元素
• 每一个元素都加粗描边会失去层次，导航、卡片与按钮用 3px，次要的分隔线降到 2px 或 1px
• 高饱和色块大面积使用容易造成视觉疲劳，一屏最多使用 3 种底色，并确保可聚焦元素有清晰的焦点轮廓

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题