蒸汽波Vaporwave

核心特征

• 粉、紫、青三色渐变构成黄昏般的天空
• 底部有向地平线收拢的透视网格
• VT323 等宽点阵字体，带老式终端味
• 按钮与卡片模仿旧系统窗口，顶部有标题条
• 硬朗的偏移阴影，不做柔和模糊

色板与字体

英文

VT323（自托管）

中文

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

说明

VT323 模仿 1980 年代终端字体；真实项目也可用 Press Start 2P、IBM Plex Mono，或用日文字体做装饰标题，中文正文仍用系统黑体。

起源与代表作

年代：2010 年代初的网络音乐与视觉亚文化

蒸汽波最早是 2010 年代初在网络上出现的音乐类型，Daniel Lopatin 以 Chuck Person 之名发布的《Eccojams》（2010）与 Macintosh Plus 的《Floral Shoppe》（2011）被视为代表作。它把 1980–90 年代的广告音乐、电梯音乐与早期电脑界面反复拼贴、放慢，用来反讽消费主义的幻象。视觉上常见 Windows 95 式窗口、希腊雕像、棕榈树与日文字符，粉紫青的渐变和透视网格是最容易辨认的符号。

AI 设计提示词 · Prompt

蒸汽波（Vaporwave）风格界面：页面是从上到下的黄昏渐变，linear-gradient(180deg, #240B4F 0%, #4B1D8F 55%, #B967FF 100%)；下半部叠一层透视网格感，用 1px 青色 #01CDFE（55% 透明度）横竖线，横线间距 20px、竖线间距 28px，并渐变压暗到 #240B4F。卡片模仿旧系统窗口：背景 #240B4F（82% 透明度），2px 青色描边，顶部有 16px 的紫到青渐变标题条，硬投影 4px 4px 0 #FF71CE，圆角 0。标题与数字使用 VT323，标题 46px，颜色梦幻白 #FFF4FF，带 3px 3px 0 #FF71CE 的偏移阴影；按钮粉色 #FF71CE 底、深紫 #240B4F 字，2px 白色描边，右下 3px 青色硬阴影。正文用系统黑体，次要文字 #E0D2FF。不使用照片，保持梦幻、失真的气氛；所有正文对比度不低于 4.5:1，网格与渐变不得压住文字。

A Vaporwave interface: the page is a dusk gradient from top to bottom, linear-gradient(180deg, #240B4F 0%, #4B1D8F 55%, #B967FF 100%); the lower half carries a perspective-grid feel made of 1px cyan #01CDFE lines at 55% opacity, horizontal lines every 20px and vertical lines every 28px, fading darker toward #240B4F. Cards imitate old system windows: background #240B4F at 82% opacity, a 2px cyan border, a 16px purple-to-cyan title bar on top, a hard shadow 4px 4px 0 #FF71CE and 0 corner radius. Headings and numbers use VT323, headings at 46px in dream white #FFF4FF with a 3px 3px 0 #FF71CE offset shadow; buttons are pink #FF71CE with deep purple #240B4F text, a 2px white border and a 3px cyan hard shadow. Body text uses a system sans-serif, secondary text #E0D2FF. No photos; keep a dreamy, distorted mood. Keep body contrast at least 4.5:1 and never let the grid or gradient sit under text.

CSS 设计变量

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

:root {
  --ds-bg-top: #240b4f;
  --ds-bg-bottom: #b967ff;
  --ds-text: #fff4ff;
  --ds-pink: #ff71ce;
  --ds-cyan: #01cdfe;
  --ds-grid-line: rgba(1, 205, 254, 0.55);
  --ds-radius: 0;
  --ds-shadow: 4px 4px 0 #ff71ce;
}

适合与不适合

和相近风格的区别

• Y2K 风格：蒸汽波是夜晚般的粉紫青渐变、老式系统窗口与失真感，带着反讽；Y2K 更明亮乐观，银白金属、糖果色与气泡高光，是对未来的真诚向往。
• 赛博朋克：蒸汽波怀旧而梦幻，色彩柔和、气氛慵懒；赛博朋克是近黑底上的霓虹与切角，气氛冷硬，带着反乌托邦的紧张感。

常见踩坑

• VT323 等点阵字体字形偏小，正文不要使用，只用于标题、数字和按钮，字号保持 16px 以上
• 渐变天空加网格线很容易穿过文字，网格只铺在页面下部，并在文字区域垫半透明深色面板，保证对比度不低于 4.5:1
• 粉色、青色在深紫底上很刺眼，大面积使用会造成视觉疲劳，大块区域改用低饱和的紫色渐变
• 大面积渐变加多层伪元素会增加绘制开销，网格用单个伪元素绘制，不要给每张卡片都叠加

相关 UI 模式

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

常见问题