Anti-design / Dada Web 反设计 / Dada Web
Anti-design / Dada Web treats visual conflict as the whole aesthetic: clashing typefaces, overlapping elements, broken grids, high-saturation colors that fight each other, and system defaults pushed to absurdity. It is deliberately ugly, but ugly by design — a collage-like rebellion against clean UX, grid systems, and brand-safe palettes. It flourishes in experimental portfolios, zine sites, art-school projects, and any screen that wants to look like it escaped from a Dadaist cut-up magazine rather than a design system.
反设计 / Dada Web 把视觉冲突当作整套审美：冲突的字体、互相重叠的元素、破碎的网格、高饱和度且彼此打架的颜色，以及被推向荒诞的系统默认样式。它是故意做丑，但丑是设计出来的——像拼贴画一样反叛干净 UX、网格系统和品牌安全配色。它在实验性作品集、独立杂志风网站、艺术院校项目，以及任何想让自己看起来像从达达主义剪贴杂志里逃出来的屏幕上繁荣生长。
Scope: This entry covers the intentionally transgressive web/graphic look. It is distinct from Web Brutalism (honest bare-browser defaults) and Neobrutalism (a styled, thick-border graphic language). The line between anti-design and zine-collage is thin, but anti-design is more about rule-breaking and visual aggression than about editorial collage narrative.
范围：本条只覆盖故意越界的网页/平面外观。它不同于网页粗野主义（诚实的裸露浏览器默认）和新粗野主义（一套设计好的粗黑边框图形语言）。反设计与杂志拼贴之间的界线很细，但反设计更侧重破坏规则和视觉侵略性，而不是编辑拼贴叙事。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Intentionally conflicting typefaces故意冲突的字体 typography defining定义特征
Two to four unrelated fonts collide in one view — system serif next to monospace next to a wavy display face — often at mismatched sizes (e.g. 12px body beside 64px headline) and with competing weights.
一个视图里挤进两到四种互不相关的字体——系统衬线体挨着等宽体，再挨着波浪形展示字体——字号也常常不匹配（例如 12px 正文旁边是 64px 标题），字重互相较劲。
-
Broken, overlapping grid破碎的叠合网格 layout defining定义特征
Elements ignore a consistent baseline: cards bleed off edges, buttons sit half on top of text, progress bars tilt or wander. Negative space is used as aggressively as positive space.
元素无视一致的基线：卡片出血到边缘之外，按钮半压在文字上，进度条倾斜或游走。负空间和正空间一样被激进地使用。
-
High-saturation color clashes高饱和撞色 color defining定义特征
Neon magenta, acid green, warning orange, and electric blue appear side by side with no attempt at harmony; backgrounds may be #ff0040 behind #00ff66 text, deliberately flirting with illegibility.
洋红、荧光绿、警示橙和电光蓝并排出现，毫无调和意图；背景可能是 #ff0040，上面放 #00ff66 的文字，故意游走于难读边缘。
-
System defaults pushed to absurdity系统默认被推至荒诞 surface defining定义特征
Default form controls, system cursors, scrollbars, and raw HTML elements are retained but exaggerated — giant default checkboxes, default-blue links at 32px, or system alerts used as ornament.
保留默认表单控件、系统光标、滚动条和原始 HTML 元素，但把它们夸张化——巨大的默认复选框、32px 的默认蓝色链接，或把系统警告框当装饰用。
-
Collage-style overlap拼贴式重叠 layout defining定义特征
Images, text blocks, and UI chrome layer on top of one another with mixed blend modes or no blending at all, as if cut out and glued down in stages.
图片、文字块和界面 chrome 互相层叠，可能使用混合模式，也可能完全不混合，就像被剪下来再分阶段粘上去。
-
Anti-usability as gesture反可用性作为姿态 motion defining定义特征
Common patterns are deliberately warped — buttons that rotate on hover, cursors replaced by giant symbols, scroll direction inverted — to make the user notice the interface instead of disappearing into it.
常见模式被故意扭曲——hover 时旋转的按钮、被巨型符号取代的光标、反向滚动——让用户注意到界面本身，而不是消失在其中。
-
Jarring mixed geometry刺眼的混合几何 geometry supporting辅助特征
Circles, jagged polygons, dashed rectangles, and hand-drawn squiggles share the same canvas with no unifying radius or proportion system.
圆形、锯齿多边形、虚线矩形和手绘曲线共享同一块画布，没有统一的圆角或比例系统。
-
Soft shadows and gradients柔和阴影与渐变 depth avoid避免
Blurred drop shadows, glassmorphism, or gentle gradients signal polish and calm — the exact temperament anti-design tries to destroy.
模糊的投影、玻璃拟态或温和的渐变意味着精致与平静——这正是反设计要摧毁的气质。
Often confused with: Web Brutalism最容易混淆：网页粗野主义
Anti-design / Dada Web反设计 / Dada Web
Web Brutalism网页粗野主义
This is Anti-design because the chaos is actively manufactured: overlapping shapes, clashing type, and aggressive color are deliberate aesthetic choices, not the browser's default bare materials.
这是反设计，因为混乱是被主动制造出来的：重叠的形状、冲突的字体和侵略性的颜色都是刻意的美学选择，而不是浏览器默认的裸露材料。
It would become Web Brutalism if the manufactured conflict were stripped away and the page were rebuilt from browser defaults — Times, blue links, white ground, visible document structure, and no decorative rendering at all.
如果把制造出来的冲突全部剥掉，页面改用浏览器默认值重建——Times 字体、蓝色链接、白底、可见的文档结构、没有任何装饰性渲染——它就变成网页粗野主义了。
In code — optional starting points代码写法 —— 可选起点
Overlapping collage layers with clashing fills
.layer { position: absolute; border: 3px dashed #000; background: #ff0040; color: #00ff66; font: 700 28px 'Times New Roman', serif; transform: rotate(-8deg); z-index: 2; }System default link pushed to absurd scale
a { color: #0000ee; text-decoration: underline; font: 32px system-ui; text-transform: uppercase; letter-spacing: -0.04em; }Anti-grid container: no alignment, just collision
.wrapper { display: block; position: relative; background: #f0f; padding: 0; } .wrapper > * { position: absolute; margin: 0; }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the interface in the Anti-design / Dada Web spirit. Defining signals: intentionally conflicting typefaces (mix Times New Roman, system-ui, and a wavy/italic display face in one view); a broken, overlapping grid where elements bleed and collide; high-saturation color clashes such as #ff0040, #00ff66, #00ccff, and #ffaa00 used side by side; system defaults pushed to absurdity (giant default-blue #0000ee links, oversized raw checkboxes, default scrollbars left visible); collage-style overlap with absolute positioning and mixed z-index; anti-usability gestures like rotating buttons on hover or inverted hover states. Use hard-edged shapes — dashed 3px #000 borders, zero blur on shadows if any, and mismatched border radii (0px, 50%, 24px). Avoid soft rendering: no backdrop-filter, no glass, no gradients, no blurred shadows. Keep the specific color set and rotation angles flexible. Preserve the core function — buttons must still be clickable, progress must still be readable — but make the visual argument loud. Ensure focus states remain visible with a thick #000 outline, and honor prefers-reduced-motion by disabling rotation/tilt animations.
按反设计 / Dada Web 的精神创建这个界面。定义性信号：故意冲突的字体（一个视图里混用 Times New Roman、system-ui 和波浪/斜体展示字体）；破碎且互相重叠的网格，元素出血、碰撞；高饱和撞色，如 #ff0040、#00ff66、#00ccff、#ffaa00 并排使用；系统默认被推至荒诞（巨大的默认蓝 #0000ee 链接、 oversized 原始复选框、保留默认滚动条）；拼贴式重叠，使用绝对定位和混合的 z-index；反可用性姿态，如 hover 旋转按钮或反向 hover 状态。使用硬边形状——3px 虚线 #000 边框、阴影如有则零模糊、不匹配的圆角（0px、50%、24px）。避免软渲染：不要有 backdrop-filter、玻璃、渐变或模糊阴影。具体配色和旋转角度保持灵活。保留核心功能——按钮仍然可点，进度仍然可读——但让视觉主张很吵。焦点状态必须可见，用粗 #000 outline；响应 prefers-reduced-motion，关闭旋转/倾斜动画。
Accessibility & misuse可访问性与误用
Anti-design deliberately courts low contrast and cognitive overload, so the real risk is excluding users with low vision, photosensitivity, or cognitive disabilities. Never let decoration block function: keep text on a solid high-contrast backing wherever the user must read or act.
反设计故意追求低对比度和高认知负荷，因此真正的风险是把低视力、光敏性或认知障碍用户排除在外。绝不能让装饰阻碍功能：用户必须阅读或操作的地方，文字要放在纯色高对比背板上。
Disable all rotation, shake, cursor replacement, and rapid motion under prefers-reduced-motion, and keep any flashing color transitions below the WCAG 2.5.3 / three-flashes-per-second threshold.
在 prefers-reduced-motion 下关闭所有旋转、晃动、光标替换和快速运动；任何闪烁的颜色过渡都要低于 WCAG 2.5.3 / 每秒三次闪烁的阈值。
Provide a visible, unambiguous focus indicator (e.g. a 3px solid #000 outline with 2px offset) that survives clashing backgrounds; keyboard users must never have to hunt for the active element.
提供可见且明确的焦点指示器（例如 3px 实线 #000 outline、2px 偏移），确保它在撞色背景上依然可辨；键盘用户绝不该去找当前焦点在哪。
Origin起源
The term descends from the Italian Anti-design / Radical Design movement of the late 1960s and early 1970s — groups such as Archizoom and Superstudio in Florence, and figures including Ettore Sottsass, who rejected functionalist 'good design' in favor of provocation, kitsch, and social critique. On the web, the sensibility resurfaced in the late 2010s alongside web brutalism and was increasingly labeled anti-design or 'Dada Web' by the early 2020s as designers deliberately broke grids, clashed type, and weaponized ugliness against the sameness of polished SaaS interfaces.
这个词源自 1960 年代末到 1970 年代初的意大利反设计 / 激进设计运动——佛罗伦萨的 Archizoom、Superstudio 等团体，以及 Ettore Sottsass 等人——他们拒绝功能主义的「好设计」，转而拥抱挑衅、媚俗和社会批判。在网页领域，这种气质在 2010 年代末随着网页粗野主义重新浮现，到 2020 年代初，越来越多的设计师故意打破网格、冲突字体、把丑陋当作武器来对抗千篇一律的精致 SaaS 界面，这种风格也逐渐被贴上反设计或「Dada Web」的标签。