野兽派Brutalism

核心特征

• 纯白底配纯黑字，几乎没有装饰
• 全站使用等宽字体，字形粗硬
• 按钮与卡片 2px 纯黑边框，零圆角、无阴影
• 链接保持默认蓝加下划线的原始观感
• 元素有意错位、留白不均，不追求对齐

色板与字体

英文

Space Mono（自托管）

中文

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

说明

原版常直接用浏览器默认的 Times 或 Courier；真实项目可用系统等宽字体 ui-monospace、Courier New，或 IBM Plex Mono。

起源与代表作

年代：2014 年前后网页圈兴起，名称借自 1950 年代粗野主义建筑

名称来自法语 béton brut（清水混凝土），1950 年代英国建筑评论家 Reyner Banham 用「新粗野主义」概括勒·柯布西耶之后那些裸露混凝土的建筑。2010 年代中期，一批网页设计师有意放弃模板化的精致界面，使用系统字体、默认链接色与近乎无样式的排版，以此反对千篇一律的商业网页。此后出现了专门收录这类网站的合集站，Craigslist 等朴素到近乎无设计的老网站也被视作它的先驱。

AI 设计提示词 · Prompt

野兽派（Brutalism）风格界面：页面纯白 #FFFFFF，文字纯黑 #000000，次要文字 #222222；链接与主按钮使用浏览器默认蓝 #0000EE，已访问链接可用 #551A8B。全站使用 Space Mono 等宽字体，标题 38px 粗体，行高 1.1，字距 -0.02em；正文 13–14px。所有按钮、卡片、输入框都是 2px 纯黑实线边框，零圆角、零阴影、无渐变；按钮背景 #E5E5E5 黑字，次按钮是蓝色带下划线的文字链接。导航与底部各用一条 2px 黑色分隔线。布局刻意不整齐：第二张卡片下移 18px，第三张向左偏移 6px。不使用图标插画与装饰图形。保持朴素粗糙，但所有正文对比度不低于 4.5:1，链接必须带下划线便于识别。

A Brutalism interface: pure white page #FFFFFF, pure black text #000000, secondary text #222222; links and the primary action use the browser-default blue #0000EE, visited links may use #551A8B. Use the Space Mono monospace font everywhere, headings at 38px bold with a line height of 1.1 and -0.02em letter-spacing; body text at 13–14px. All buttons, cards and inputs have a 2px solid black border, zero corner radius, no shadows and no gradients; buttons are #E5E5E5 with black text and the secondary action is an underlined blue text link. Navigation and footer are each separated by a 2px black rule. The layout is deliberately untidy: the second card sits 18px lower and the third is shifted 6px to the left. No icon illustrations or decorative shapes. Stay plain and rough, but keep body contrast at least 4.5:1 and always underline links so they remain recognizable.

CSS 设计变量

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

:root {
  --ds-bg: #ffffff;
  --ds-text: #000000;
  --ds-muted: #222222;
  --ds-link: #0000ee;
  --ds-visited: #551a8b;
  --ds-border: 2px solid #000000;
  --ds-radius: 0;
  --ds-font: "Space Mono", ui-monospace, "Courier New", monospace;
}

适合与不适合

和相近风格的区别

• 新野兽派：野兽派是几乎无样式的白底黑字与默认链接，刻意粗糙；新野兽派保留粗黑描边与硬投影，却加上明快色块和圆角，更友好、更像成熟产品。
• 瑞士国际主义：瑞士风格是严格网格下的秩序，野兽派是刻意的朴素与失序。

常见踩坑

• 「粗糙」不等于不可用，按钮仍要有明确的边框与悬停反馈，链接必须带下划线，否则用户分不清哪里能点
• 等宽字体的行宽比比例字体更大，正文行宽建议不超过 60 个字符，并保持行高 1.5 以上
• 纯黑配纯白对比度极高，长时间阅读容易眩光，长文页面可把文字改成 #111 或把底色放到 #FAFAFA
• 刻意错位只用在个别卡片与标题上，若全页都不对齐会让用户找不到阅读顺序，还可能破坏键盘焦点的视觉路径

相关 UI 模式

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

常见问题