新粗野主义 UI 是做什么的？

一个界面通过公开展示其结构并大声宣扬来赢得信任，因为每个边框和阴影都是陈述的事实。

扁平、鲜艳的色块搭配粗黑边框和硬朗、无模糊的偏移阴影。它从 Gumroad 等产品网站和 Figma 社区套件中发展而来，是对企业软性风格的有意回应。

时期： 2020 年–至今 · 时代： 当代与空间 · 领域： 图形与 UI 设计 · 别称： Neubrutalism、Neobrutalism、粗野主义 Web UI

何时加载此技能

当用户要求以下内容时加载它：“新粗野主义”、“neubrutalism”、“neobrutalist”、“粗野主义 UI”、“粗黑边框”、“硬阴影”、“偏移阴影”、“gumroad 风格”、“响亮扁平色”、“贴纸风格”。

适用于：创作者经济产品、独立 SaaS 着陆页、开发者工具网站、作品集、活动与节日网站。

在以下情况不要使用：

品牌必须传达安静奢华、医疗护理或银行安全。
界面是密集的企业工具，因为 3px 边框和 4px 阴影会占用每行的空间。
受众期望原生平台外观，例如操作系统设置屏幕。

系统指令

在生成新粗野主义 UI 的 UI 或图形布局时，你必须：

在每个卡片、按钮、输入框和图像周围绘制 2px 到 4px 的实心 #000000 边框。
在每个凸起元素上投射一个零模糊的硬阴影，偏移量为 4px 4px，例如 4px 4px 0 0 #000000。
使用 100% 不透明度的扁平饱和色填充表面，并在一个页面上使用两到四种响亮色调。
悬停时，将元素移动阴影偏移量并将阴影减为 0，使其看起来像按入页面。
仅使用 0px 到 8px 的圆角，并在一个页面的所有元素上使用相同值。
将标题设置为重量级粗犷无衬线或等宽字体，字重 700 或更高，大小从 48px 到 96px。
保持文本在色块上为黑色，并在每个填充上达到至少 7:1 的对比度。

防护栏

以下每行都会破坏风格。在返回输出之前，对照列表检查你的输出。

绝不能： 模糊半径大于 0px 的模糊投影。
绝不能： 微妙的灰色渐变或表面上的光泽高光。
绝不能： 低饱和度的柔和填充搭配灰色文本。
绝不能： 1px 极细边框或非黑色的边框。
绝不能： 一个页面上混合圆角半径，例如卡片使用 4px 而按钮使用 24px。
绝不能： 半透明或背景模糊面板。
绝不能： 标题的字重低于 500。

矢量特征

轴	得分	1 分含义	5 分含义
装饰度	`■■■□□` 3/5	纯粹极简	极致繁复
维度感	`■■□□□` 2/5	严格 2D	完全 3D / 空间
网格刚性	`■■■□□` 3/5	混沌 / 有机	严格数学网格
拟物写实	`■□□□□` 1/5	抽象数字	照片级真实材质
字体表现力	`■■■■□` 4/5	中性 / 不可见	实验性 / 插画性

保持这些分数。如果请求使一个轴移动 2 分或更多，你就离开了该风格：转到“谱系回退”。

空间与网格逻辑

网格机制： 12 列网格，24px 到 32px 的间距，卡片占据 2、3 或 4 列块；偏移阴影增加 4px 到 8px 的视觉宽度。
空白比例： 25–40% 的表面为开放空间；间距比例为 8、16、24、32、48 和 64px，卡片具有 24px 内边距。
对齐规则： 左对齐文本；块对齐网格边缘，仅允许贴纸和徽章有 1 到 2 度的轻微倾斜；部分由全宽 3px 黑色分割线分隔。
容器几何： 矩形，圆角 0px 到 8px，3px 黑色边框和 4px 4px 0 0 #000000 阴影；仅标签使用 999px 圆角。

