酸性设计Acid Graphics

核心特征

• 黑或银底，搭配荧光绿 #C6FF00
• 铬银渐变用在数字与按钮上
• 只勾描边的镂空大标题，带倾斜变形
• 背景叠细网格线，营造蓝图般的精密感
• 边角加小号技术标注，如编号与坐标

色板与字体

英文

Space Grotesk（自托管）

中文

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

说明

原版海报常用宽体或变形的无衬线字；真实项目可用 Syne、Unbounded 或 Archivo 的宽体做标题，细节标注用等宽字体。

起源与代表作

年代：2019 年前后在平面与潮流品牌中流行，源自 1980–90 年代锐舞文化

酸性设计借用了 1980 年代末兴起的 acid house 音乐，以及 1990 年代锐舞（rave）海报里的荧光色、扭曲字形与金属质感。2019 年前后，它重新出现在潮流品牌、唱片封面与海报设计中，并与千禧年的铬银色风格混合。它的特点是用夸张的变形、描边与重复来制造迷幻、失控的视觉冲击，同时辅以细网格和技术标注，让画面带着实验性。

AI 设计提示词 · Prompt

酸性设计（Acid Graphics）风格界面：页面背景漆黑 #0A0A0A，叠加 32px 间距的细网格：横竖各一层 linear-gradient，线色为酸性绿 #C6FF00（10% 透明度），宽 1px。文字冷白 #F2F2F2，次要文字 #B4BAC4。标题使用 Space Grotesk 700，40px，只勾描边：color 透明，-webkit-text-stroke: 2px #C6FF00，并整体 skewX(-8deg) 倾斜；数字用从 #FFFFFF 到 #9AA1AD 再到 #E8EBEF 的铬银渐变裁剪文字。主按钮酸性绿底、#0A0A0A 字，大写，字距 0.08em；导航里的小按钮用四段铬银渐变。卡片黑底 #141414，1px 铬银 #C9CED6 细边，零圆角，卡片左上角用 CSS counter 加「FIG.01」式技术标注。电紫 #6C4DFF 只做极少量点缀。所有正文对比度不低于 4.5:1，描边字体不得用于正文。

An Acid Graphics interface: page background jet black #0A0A0A overlaid with a fine 32px grid, one horizontal and one vertical linear-gradient layer with 1px lines in acid green #C6FF00 at 10% opacity. Text is cold white #F2F2F2, secondary text #B4BAC4. Headings use Space Grotesk 700 at 40px as outline only: transparent color, -webkit-text-stroke: 2px #C6FF00, and the whole heading tilted with skewX(-8deg); numbers use a chrome-silver gradient clipped to the text, from #FFFFFF through #9AA1AD to #E8EBEF. The primary button is acid green with #0A0A0A text, uppercase with 0.08em letter-spacing; the small button in the navbar uses a four-stop chrome-silver gradient. Cards are black #141414 with a 1px chrome-silver #C9CED6 hairline and zero corner radius, with a technical annotation such as FIG.01 generated by a CSS counter at the top-left. Electric violet #6C4DFF is used only as a rare accent. Keep body contrast at least 4.5:1 and never use outlined type for body text.

CSS 设计变量

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

:root {
  --ds-bg: #0a0a0a;
  --ds-text: #f2f2f2;
  --ds-muted: #b4bac4;
  --ds-acid: #c6ff00;
  --ds-chrome: #c9ced6;
  --ds-violet: #6c4dff;
  --ds-grid: 32px;
  --ds-skew: -8deg;
}

适合与不适合

和相近风格的区别

• 赛博朋克：酸性设计靠荧光绿、铬银与夸张变形制造迷幻与失控，带有锐舞与平面实验气质；赛博朋克是近黑底上的霓虹与切角面板，指向未来都市的科幻叙事。
• Y2K 风格：两者都用到铬银与金属质感。Y2K 搭配糖果粉蓝，明亮乐观；酸性设计搭配荧光绿与黑底，加上描边大字和变形，更暗、更具实验性。

常见踩坑

• 描边镂空字体笔画细，小字号下几乎无法辨认，只用在 36px 以上的大标题，正文必须用实心字并保证对比度不低于 4.5:1
• 荧光绿在白底上几乎看不见，必须放在黑色或深色底上；文字类使用时检查与背景的对比度
• -webkit-text-stroke 与 background-clip: text 在部分旧浏览器不受支持，需要用 @supports 提供实心文字的降级
• 网格、渐变裁剪文字与 transform 变形叠加会增加绘制开销，动效需遵守 prefers-reduced-motion，倾斜只用在个别标题上

相关 UI 模式

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

常见问题