跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

Y2K 千禧美学

Y2K Aesthetic

别名:千禧风Y2K风格千禧年美学镀铬金属质感iMac糖果色那种闪亮科技感千禧辣妹风Cyber Y2K

这是什么

复刻千禧年前后数码乐观主义的视觉语言:镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感,甜腻、闪亮、毫不克制。

开发规格

字体

圆体字 + 金属渐变标题

色彩

银紫粉渐变 × 电紫 #7B61FF

边框

1px 淡紫描边,大圆角

阴影

柔和紫色光晕投影

间距

气泡式 20px 圆角,松弛排布

动效

150–250ms 带轻微回弹的过渡与光晕变化,尊重 prefers-reduced-motion

状态反馈

hover 增强金属渐变与光晕;focus 用紫色可见亮环;active 缩小并加深;disabled 降透明去光;error 用红粉渐变

风格演示

同一张页面,直接操作

立即进入后输入昵称、选择装扮生成对应会员卡,可修改后重做;音乐、装扮、星球、会员卡入口均有可查看内容,仅在本地生成身份。

整页预览 · 直接交互

独立打开 ↗

使用时关注什么

  • 01逐一操作 ☆ CyberDream ☆ 原导航和主 CTA,检查对应内容与返回路径,不只是点击提示。
  • 02完成上述 ☆ CyberDream ☆ 操作后修改输入或撤销,检查结果与状态同步。
  • 03用键盘和 390px / 320px 检查重排、焦点、校验;区分工具栏重载和内部清空,核对刷新后状态复位。

✓ 适用场景

  • 音乐 潮流 时尚品牌,瞄准怀旧千禧的年轻受众
  • 派对 社交 娱乐类产品,需要甜腻高饱和情绪
  • 复古主题营销活动与限定包装

✕ 不适用场景

  • 金融 医疗 生产力工具,需要可信与克制
  • 长内容阅读场景,高饱和与闪光持续消耗注意力
  • 无障碍要求高的场景,银底浅字对比度普遍不足

常见形式

糖果塑料

Candy Plastic

iMac G3 半透明糖果壳,蓝绿橙粉

镀铬金属

Liquid Chrome

液态金属字与镜面渐变,Cyber Y2K

珠光幻彩

Iridescent

珍珠光泽幻彩渐变 CD 盘面

实现要点

background: linear-gradient(#e0e0e0, #8f9096, #f5f5f5)background-clip: texttext-shadowborder-radius: 999pxbox-shadow: inset

镀铬感的公式是窄幅多段灰阶渐变:#f8f8f8 → #9a9ba2 → #ffffff → #7c7d84, 配 1px 白高光内阴影与深色投影;文字镀铬用 background-clip: text 加同款 渐变。糖果塑料用高饱和色 + 顶部 40% 白色内阴影模拟透光。星形闪光与 泡泡字是点睛元素,克制在 2~3 处。深色模式改用紫黑底让银色更突出。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

用当前风格完成 ☆ CyberDream ☆ 同品牌完整页面,从原首屏延续到内容、具体操作结果和返回路径,而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源,不替换成通用营销模板。

保留 CyberDream 银紫粉浅渐变、圆体字、紫色 CTA、右侧数据图表与三张浅色功能卡,不把原文字替换成强制 background-clip 镀铬字或新增闪星组件。会员卡沿用浅粉蓝渐变、白色 2px 边、28px 圆角与 -2deg 轻倾斜;昵称和装扮属于卡片内容。

复用当前 preview.tokens:背景 linear-gradient(160deg,#DDE7F5 0%,#EFD3E8 55%,#C9C8F4 100%);前景 #3A3A55;强调 #7B61FF / #fff;卡面 rgba(255,255,255,.78);边框 #B8B8E0;圆角 20px;字体 ui-rounded, 'Arial Rounded MT Bold', 'PingFang SC', sans-serif;卡影 0 8px 18px rgba(123,97,255,.18)。

dark 与 variants 复用 generic-style-pages.css 已有工作区选择器,不据通用历史变体重画首屏;保留 renderer 内各视觉面板的局部高光、渐变和投影。

完整页面操作:
立即进入后输入昵称、选择装扮生成对应会员卡,可修改后重做;音乐、装扮、星球、会员卡入口均有可查看内容,仅在本地生成身份。

静态封面、详情演示与 /style-scenes/y2k/(英文 /en/style-scenes/y2k/)共用 renderer;静态封面不嵌套真实按钮,详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流,不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存;刷新、工具栏重载/重置与模式切换均恢复初始状态,不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作,不暗示跨页或持久保存。

提供返回、取消或清空/重置路径,说明仅当前页内存的状态边界;不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排,保留可读字号和触控目标,不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点;弹层支持关闭和焦点返回,表单校验与结果可被辅助技术读到;尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排;报告实际运行的检查与待验项,不将实现要求写成已通过结论。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

赛博朋克Cyberpunk

"High tech, low life" 的视觉语言:近黑的深底上,霓虹青与品红发光描边切割 界面,等宽字体与终端符号贯穿,扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的,界面像一台被劫持的显示器。

风格相似概念
极光渐变Aurora Gradient

用大面积流动渐变光斑营造氛围的视觉语言:青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合,前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡,界面因此获得呼吸感与情绪温度。

风格相似概念
玻璃拟态Glassmorphism

用半透明磨砂玻璃质感表示悬浮层级的视觉语言:backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边,让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景,否则质感无从谈起。

风格相似概念
复古未来主义Retro-Futurism

"过去的人想象中的未来"的视觉语言:奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光,乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。

风格相似概念
卡片Card

用圆角边框或底色围出一块自包含内容的矩形容器,一块卡片聚合一组相关信息: 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。

组件影响组件

参考来源

Markdown 版(给 Agent) · JSON