排版

分类： 无衬线 · 等宽 · 粗衬线
字距： 显示大小取 -0.03em；正文保持 0；大写标签取 +0.05em。
行距： 显示 1.0 到 1.1；正文 1.5；标签 1.2。
层级规则：
- 标题使用字重 700 或 800，正文使用 400 或 500；跳过轻字重。
- 标题设置为 48px 到 96px，正文设置为 16px 到 18px，比例约为 3:1 或更高。
- 按钮和标签设置为粗体大写，14px，字距 +0.05em。
- 将标题的关键词放在带有 3px 黑色边框的彩色高亮块上。

字体配对

显示字体	正文字体	备注
Space Grotesk	DM Sans	古怪的粗无衬线标题搭配朴素文本字体。
Archivo Black	Work Sans	用于大标题的重磅海报式显示字体。
Bricolage Grotesque	Inter	紧凑、高对比度的显示字体搭配中性正文。
Space Mono	Space Grotesk	等宽标签，营造原始、技术感的声音。

色彩与光照

调色板结构： 黑色轮廓，暖白或黄色页面，以及两到四种响亮的扁平色调，如粉色、蓝色和绿色，每种 100% 不透明度，用于大色块。
对比度规则： 每个响亮填充上的黑色文本至少达到 7:1，例如柠檬黄上 15:1，电光蓝上 7:1；白色文本仅允许在黑色填充上；3px 黑色边框为每个控件提供 21:1 的边缘。
表面处理： 100% 不透明度的扁平不透明色块，无渐变、无纹理、无透明度；页面背景上可选的 8% 黑色圆点或网格图案。
光影： 不模拟光源；4px 4px 0 0 #000000 的硬偏移阴影落在右下角，零模糊，作为轮廓延伸。

调色板

名称	十六进制	角色
墨色	`#000000`	边框、阴影和文本
奶油色	`#FFF8E7`	页面背景
柠檬黄	`#FFE14D`	高亮和主要填充
热粉色	`#FF5DA2`	强调填充
电光蓝	`#4D7CFF`	次要强调色
薄荷绿	`#6EE7B7`	成功和标签填充
白色	`#FFFFFF`	卡片表面

材质与纹理

表面模拟： 无；表面是扁平切割纸或贴纸材料，带有黑色轮廓和硬投影，不模仿任何真实材质。
边框规则： 小控件 2px，卡片 3px，英雄块 4px 的黑色实心边框；边框颜色在状态之间从不改变。
模糊与高度： 模糊处处为 0px；高度是阴影偏移：标签 2px 2px，卡片和按钮 4px 4px，模态框 8px 8px，均为 #000000。

装饰与图标

图标： 粗体图标，2.5px 到 3px 描边，方形或圆形帽端，24px，黑色，通常位于带有 2px 边框的彩色圆圈内。
插图： 使用响亮调色板的扁平插图，带有粗黑轮廓，以及贴纸、星形和箭头；手绘标记受欢迎。
装饰元素： 贴纸和徽章 · 跑马文字条 · 星爆 · 点网格背景 · 箭头和下划线涂鸦

动效与交互性

天生为屏幕： 是
过渡物理： 悬停和按下时元素精确平移阴影偏移量，使阴影看起来坍缩；移动短促，感觉线性，无过冲。
缓动： cubic-bezier(0.2, 0, 0, 1)
持续时间（毫秒）： 120
悬停与激活： 悬停将元素向右和向下移动 4px，并将阴影设置为 0 0 0 0；激活保持该位置；聚焦添加 3px 实心 #4D7CFF 轮廓，偏移 2px。

代码与标记入门

在根元素上设置 data-style="neo-brutalism-ui" 并粘贴标记。文件 tokens.css 包含相同的标记和一组参考规则。

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Tailwind 模式：

元素	类名
页面	`bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12`
卡片	`rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]`
按钮	`rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none`
输入框	`rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]`
标题	`font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black`
标签	`inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]`

