蒸汽波Vaporwave
粉紫青三色霓虹、网格地平线、VHS 噪点与日文排版。情绪浓度高，适合作为活动皮肤而非长期界面。
典型场景音乐视觉 · 潮流联名 · 亚文化社区
编号45
年代1980s-90s Retro
复杂度Medium
默认模式深色
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
粉紫青三色霓虹、网格地平线、VHS 噪点与日文排版。情绪浓度高，适合作为活动皮肤而非长期界面。
关键词
Synthwaveretro-futuristic80s-90sneonglitchnostalgicsunset gradientdreamyaesthetic
效果与动效
text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines
设计系统变量
--vapor-pink#FF71CE--vapor-cyan#01CDFE--vapor-mint#05FFA1--vapor-purple#B967FF--grid-colorrgba(255,255,255,0.1)--glow-intensity15px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)
辅色 / Secondary
Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations
强调色在页面底色上的对比度约 7.8:1，可用于正文与图标。
适用场景
适合 / Best For
- Music platforms
- gaming
- creative portfolios
- tech startups
- entertainment
- artistic projects
避开 / Do Not Use For
- Business apps
- e-commerce
- education
- healthcare
- enterprise software
框架兼容
tailwindcss-in-js
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向中Medium
渲染成本中animation / blur
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Sunset gradient present,
- Neon glow applied,
- Retro grid visible,
- Glitch effects subtle,
- Dreamy atmosphere,
- 80s-90s aesthetic
CSS / 技术关键词
background: linear-gradient(180deg, #FF71CE, #01CDFE, #B967FF), filter: hue-rotate(), text-shadow: neon glow, retro grid (perspective + linear-gradient), VHS scanlines
AI 提示词
Design a vaporwave aesthetic interface. Use: sunset gradients (pink/cyan/purple), 80s-90s nostalgia, glitch effects, Greek statue imagery, palm trees, grid patterns, neon glow, retro-futuristic feel, dreamy atmosphere.