复古未来主义Retro-Futurism
80 年代对未来的想象：霓虹青与品红、CRT 扫描线、轻微故障抖动。情绪浓烈，适合短时沉浸，长时间阅读会疲劳。
典型场景游戏 · 音乐发行 · 潮流品牌
编号11
年代1980s 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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
80 年代对未来的想象：霓虹青与品红、CRT 扫描线、轻微故障抖动。情绪浓烈，适合短时沉浸，长时间阅读会疲劳。
关键词
Vintage sci-fi80s aestheticneon glowgeometric patternsCRT scanlinespixel artcyberpunksynthwave
效果与动效
CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)
设计系统变量
--neon-colors#0080FF #FF006E #00FFFF--background#000000--font-familymonospace--effectglitch+glow--scanline-opacity0.3--crt-effecttrue配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0
辅色 / Secondary
Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents
强调色在页面底色上的对比度约 4.4:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Gaming
- entertainment
- music platforms
- tech brands
- artistic projects
- nostalgic
- cyberpunk
避开 / Do Not Use For
- Conservative industries
- critical accessibility
- professional/corporate
- elderly
- legal/finance
框架兼容
tailwindcss-in-js
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向中Medium
渲染成本中animation / blur
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Neon colors used,
- CRT scanlines effect,
- Glitch animations active,
- Monospace font,
- Deep black background,
- Glow effects applied,
- 80s patterns present
CSS / 技术关键词
color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate
下辖变体：蒸汽波、色差分离 / RGB 分离。
AI 提示词
Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.