视觉包

此风格的图片和图标是文件。按原样使用它们，或将其作为规范阅读，并使用相同的语言绘制你自己的。

文件	内容
`pack/hero.svg`	英雄板，800x600。一种以该风格视觉语言呈现的抽象图片。
`pack/pattern.svg`	图案瓦片，80x80。双向重复。
`pack/icons.svg`	图标精灵：首页、搜索、心形、星形、铃铛、用户、邮件、日历、图片、闪电、播放、勾选、关闭、滑块。

图标： 轮廓，24px 场域上 2.5 描边，方形帽端，斜角连接，容器：正方形。使用：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。图标使用 currentColor。
图标系列： 该精灵来自 Phosphor (Bold)，由 Phosphor Icons 提供，MIT 许可证。原因：粗线具有与粗边框相匹配的钝重感。它是用于演示的开源替代品。对于产品，使用品牌的图标库并根据以下规则选择系列。
显示类型： 字重 700，字距 -0.03em，行距 0.95，大小写：无。
字重： 显示 700，副标题 700，正文 500，文中粗体 700，标签和按钮 700。该风格仅使用 2 个字重（500，700），无其他。显示字体比正文重 200。强调在于字重：更重的词是强调，因此字重之间的步骤清晰。
正文字体： 17px，行距 1.5。
页面： 英雄分割，左对齐，紧凑密度，强调色倾斜 -1°。
文本颜色： --color-text 仅用于主要阅读区域。在每个区域上，使用其标记：--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。

如何选择图标包

图标包是图片的字体。选择它时需与选择文本字体同等谨慎。这些规则适用于开源集和许可库。

描边与笔画匹配。 将图标置于正文文本旁边，字体大小相同。图标的线条和字母的笔画具有相同的粗细。
端点和角遵循圆角标记。 平头帽端和斜角连接对应于零圆角。圆头帽端和圆角连接对应于软圆角。
填充模式遵循时代技术。 印刷时代切割实体形状。屏幕时代通过深度填充和着色形状。当前产品界面绘制轮廓。
隐喻不比风格更年轻。 每个图片都是该时代已知的对象。具有较晚隐喻的图标会破坏时期。
一个系列，一个网格。 所有图标来自一个系列和一个变体，绘制在一个场域上。不要在一个表面上混合系列。
系列覆盖产品。 在承诺之前列出产品需要的每个概念。如果某个系列缺少其中一个图标，则它是错误的系列。
颜色是标记。 图标使用 currentColor。第二种色调来自标记，而不是文件。
许可证允许使用。 阅读该集的许可证。在许可证要求时注明出处。拥有品牌的产品使用其许可库，并应用相同规则选择系列。

谱系回退

当用户要求变体时，不要即兴发挥。向此处命名的邻居风格靠拢，并加载其技能。

如果用户要求更安静：向 flat-design（扁平设计）靠拢。将边框减至 1px，移除偏移阴影，并将填充饱和度降至 60%；保留扁平色块和网格。
如果用户要求更有条理：向 swiss-international（瑞士国际风格）靠拢。将调色板缩减为黑色、白色和一种红色，设置 0px 圆角和左对齐文本，位于 12 列网格上；保留 2px 分割线。
如果用户要求更像应用：向 bento-grid-ui（Bento 网格 UI）靠拢。将内容打包到混合大小单元格的矩形网格中，间隙 16px；保留 3px 边框和硬阴影。
如果用户要求更精致：向 material-design（Material Design）靠拢。使用 8px 圆角、1px 边框和 0 2px 4px rgba(0, 0, 0, 0.2) 的柔和阴影；保留一种响亮强调色。
来源于（去此处获取更正统版本）： flat-design
拒绝（对立极点；不要混合）： [corporate-memphis](../corporate-…

…（已截断用于翻译）

新粗野主义 UI