Y2K 千禧风

# Y2K 千禧风 (Y2K Aesthetic)

你正在构建一个前端界面。请在每一个页面和组件中一致地应用 **Y2K 千禧风** 视觉风格。下面的 design tokens 和规则是硬性约束，而不是参考建议。

## 本质

诞生于 1990 年代末到 2000 年代初的数字美学：半透明塑料、液态金属镀铬、果冻按钮、星光与光晕，配上带科幻感的字体。它承载着那个年代对互联网和新千年的兴奋与乐观。

## Design Tokens

### 色彩

- `background` `#D8E2F2` — 页面背景
- `surface` `#F4F7FC` — 卡片、面板等浮起的表面
- `text` `#0B1A3A` — 主要文字
- `muted` `#44506B` — 次要文字、说明、占位符
- `accent` `#1E5BFF` — 主要操作、链接、关键强调
- `on-accent` `#FFFFFF` — 放在强调色上的文字与图标
- `border` `#8A98B8` — 分隔线、描边、输入框边框
- `highlight` `#FF3FD1` — 次级强调、徽标、选中态

### 字体排印

- 展示 / 标题字体: `Orbitron` (Google Fonts, 字重 700 / 900) → fallback `"Eurostile", "Arial Black", sans-serif`
- 正文字体: `Verdana` (系统字体, 字重 400 / 700) → fallback `Tahoma, Geneva, sans-serif`
- 字号阶梯（px）: 11 · 13 · 15 · 18 · 24 · 34 · 52

### 间距 & 形状

- 基础单位: 4px · 间距阶梯（px）: 4 · 8 · 12 · 16 · 24 · 32 · 48
- 圆角（sm / md / lg）: 6 / 14 / 24 px
- 边框: 1px solid
- 阴影（sm / md / lg）: `0 1px 2px rgba(11, 26, 58, 0.3)` / `0 4px 12px rgba(11, 26, 58, 0.25)` / `0 12px 30px rgba(11, 26, 58, 0.3)`

### 动效

- 时长（fast / base）: 120ms / 400ms
- 缓动曲线: `cubic-bezier(0.34, 1.56, 0.64, 1)`

### 标志性效果

- `--chrome`: `linear-gradient(180deg, #FFFFFF 0%, #C9D3E3 45%, #8C9AB3 50%, #DCE3EE 75%, #FFFFFF 100%)`
- `--sky`: `radial-gradient(ellipse at 15% 0%, #FFFFFF 0, transparent 45%), radial-gradient(circle at 90% 30%, rgba(255, 63, 209, 0.25) 0, transparent 35%), linear-gradient(180deg, #B9CEFF 0%, #E6ECFA 55%, #D8E2F2 100%)`
- `--gloss`: `linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0) 52%)`
- `--glow`: `0 0 14px rgba(30, 91, 255, 0.6)`
- `--pink-glow`: `0 0 16px rgba(255, 63, 209, 0.65)`
- `--cyber-lime`: `#C6FF3D`

## 要这样做

- 用多段线性渐变模拟镀铬金属，用于标题、边框和按钮外壳。
- 主按钮使用胶囊形果冻样式：渐变底色、上半部分高光、同色外发光。
- 使用电光蓝 #1E5BFF 与亮粉 #FF3FD1 作为主色和强调色，背景用天空般的浅蓝渐变。
- 标题使用宽体科幻字体，全部大写并加宽字距；正文使用 Verdana。
- 用星形闪光、球体等装饰元素表达"未来感"。

## 不要这样做

- 不要使用扁平的纯色按钮或细线图标。
- 不要使用低饱和的莫兰迪色或纯黑白配色。
- 不要在镀铬渐变上放置小号文字。
- 不要使用衬线字体或极简的留白布局。

## 组件指南

- **按钮**: 胶囊形果冻按钮：电光蓝或亮粉的渐变底色，上半部分叠加高光，外围有同色光晕；次按钮为镀铬外壳。
- **卡片**: 浅色半透明面板，镀铬描边与大圆角，标题栏像旧式软件窗口一样带渐变。
- **表单**: 圆角输入框带内阴影和金属边框，聚焦时发出蓝色光晕；复选框像小小的发光按钮。
- **导航**: 镀铬质感的胶囊导航条，当前项为发光的蓝色"果冻"。
- **布局**: 居中的大标题与漂浮的装饰元素（星星、球体），区块像一扇扇软件窗口。
- **图像与图标**: 3D 渲染的球体、液态金属、星光与像素图标；照片可以加上蓝色调和光晕。

## 可访问性

- 亮粉和电光蓝上只放大号粗体文字，并检查对比度；正文保持深色文字和浅色底。
- 闪烁和发光动画应遵守 prefers-reduced-motion，避免持续闪烁。

_由风格博物馆（Style Museum）生成。_