Y2K 风格Y2K Aesthetic

核心特征

• 银色金属渐变，配糖果粉与天蓝
• 气泡般的大圆角与胶囊形按钮
• 按钮用多层线性渐变做出镀铬高光
• 圆形发光图标，带轻微内阴影
• 星形、闪光等小装饰点缀标题

色板与字体

英文

Orbitron（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

原版常见 Eurostile、Bank Gothic 这类宽体科幻字；真实项目可用 Michroma、Audiowide 等宽体展示字做标题，正文仍用无衬线。

起源与代表作

年代：1997–2004 年前后的千禧年流行文化，2020 年代回潮

Y2K 取自 Year 2000，指 1990 年代末到 2000 年代初对「新千年」的乐观想象。1998 年苹果发布半透明糖果色外壳的 iMac G3，2000 年 Mac OS X 的 Aqua 界面带来水滴般的气泡高光按钮，同一时期的网页与手机、MP3 播放器也盛行镀铬与荧光色。2020 年代它随时尚与音乐封面的复古潮回归，成为界面设计里辨识度很高的怀旧风格。

AI 设计提示词 · Prompt

Y2K（Y2K Aesthetic）风格界面：页面底色银白 #F5F7FA，叠加天蓝 #7FD3FF 与糖果粉 #FF8AD8 的柔和径向光斑，整体通透明亮。卡片使用从 #FFFFFF 到 #DFE5EE 的纵向渐变，1px 白色描边，圆角 24px，内高光 inset 0 2px 0 #FFFFFF，外投影 0 8px 20px rgba(60,80,120,0.18)。主按钮为胶囊形，圆角 999px，用四段线性渐变（#FFB3E6 → #FF8AD8 → #FF6FCF → #FFA6E3）模拟镀铬，带白色内高光；次按钮用银色渐变 #FFFFFF → #C0C7D1。标题用 Orbitron 800，字号 32px，字距 0.02em，下方加 0 2px 0 #FFFFFF 的浮雕阴影，标签前加星形符号 ✦。图标放在 36px 的蓝色球形高光圆里。文字用深海蓝 #1B2340，次要文字 #444D6B，正文对比度不低于 4.5:1，装饰性高光不得盖住文字。

A Y2K Aesthetic interface: a silver-white page background #F5F7FA with soft radial glows of sky blue #7FD3FF and candy pink #FF8AD8, bright and translucent. Cards use a vertical gradient from #FFFFFF to #DFE5EE, a 1px white border, 24px corner radius, an inner highlight inset 0 2px 0 #FFFFFF and an outer shadow 0 8px 20px rgba(60,80,120,0.18). The primary button is a pill with 999px radius, a four-stop linear gradient (#FFB3E6 → #FF8AD8 → #FF6FCF → #FFA6E3) that imitates chrome, with a white inner highlight; the secondary button uses a silver gradient #FFFFFF → #C0C7D1. Headings use Orbitron 800 at 32px with 0.02em letter-spacing and an embossed 0 2px 0 #FFFFFF shadow; kickers are prefixed with a ✦ star. Icons sit in 36px glossy blue spheres. Text is deep navy #1B2340, secondary text #444D6B; keep body contrast at least 4.5:1 and never let decorative highlights cover text.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #f5f7fa;
  --ds-silver: #c0c7d1;
  --ds-text: #1b2340;
  --ds-accent: #ff8ad8;
  --ds-sky: #7fd3ff;
  --ds-radius-card: 24px;
  --ds-radius-pill: 999px;
  --ds-chrome: linear-gradient(180deg, #ffb3e6 0%, #ff8ad8 45%, #ff6fcf 55%, #ffa6e3 100%);
  --ds-shadow: 0 8px 20px rgba(60, 80, 120, 0.18);
}

适合与不适合

和相近风格的区别

• 孟菲斯：Y2K 是银色金属、气泡高光与未来感，画面光滑通透；孟菲斯是 1980 年代的平涂撞色加波点斜纹，边缘粗黑、质地扁平。
• 蒸汽波：Y2K 明亮乐观，银白与糖果色为主；蒸汽波偏夜晚与失真，粉紫青渐变加老式系统窗口，带着对消费主义的反讽。

常见踩坑

• 多层渐变的镀铬按钮在小尺寸下容易糊成一团，按钮高度建议不低于 36px，并保留清晰的文字对比度
• 银白底配粉色或天蓝文字对比度不足，粉色、天蓝只做装饰和按钮底色，正文用深海蓝
• 大面积径向光斑与阴影叠加会增加绘制开销，低端设备上要控制光斑数量并避免给长列表逐项加复杂阴影
• 宽体科幻字体只适合短标题，长句中使用会拉长行宽且难以阅读

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题