Neobrutalism 新粗野主义
Neobrutalism is a designed graphic language: flat, saturated color blocks outlined in thick black strokes, with hard offset shadows — solid black rectangles displaced a few pixels, no blur — and chunky display type. Elements read like stickers or risograph prints; pressing a button often physically 'pushes' it into its shadow. Despite the name it is the opposite of raw: every border and shadow is a deliberate illustration choice.
新粗野主义是一套设计出来的图形语言：扁平的饱和色块勾着粗黑描边，配上生硬偏移阴影——纯黑矩形偏移几个像素、零模糊——再加上粗壮展示字体。元素读起来像贴纸或 Riso 孔版印刷品；按下按钮时，它常常真的被物理地「按进」自己的阴影里。名字里虽有粗野，它却是「生」的反面：每一道边框和阴影都是刻意的插画选择。
Scope: Takes brutalism's name but not its method — see Web Brutalism for the genuinely-raw sibling, and architectural Brutalism (exposed concrete) for where the word started. Memphis-style geometric confetti often decorates neobrutalist pages but is its own movement.
范围：借了粗野主义的名字，却没借它的方法——真正「生」的兄弟见网页粗野主义，这个词的源头见建筑粗野主义（裸露的混凝土）。孟菲斯风格的几何彩纸屑常常装点新粗野主义页面，但那是另一场运动。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Thick black outlines粗黑描边 geometry defining定义特征
Every element — cards, buttons, inputs, even images — wears a uniform 2–3px solid black border, like an inked comic panel.
每个元素——卡片、按钮、输入框，甚至图片——都套着统一的 2–3px 纯黑实线边框，像勾了墨线的漫画格子。
-
Hard offset shadows生硬偏移阴影 depth defining定义特征
Shadows are solid black shapes displaced down-right with ZERO blur — graphic depth, not simulated lighting. Pressing collapses the offset.
阴影是向右下偏移的纯黑色块，零模糊——图形化的纵深，不是模拟光照。按下时偏移归零。
-
Saturated flat color blocks饱和的扁平色块 color defining定义特征
Unapologetic fills — yellow, hot pink, lime, cyan — laid flat next to each other on a cream or white ground; no gradients.
毫不歉意的填充色——黄、艳粉、青柠、青——平铺在米白或白色底上；不要渐变。
-
Chunky display type粗壮展示字体 typography defining定义特征
Bold, blocky grotesks or display faces, often oversized; body text stays plain so the headings can shout.
粗黑、块状的 grotesk 或展示字体，常常放得超大；正文保持朴素，好让标题放开嗓子喊。
-
Sticker shapes and doodles贴纸形状与涂鸦 imagery supporting辅助特征
Stars, blobby badges, arrows, and squiggles with the same black outlines, scattered like stickers.
星星、不规则徽章、箭头和曲线，描着同款黑边，像贴纸一样散落各处。
-
Push-into-shadow presses按进阴影的按压 motion supporting辅助特征
Hover/active states translate the element toward its shadow, as if pressing a physical sticker flat.
hover/active 状态把元素朝自己的阴影平移，像把一张实体贴纸按平。
-
Which loud palette用哪套炸眼配色 color variable可变特征
Yellow-black is the cliché but any high-saturation set works; the borders and shadows carry the style, not one specific hue.
黄黑配是老套路，但任何高饱和组合都行；撑起这个风格的是边框和阴影，不是某个特定色相。
-
Soft rendering软渲染 depth avoid避免
Blurred shadows, gradients, or translucency dissolve the inked-print effect instantly — softness is the enemy.
模糊阴影、渐变或半透明会立刻瓦解勾线印刷的效果——「软」是天敌。
Often confused with: Web Brutalism最容易混淆：网页粗野主义
Neobrutalism新粗野主义
Web Brutalism网页粗野主义
This is Neobrutalism because the rawness is a designed costume: uniform thick borders, hard offset shadows, and saturated blocks are deliberate graphic choices.
这是新粗野主义，因为这份「生」是设计出来的戏服：统一的粗边框、生硬偏移阴影和饱和色块都是刻意的图形选择。
It would become Web Brutalism if the styling were removed rather than exaggerated — browser-default type, plain blue links, bare structure, and no decorative rendering at all.
如果把样式拿掉而不是加码——浏览器默认字体、朴素的蓝链接、裸露的结构、毫无装饰性渲染——它就变成网页粗野主义了。
In code — optional starting points代码写法 —— 可选起点
The signature card/button construction
border: 2px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 8px;Press-into-shadow interaction
:active { transform: translate(4px,4px); box-shadow: none; }Same construction as utilities
border-2 border-black shadow-[4px_4px_0_#000] active:translate-x-1 active:translate-y-1 active:shadow-noneStyle brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using Neobrutalism. Defining signals: a uniform 2–3px solid black border on every element; hard offset shadows — solid black, displaced ~4px down-right, zero blur (box-shadow: 4px 4px 0 #000); flat saturated color blocks (e.g. yellow, hot pink, lime) on a cream or white ground with no gradients; bold chunky display type for headings. Keep the specific palette and any sticker doodads flexible. Active states translate the element into its shadow (transform: translate(4px,4px) with the shadow removed). Do not drift into Web Brutalism; the decisive difference is that this look is heavily styled — removing the borders, shadows, and color in favor of browser defaults would make it brutalist proper. Preserve 4.5:1 text contrast on every colored block (black text on saturated fills usually passes; white on yellow never does), visible focus indicators distinct from the decorative borders, and reduced-motion support for press animations.
用新粗野主义创建界面。定义性信号：每个元素都有统一的 2–3px 纯黑实线边框；生硬偏移阴影——纯黑、向右下偏移约 4px、零模糊（box-shadow: 4px 4px 0 #000）；扁平的饱和色块（如黄、艳粉、青柠）平铺在米白或白色底上，不要渐变；标题用粗壮展示字体。具体配色和贴纸小装饰保持灵活。active 状态把元素平移进自己的阴影（transform: translate(4px,4px) 并移除阴影）。不要滑向网页粗野主义；决定性区别在于这个外观是重度设计出来的——去掉边框、阴影和颜色、改用浏览器默认值，才会变成真正的粗野主义。每个色块上的文字对比度保持 4.5:1（黑字配饱和填充通常能过；白字配黄永远过不了），焦点指示器要可见且与装饰性边框区分开，按压动画要支持 reduced-motion。
Accessibility & misuse可访问性与误用
Saturated fills need checked text contrast: black ink on yellow/lime passes easily; white ink on yellow, pink, or cyan usually fails 4.5:1.
饱和填充色必须检查文字对比度：黑字配黄/青柠轻松达标；白字配黄、粉或青通常过不了 4.5:1。
The decorative black borders look like focus rings — give keyboard focus a distinct, higher-visibility indicator (e.g. an offset outline in a reserved color).
装饰性的黑边框看起来很像焦点框——给键盘焦点一个明显不同、更显眼的指示器（比如用专属颜色的偏移 outline）。
NN/g's caution: the loudness taxes readability at length — keep body text plain and reserve the shout for structure and actions.
NN/g 的提醒：这种吵嚷长读会拖累可读性——正文保持朴素，把「喊」留给结构和操作。
Origin起源
Emerged around 2020–2022 in product marketing and portfolio sites (Gumroad's 2021 redesign is the era's poster child), catalogued by NN/g in 2023 as a reaction to soft, same-looking SaaS design — flat design turned up to eleven with comic-book construction.
大约 2020–2022 年间出现在产品营销和作品集网站上（Gumroad 2021 年的改版是那个时代的代表案例），2023 年被 NN/g 收录命名——它是对软绵绵、千站一面的 SaaS 设计的反击：把扁平设计拧到十一档，再套上漫画式的构造。