Grunge Grunge（垃圾摇滚风）
Grunge is the visual language of deliberate decay: surfaces look like they have been photocopied one too many times, dragged through a basement, or printed on cheap newsprint that got rained on. It trades polish for texture — xerox grain, scratches, coffee stains, torn paper, smudged ink, and a palette of dirty olives, rust, mustard, and faded blacks. Unlike a clean retro look, grunge keeps the dirt as decoration; it flourishes in music packaging, zine sites, alternative editorial, and any interface that wants to feel handmade, lived-in, and slightly broken.
Grunge 是刻意衰败的视觉语言：表面看起来像是被多复印了一次的传单、在地下室里拖过、或是印在 cheap newsprint 上又被雨淋过。它用质感交换精致——复印颗粒、划痕、咖啡渍、撕纸、晕染的墨，以及脏橄榄、铁锈、芥末和褪色的黑。和干净的复古风不同，grunge 把污垢本身当作装饰；它在音乐包装、独立杂志风网站、另类编辑设计，以及任何想让人觉得手工、用过、有点破损的界面里生长。
Scope: This entry covers the distressed-texture UI/graphic style rooted in 1990s alternative print culture. It overlaps with zine-collage and anti-design, but grunge is defined by surface decay and a muted, dirty palette rather than by editorial collage narrative or aggressive rule-breaking.
范围：本条覆盖根植于 1990 年代另类印刷文化的 distressed-texture UI/平面风格。它与独立杂志拼贴和反设计有交集，但 grunge 的核心是表面衰败与 muted dirty 配色，而不是编辑拼贴叙事或侵略性的规则破坏。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Visible dirt and distress可见的污垢与破损 surface defining定义特征
Surfaces carry grain, scratches, stains, creases, or smudges as first-class decoration — not as subtle weathering but as the dominant visual texture, usually built with noise overlays, multiply-blended bitmaps, or SVG grit.
表面把颗粒、划痕、污渍、折痕或晕染当作一等装饰——不是 subtle weathering，而是主导视觉质感，通常用 noise overlay、multiply 混合位图或 SVG grit 实现。
-
Muted, dirty color paletteMuted dirty 配色 color defining定义特征
Colors look like they have been faded, soaked, or overprinted: olive drab #5c5a3e, rust #9e4b34, mustard #c4a035, newsprint beige #e8e2d4, and washed-out black #1f1f1f rather than clean primaries or neon accents.
颜色看起来像是褪色、浸泡或过印的：橄榄褐 #5c5a3e、铁锈红 #9e4b34、芥末黄 #c4a035、新闻纸米 #e8e2d4，以及洗过的黑 #1f1f1f——不是干净的原色或霓虹强调色。
-
Torn or photocopied edges撕裂或复印边缘 geometry defining定义特征
Borders are ragged, feathered, or clipped into torn-paper silhouettes; edges may show a dark photocopy halo or the speckled white fringe of a rough cut, not a crisp vector rectangle.
边缘是参差的、羽化的，或被剪成撕纸轮廓；可能显出深色复印光晕或粗剪留下的碎白边，而不是利落的矢量矩形。
-
Distressed or stamped letterforms破损或压印字形 typography defining定义特征
Type looks stamped, stenciled, rubber-stamped, or partially eroded — letterpress ink texture, missing serifs, uneven baseline, and weights that feel pulled from old concert posters.
字体看起来像是盖戳、镂空模板、橡皮章盖印或局部侵蚀——活版油墨质感、缺失的衬线、不齐的基线，以及像从老演唱会海报里扯下来的字重。
-
Layered decay and overlap层叠衰败与重叠 layout defining定义特征
Cards, photos, and tape pieces overlap at slight angles, each carrying its own stain or fade, so the composition reads as an archaeological stack rather than a single flat surface.
卡片、照片和胶带片以轻微角度互相重叠，每一件都带自己的污渍或褪色，让构图读起来像一叠考古层，而不是单一平面。
-
Analog noise and halftone grain模拟噪点与半调颗粒 surface supporting辅助特征
Photocopy dots, scanner banding, film grain, or halftone screens sit over images and backgrounds to keep the digital surface from feeling too clean.
复印网点、扫描条纹、胶片颗粒或半调网屏落在图像和背景上，让数字表面不至于太干净。
-
Handmade markings手工痕迹 imagery supporting辅助特征
Sharpie arrows, coffee rings, scotch tape, handwritten scrawl, and correction-fluid marks appear as ornaments that emphasize the human, imperfect process.
记号笔箭头、咖啡环、透明胶带、手写涂鸦和涂改液痕迹作为装饰出现，强调人的、不完美的制作过程。
-
Clean vector polish干净的矢量抛光 surface avoid避免
Perfectly smooth gradients, glass blur, neon glows, or crisp geometric flatness contradict the grunge premise; the whole point is to keep the surface visibly damaged.
完美平滑的渐变、玻璃模糊、霓虹辉光或利落的扁平几何都与 grunge 前提相违；它的全部要点就是让表面保持可见的损伤。
Often confused with: Anti-design / Dada Web最容易混淆：反设计 / Dada Web
GrungeGrunge（垃圾摇滚风）
Anti-design / Dada Web反设计 / Dada Web
This is grunge because the aggression is material, not compositional: the surface is distressed, stained, and photocopied, but the layout can still hold together and the palette stays dirty-muted rather than neon-clashing.
这是 Grunge，因为侵略性来自材质，而不是构图：表面是破损、污渍、复印过的，但布局仍可聚拢，配色保持 dirty-muted，而不是霓虹撞色。
It would become Anti-design if the muted decay were replaced with high-saturation neon clashes, deliberate broken-grid collisions, and system defaults pushed to absurdity — the conflict would move from texture to composition.
如果把 muted decay 换成高饱和霓虹撞色、故意的破碎网格碰撞，并把系统默认推至荒诞——冲突从质感转移到构图——它就变成反设计了。
In code — optional starting points代码写法 —— 可选起点
Photocopy noise overlay with multiply blend
.grunge-surface { position: relative; background: #e8e2d4; } .grunge-surface::after { content: ''; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply; pointer-events: none; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }Torn paper edge with irregular clip-path
.torn-card { background: #f3f0e6; border: 1.5px solid #2a2720; clip-path: polygon(0% 2%, 4% 0%, 18% 1%, 38% 0%, 62% 2%, 82% 0%, 96% 1%, 100% 4%, 99% 22%, 100% 48%, 98% 74%, 100% 96%, 96% 100%, 72% 99%, 48% 100%, 24% 98%, 4% 100%, 0% 97%, 1% 74%, 0% 50%, 1% 26%); box-shadow: 3px 4px 0 rgba(31,31,31,.25); }Distressed type with rough edges and letterpress shadow
.grunge-title { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 34px; color: #1f1f1f; text-transform: uppercase; letter-spacing: -0.02em; text-shadow: 1px 1px 0 rgba(94,90,62,.35), -1px -1px 0 rgba(200,200,200,.2); filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.05' numOctaves='2' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='2'/%3E%3C/filter%3E%3C/svg%3E#r"); }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the interface in the Grunge style. Defining signals: visible dirt and distress as the dominant surface treatment — add photocopy noise, scratches, stains, and creases via multiply-blended overlays or SVG filters; a muted, dirty palette of olive drab #5c5a3e, rust #9e4b34, mustard #c4a035, newsprint beige #e8e2d4, and washed-out black #1f1f1f; torn or photocopied edges using irregular clip-paths or ragged border-radius rather than crisp rectangles; distressed typography that looks stamped, stenciled, or partially eroded (use 'Impact', 'Arial Black', or letterpress-style slabs); layered decay with overlapping cards, tape hinges, and angled paper pieces so the layout reads as a stack of found objects. Use analog noise and halftone grain over images, and add handmade markings like sharpie arrows or coffee rings as ornament. Avoid clean vector polish: no glassmorphism, no smooth gradients, no neon glows, no perfectly flat geometric shapes. Keep type large enough to survive the texture (body ≥ 14px on solid paper fills) and preserve keyboard focus with a thick #1f1f1f outline. Honor prefers-reduced-motion by disabling any shake or jitter animations.
按 Grunge 风格创建这个界面。决定性信号：可见的污垢与破损作为主导表面处理——通过 multiply 混合 overlay 或 SVG filter 添加复印噪点、划痕、污渍和折痕；muted dirty 配色：橄榄褐 #5c5a3e、铁锈红 #9e4b34、芥末黄 #c4a035、新闻纸米 #e8e2d4、洗过的黑 #1f1f1f；用不规则 clip-path 或参差 border-radius 做出撕裂或复印边缘，而不是利落矩形；破损字体要看起来像是盖戳、镂空模板或局部侵蚀（使用 'Impact'、'Arial Black' 或活版风 slab）；层叠衰败——重叠的卡片、胶带铰链和倾斜纸片，让布局读出一叠 found objects 的感觉。在图像上加模拟噪点和半调颗粒，并用记号笔箭头、咖啡环等手工痕迹作装饰。避免干净的矢量抛光：不要玻璃拟态、不要平滑渐变、不要霓虹辉光、不要完美的扁平几何。文字要够大以承受纹理（正文在实心纸色填充上至少 14px），并用粗 #1f1f1f outline 保留键盘焦点。响应 prefers-reduced-motion，关闭晃动或抖动动画。
Accessibility & misuse可访问性与误用
Grunge's defining dirt can become a barrier if texture is allowed to overwhelm text. Always place readable type on a solid, high-contrast backing — newsprint beige #e8e2d4 behind #1f1f1f body text — and keep the noise overlay below 40% opacity so it does not interfere with letter recognition.
Grunge 标志性的污垢如果压过文字就会成为障碍。始终把可读文字放在纯色高对比背板上——新闻纸米 #e8e2d4 打底、#1f1f1f 正文——并把噪点 overlay 压在 40% 不透明度以下，避免干扰字母识别。
Distressed typography is decorative; use it only for headlines and short labels. Body copy and controls should use a clean sans-serif or slab-serif at 14px or larger, with letter-spacing slightly opened if the typeface is condensed.
破损字体只作装饰，仅用于标题和短标签。正文与控件请用干净的无衬线或 slab-serif，至少 14px，若字体较压缩则稍微加大字间距。
Layered, torn, and rotated elements must not trap keyboard focus or hide interactive controls. Provide a visible focus indicator that survives the texture, such as a 3px solid #1f1f1f outline with 3px offset, and disable any shake, flicker, or jitter under prefers-reduced-motion.
层叠、撕裂和旋转元素不能困住键盘焦点或隐藏交互控件。提供能在纹理上存活的可见焦点指示器，例如 3px 实线 #1f1f1f outline、3px 偏移；在 prefers-reduced-motion 下关闭晃动、闪烁或抖动。
Origin起源
Grunge emerged from the visual culture of 1980s and 1990s punk, hardcore, and independent music scenes — particularly the Pacific Northwest — where flyers and album art were produced with photocopiers, Letraset rub-down type, and found imagery rather than professional presses. The look spread through record sleeves for bands on Sub Pop and similar labels, and through zines that embraced Xerox artifacts and cheap paper as part of the message. As a named web and UI style, grunge resurged in the late 2000s alongside vintage and retro trends, then was revived again in the 2020s as a reaction to the clinical uniformity of polished SaaS interfaces.
Grunge 源自 1980、1990 年代朋克、硬核和独立音乐场景的视觉文化，尤其是太平洋西北地区——那里的传单和专辑艺术用复印机、Letraset 转印字体和现成图像制作，而不是专业印刷。这种外观通过 Sub Pop 等厂牌旗下乐队的唱片封套，以及拥抱 Xerox 痕迹和廉价纸张的 zine 传播开来。作为一个具名的网页/UI 风格，grunge 在 2000 年代末随复古风潮 resurgence，然后在 2020 年代再次被 revival，作为对 polished SaaS 界面千篇一律的冷感反弹。