复古未来主义
Retro-Futurism
别名:复古未来主义复古未来风太空时代风原子时代设计七八十年代科幻风落日灰壳那种怀旧科技AtompunkRaygun Gothic
这是什么
"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
开发规格
字体
等宽铬金标题，全大写
色彩
深紫渐变 #140A33→#7A1F63 × 粉 #FF71CE
边框
1px 霓虹粉描边
阴影
霓虹光晕
间距
网格地平线式构图
动效
200–300ms 的霓虹渐亮与扫描线位移，尊重 prefers-reduced-motion
状态反馈
hover 增强铬金与粉光晕；focus 用粉色可见亮环；active 压低亮度；disabled 去光降饱和；error 用洋红霓虹
风格演示
先看整页效果，再试交互场景整页预览
DRIVE INTO
THE SUNSET
回到 1984 年想象的未来。
合成器 · 网格地平线 · 铬金标题
播放电台 →粉紫橙三段
无尽公路感
金属反光标题
交互场景
正在加载演示…
✓ 适用场景
- 游戏 音乐 与怀旧科技主题的品牌叙事
- 需要温暖乐观的未来感，拒绝冰冷的赛博叙事
- 概念产品 活动页，"过去的明天"是故事本身
✕ 不适用场景
- 现代工具型产品，旧机身隐喻降低效率感知
- 极简高端品牌，复古装饰稀释品牌信号
- 需要无障碍大对比的场景，暖色低对比组合常见
常见形式
原子时代
Atompunk
五六十年代太空竞赛，轨道线与火箭
卡带未来
Cassette Futurism
七八十年代 CRT 与米色机身仪表盘
合成器落日
Synth Sunset
落日条纹网格地平线，与 Y2K 相邻
实现要点
background: linear-gradient(#F5E6C8, #E8B87A)border-radius: 24pxbox-shadow: insetrepeating-linear-gradientfont-family: monospace色板锁在暖调：奶油 #F2E4C2 杏橙 #E8965A 陶土棕 #8A4B2E 配一点湖蓝 #3D7A99 点缀；机身感来自大圆角（20px+）+ 双重内阴影（上亮下暗）模拟 塑料厚度；轨道线用细椭圆边框，网格地平线用 repeating-linear-gradient； 文字可混用宽体几何无衬线与等宽屏显字。深色模式转为 CRT：暖黑底加荧光 琥珀或青色屏显字。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用复古未来主义（Retro-Futurism）实现一个机身感卡片与按钮区块。 先检查现有 Design Token 与色彩变量，复古暖色板做独立作用域。 要求： - 暖色奶油橙棕色板锁定，不引入冷灰 - 大圆角 + 双重内阴影模拟塑料机身，按钮有实体按压感 - 轨道线 网格地平线等点缀元素克制在 2～3 处 - 支持深色模式（CRT 暖黑 + 荧光琥珀屏显） - 若有动效，尊重 prefers-reduced-motion - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念"High tech, low life" 的视觉语言：近黑的深底上，霓虹青与品红发光描边切割 界面，等宽字体与终端符号贯穿，扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的，界面像一台被劫持的显示器。
风格相似概念用大面积流动渐变光斑营造氛围的视觉语言：青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡，界面因此获得呼吸感与情绪温度。
风格相似概念用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件