{ "id": "retro-futurism", "type": "styles", "status": "published", "name": { "zh": "复古未来主义", "en": "Retro-Futurism" }, "aliases": [ "复古未来主义", "复古未来风", "太空时代风", "原子时代设计", "七八十年代科幻风", "落日灰壳那种怀旧科技", "Atompunk", "Raygun Gothic" ], "category": [ "Style", "Visual Language" ], "description": { "zh": "\"过去的人想象中的未来\"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。", "en": "The future as imagined by the past: cream-orange-brown warm palettes, chunky rounded casings, orbit lines and planet decals, pixel screens and CRT phosphor — optimistic tech that has aged. Space-age dashboards, vintage appliances and space-race posters fold into one warm nostalgic future." }, "use_when": [ { "zh": "游戏 音乐 与怀旧科技主题的品牌叙事", "en": "Games, music and nostalgia-tech brand storytelling" }, { "zh": "需要温暖乐观的未来感，拒绝冰冷的赛博叙事", "en": "Futures that feel warm and optimistic instead of cold-cyber" }, { "zh": "概念产品 活动页，\"过去的明天\"是故事本身", "en": "Concept pages where \"yesterday's tomorrow\" is the story" } ], "avoid_when": [ { "zh": "现代工具型产品，旧机身隐喻降低效率感知", "en": "Modern productivity tools — vintage casing metaphors hurt perceived efficiency" }, { "zh": "极简高端品牌，复古装饰稀释品牌信号", "en": "Minimal premium brands where retro garnish dilutes the signal" }, { "zh": "需要无障碍大对比的场景，暖色低对比组合常见", "en": "Accessibility-critical contexts — warm palettes often run low contrast" } ], "tags": [ "retro-futurism", "space-age", "nostalgia", "optimism", "vintage-tech" ], "variants": [ { "id": "atompunk", "name": { "zh": "原子时代", "en": "Atompunk" }, "note": { "zh": "五六十年代太空竞赛，轨道线与火箭", "en": "50s–60s space race — orbit lines and rockets" } }, { "id": "cassette", "name": { "zh": "卡带未来", "en": "Cassette Futurism" }, "note": { "zh": "七八十年代 CRT 与米色机身仪表盘", "en": "70s–80s CRTs on beige dashboard casings" } }, { "id": "synth", "name": { "zh": "合成器落日", "en": "Synth Sunset" }, "note": { "zh": "落日条纹网格地平线，与 Y2K 相邻", "en": "Sunset stripes over grid horizons — adjacent to Y2K" } } ], "applicable_components": [ "button", "card", "progress-bar", "input" ], "related": [ { "id": "y2k", "relation": "similar_to" }, { "id": "cyberpunk", "relation": "similar_to" }, { "id": "aurora", "relation": "similar_to" }, { "id": "glassmorphism", "relation": "similar_to" }, { "id": "card", "relation": "affects" } ], "demo": { "component": "retro-futurism", "modes": [ "default", "dark", "variants" ] }, "playground": { "task": { "zh": "播放电台由用户手势启动 WebAudio 合成单音；可播放/暂停、选择三曲、调节音量。电台、巡演、磁带、REC 有对应内容，明确本地合成并非真实广播或录音上传。", "en": "Play the radio starts a WebAudio synthesized tone after a user gesture. Play/pause, choose among three tracks and adjust volume. Radio, Tour, Tapes and REC reveal content; disclose local synthesis, not live broadcasting or recording uploads." }, "checks": [ { "zh": "逐一操作 SYNTH-84 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。", "en": "Use SYNTH-84’s original navigation and primary CTAs; inspect content and return paths, not just click notices." }, { "zh": "完成上述 SYNTH-84 操作后修改输入或撤销，检查结果与状态同步。", "en": "Complete the SYNTH-84 task, then change inputs or undo and inspect the matching result/state." }, { "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。", "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries." } ] }, "sources": [ { "name": "Wikipedia — Retrofuturism", "url": "https://en.wikipedia.org/wiki/Retrofuturism" }, { "name": "Wikipedia — Cassette futurism", "url": "https://en.wikipedia.org/wiki/Cassette_futurism" } ], "implementation": { "css": [ "background: linear-gradient(#F5E6C8, #E8B87A)", "border-radius: 24px", "box-shadow: inset", "repeating-linear-gradient", "font-family: monospace" ], "notes": { "zh": "色板锁在暖调：奶油 #F2E4C2 杏橙 #E8965A 陶土棕 #8A4B2E 配一点湖蓝 #3D7A99 点缀；机身感来自大圆角（20px+）+ 双重内阴影（上亮下暗）模拟 塑料厚度；轨道线用细椭圆边框，网格地平线用 repeating-linear-gradient； 文字可混用宽体几何无衬线与等宽屏显字。深色模式转为 CRT：暖黑底加荧光 琥珀或青色屏显字。", "en": "Lock the palette to warm tones: cream #F2E4C2, apricot #E8965A, terracotta #8A4B2E with a dash of lake blue #3D7A99. Casing comes from big radii (20px+) plus a double inset shadow (lit top, dark bottom) faking plastic thickness; orbit lines are thin ellipse borders; grid horizons use repeating-linear-gradient. Mix wide geometric sans with mono screen type. Dark mode goes CRT — warm black with phosphor amber or cyan type." } }, "prompts": { "basic": { "zh": "用复古未来主义（Retro-Futurism）设计界面：奶油橙棕暖色底、粗圆角机身感 卡片、轨道线与像素屏幕点缀，呈现\"过去想象的未来\"。", "en": "\"Design an interface in Retro-Futurism style: cream-orange-brown warm ground, chunky rounded casing cards, orbit lines and pixel-screen accents — the future as imagined by the past.\"" }, "design": { "zh": "复古未来设计规范：底色奶油 #F2E4C2 到杏橙 #E8965A 渐变；卡片大圆角 24px，上缘亮 内下缘暗的双重内阴影模拟塑料机身；按钮为胶囊形 或方形 大按钮，配湖蓝 #3D7A99 点缀；轨道线用 1px 椭圆，网格地平线用横向 repeating-linear-gradient；标题宽体几何无衬线，数据用等宽屏显字； 深色模式为 CRT 暖黑底 + 荧光琥珀字。", "en": "\"Retro-futurism spec: cream #F2E4C2 to apricot #E8965A gradient ground; cards at 24px radii with a double inset shadow (lit top edge, dark bottom) for plastic casing; pill or chunky square buttons with lake blue #3D7A99 accents; 1px ellipse orbit lines and a repeating-linear-gradient grid horizon; wide geometric sans headings, mono screen numerals. Dark mode: CRT warm black with phosphor amber.\"" }, "implementation": { "zh": "用当前风格完成 SYNTH-84 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n当前页面是 SYNTH-84 合成器电台：保留深紫渐变、粉色强调、等宽大写 DRIVE INTO / THE SUNSET 与原功能。主视觉由原创 SVG 条纹落日、山线、透视公路与 SIDE A 磁带构成，替换无业务含义的柱形图。播放器使用深色仪器面板与凹入刻度窗，FM 84.0、本地三曲、音量和播放逻辑不变；均衡器暂停时低亮，只有实际播放才按 .8s 动画，reduced-motion 停止。\n\n复用当前 preview.tokens：背景 linear-gradient(180deg,#140A33 0%,#3D1170 62%,#7A1F63 100%)；前景 #FFE8F6；强调 #FF71CE / #2A0A2E；卡面 rgba(255,113,206,.12)；边框 rgba(255,113,206,.45)；圆角 6px；字体 'SF Mono', Menlo, monospace；卡影 none。\n\ndark 与 variants 复用已有工作区 token；主视觉与页面共用 StyleSignatureArt 和 style-signatures.css，保留各自纸张、几何或电台材质。窄屏按内容重排。\n\n播放电台由用户手势启动 WebAudio 合成单音；可播放/暂停、选择三曲、调节音量。电台、巡演、磁带、REC 有对应内容，明确本地合成并非真实广播或录音上传。\n\n静态封面、详情演示与 /style-scenes/retro-futurism/（英文 /en/style-scenes/retro-futurism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。", "en": "Build a complete SYNTH-84 page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep SYNTH-84’s deep purple gradient, pink accent, uppercase monospace DRIVE INTO / THE SUNSET and existing functions. Replace the unrelated bar chart with an original SVG of a striped sunset, mountain silhouette, perspective road and SIDE A cassette. Give the player a dark instrument face and inset scale window. Preserve FM 84.0, three local tracks, volume and playback; dim the equalizer while paused and run its .8s animation only during actual playback, stopping for reduced motion.\n\nReuse current preview.tokens: background linear-gradient(180deg,#140A33 0%,#3D1170 62%,#7A1F63 100%); foreground #FFE8F6; accent #FF71CE / #2A0A2E; card rgba(255,113,206,.12); border rgba(255,113,206,.45); radius 6px; font 'SF Mono', Menlo, monospace; card shadow none.\n\nReuse existing workspace tokens for dark and variants. Share StyleSignatureArt and style-signatures.css between cover and page, preserving the paper, geometric or radio materials. Reflow content on narrow screens.\n\nPlay the radio starts a WebAudio synthesized tone after a user gesture. Play/pause, choose among three tracks and adjust volume. Radio, Tour, Tapes and REC reveal content; disclose local synthesis, not live broadcasting or recording uploads.\n\nShare one renderer between static covers, the detail experience and /style-scenes/retro-futurism/ (English /en/style-scenes/retro-futurism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion." }, "agent": { "zh": "用当前风格完成 SYNTH-84 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n当前页面是 SYNTH-84 合成器电台：保留深紫渐变、粉色强调、等宽大写 DRIVE INTO / THE SUNSET 与原功能。主视觉由原创 SVG 条纹落日、山线、透视公路与 SIDE A 磁带构成，替换无业务含义的柱形图。播放器使用深色仪器面板与凹入刻度窗，FM 84.0、本地三曲、音量和播放逻辑不变；均衡器暂停时低亮，只有实际播放才按 .8s 动画，reduced-motion 停止。\n\n复用当前 preview.tokens：背景 linear-gradient(180deg,#140A33 0%,#3D1170 62%,#7A1F63 100%)；前景 #FFE8F6；强调 #FF71CE / #2A0A2E；卡面 rgba(255,113,206,.12)；边框 rgba(255,113,206,.45)；圆角 6px；字体 'SF Mono', Menlo, monospace；卡影 none。\n\ndark 与 variants 复用已有工作区 token；主视觉与页面共用 StyleSignatureArt 和 style-signatures.css，保留各自纸张、几何或电台材质。窄屏按内容重排。\n\n完整页面操作：\n播放电台由用户手势启动 WebAudio 合成单音；可播放/暂停、选择三曲、调节音量。电台、巡演、磁带、REC 有对应内容，明确本地合成并非真实广播或录音上传。\n\n静态封面、详情演示与 /style-scenes/retro-futurism/（英文 /en/style-scenes/retro-futurism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。", "en": "Build a complete SYNTH-84 page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep SYNTH-84’s deep purple gradient, pink accent, uppercase monospace DRIVE INTO / THE SUNSET and existing functions. Replace the unrelated bar chart with an original SVG of a striped sunset, mountain silhouette, perspective road and SIDE A cassette. Give the player a dark instrument face and inset scale window. Preserve FM 84.0, three local tracks, volume and playback; dim the equalizer while paused and run its .8s animation only during actual playback, stopping for reduced motion.\n\nReuse current preview.tokens: background linear-gradient(180deg,#140A33 0%,#3D1170 62%,#7A1F63 100%); foreground #FFE8F6; accent #FF71CE / #2A0A2E; card rgba(255,113,206,.12); border rgba(255,113,206,.45); radius 6px; font 'SF Mono', Menlo, monospace; card shadow none.\n\nReuse existing workspace tokens for dark and variants. Share StyleSignatureArt and style-signatures.css between cover and page, preserving the paper, geometric or radio materials. Reflow content on narrow screens.\n\nFull-page operations:\nPlay the radio starts a WebAudio synthesized tone after a user gesture. Play/pause, choose among three tracks and adjust volume. Radio, Tour, Tapes and REC reveal content; disclose local synthesis, not live broadcasting or recording uploads.\n\nShare one renderer between static covers, the detail experience and /style-scenes/retro-futurism/ (English /en/style-scenes/retro-futurism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results." } }, "style_spec": { "typography": { "zh": "等宽铬金标题，全大写", "en": "Mono chrome caps display" }, "color": { "zh": "深紫渐变 #140A33→#7A1F63 × 粉 #FF71CE", "en": "Deep purple gradient to #7A1F63 with pink #FF71CE" }, "border": { "zh": "1px 霓虹粉描边", "en": "1px neon pink outlines" }, "shadow": { "zh": "霓虹光晕", "en": "Neon glow" }, "spacing": { "zh": "网格地平线式构图", "en": "Horizon-grid composition" }, "motion": { "zh": "200–300ms 的霓虹渐亮与扫描线位移，尊重 prefers-reduced-motion", "en": "200–300ms neon warm-up and scanline drift; honour prefers-reduced-motion" }, "states": { "zh": "hover 增强铬金与粉光晕；focus 用粉色可见亮环；active 压低亮度；disabled 去光降饱和；error 用洋红霓虹", "en": "Hover brightens the chrome and pink glow; focus shows a visible pink ring; active lowers brightness; disabled loses glow and saturation; error uses magenta neon" } }, "preview": { "order": 16, "keywords": { "en": "SYNTH 84", "zh": "霓虹渐变 · 复古日落" }, "url": "https://synthwave84.fm", "scene": "generic", "brand": "SYNTH-84", "nav": [ { "zh": "电台", "en": "Radio" }, { "zh": "巡演", "en": "Tour" }, { "zh": "磁带", "en": "Tapes" } ], "navExt": [ { "zh": "REC ●", "en": "REC ●" } ], "heroTitle": { "zh": "DRIVE INTO", "en": "DRIVE INTO" }, "heroTitle2": { "zh": "THE SUNSET", "en": "THE SUNSET" }, "heroSub": { "zh": "回到 1984 年想象的未来。", "en": "Return to the future imagined in 1984." }, "cta": { "zh": "播放电台", "en": "Play the radio" }, "heroCaption": { "zh": "合成器 · 网格地平线 · 铬金标题", "en": "Synths · Grid horizons · Chrome type" }, "features": [ { "t": { "zh": "日落渐变", "en": "Sunset gradient" }, "s": { "zh": "粉紫橙三段", "en": "Pink, purple and orange" } }, { "t": { "zh": "透视网格", "en": "Perspective grid" }, "s": { "zh": "无尽公路感", "en": "An endless road ahead" } }, { "t": { "zh": "铬金字", "en": "Chrome type" }, "s": { "zh": "金属反光标题", "en": "Reflective metallic headlines" } } ], "panel": "chart", "tokens": { "bg": "linear-gradient(180deg,#140A33 0%,#3D1170 62%,#7A1F63 100%)", "fg": "#FFE8F6", "sub": "#DEC6DF", "accent": "#FF71CE", "accentFg": "#2A0A2E", "card": "rgba(255,113,206,.12)", "cardBorder": "rgba(255,113,206,.45)", "radius": "6px", "font": "'SF Mono', Menlo, monospace", "upper": true, "heroSize": "22px" } } }