毛玻璃

# 毛玻璃 (Glassmorphism)

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

## 本质

半透明的磨砂表面漂浮在鲜艳的背景之上：背景模糊、细亮的边缘高光、柔和的阴影与大圆角共同营造出空间层次。它的美感来自"透过去看"，因此背景本身就是设计的一部分。

## Design Tokens

### 色彩

- `background` `#1B1033` — 页面背景
- `surface` `rgba(255, 255, 255, 0.14)` — 卡片、面板等浮起的表面
- `text` `#FFFFFF` — 主要文字
- `muted` `rgba(255, 255, 255, 0.72)` — 次要文字、说明、占位符
- `accent` `#C4B5FD` — 主要操作、链接、关键强调
- `on-accent` `#1B1033` — 放在强调色上的文字与图标
- `border` `rgba(255, 255, 255, 0.35)` — 分隔线、描边、输入框边框
- `highlight` `#5EEAD4` — 次级强调、徽标、选中态

### 字体排印

- 展示 / 标题字体: `Plus Jakarta Sans` (Google Fonts, 字重 600 / 700) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- 正文字体: `Plus Jakarta Sans` (Google Fonts, 字重 400 / 500) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- 字号阶梯（px）: 12 · 14 · 16 · 18 · 24 · 36 · 56

### 间距 & 形状

- 基础单位: 8px · 间距阶梯（px）: 8 · 12 · 16 · 24 · 32 · 48 · 64
- 圆角（sm / md / lg）: 12 / 20 / 28 px
- 边框: 1px solid
- 阴影（sm / md / lg）: `0 4px 16px rgba(15, 5, 40, 0.18)` / `0 8px 32px rgba(15, 5, 40, 0.28)` / `0 24px 64px rgba(15, 5, 40, 0.35)`

### 动效

- 时长（fast / base）: 160ms / 320ms
- 缓动曲线: `cubic-bezier(0.22, 1, 0.36, 1)`

### 标志性效果

- `--glass-blur`: `blur(20px) saturate(160%)`
- `--glass-edge`: `inset 0 1px 0 rgba(255, 255, 255, 0.45)`
- `--backdrop`: `radial-gradient(circle at 15% 20%, #FF6B9A 0, transparent 45%), radial-gradient(circle at 85% 25%, #6E56CF 0, transparent 50%), radial-gradient(circle at 50% 95%, #2DD4BF 0, transparent 50%), #1B1033`

## 要这样做

- 先设计一个色彩丰富的渐变背景，再在上面放置玻璃面板。
- 玻璃表面使用 rgba(255,255,255,0.1–0.2) 背景加 backdrop-filter: blur(16–24px)。
- 每个玻璃面板加 1px 半透明白色描边和顶部内高光。
- 使用 12–28px 的大圆角与柔和的深色阴影。
- 为不支持模糊或偏好降低透明度的环境提供不透明降级样式。

## 不要这样做

- 不要在纯色或白色背景上使用玻璃效果。
- 不要层层嵌套玻璃面板或让整个页面都变成玻璃。
- 不要在玻璃上使用细字重或低对比度的小字。
- 不要用于需要大量阅读的数据表格。

## 组件指南

- **按钮**: 主按钮为浅紫实色胶囊或大圆角矩形，深色文字；次按钮为玻璃材质（半透明白底 + 模糊 + 1px 亮边）。悬停时轻微上浮并增亮。
- **卡片**: 玻璃面板：rgba(255,255,255,0.14) 背景、20px 背景模糊、1px 半透明白边、顶部内高光、大圆角与柔和阴影。
- **表单**: 输入框为更浅一层的玻璃，圆角 12px，占位符为 72% 白。聚焦时边框变为浅紫并出现柔和光晕。
- **导航**: 顶部悬浮的玻璃导航条，与页面边缘保持距离，圆角胶囊形状；当前项用更亮的玻璃胶囊标出。
- **布局**: 少量大块玻璃面板漂浮在全屏渐变背景之上，层与层之间留出足够距离以显示背景。不要把整个页面铺满玻璃。
- **图像与图标**: 抽象渐变、柔和的 3D 形状或模糊光斑作为背景；图标使用线性或半透明填充风格。

## 可访问性

- 玻璃上的文字对比度会随背景变化，需要在最亮的背景区域下仍达到 4.5:1。
- 尊重 prefers-reduced-transparency：为偏好降低透明度的用户提供不透明的表面。
- 为不支持 backdrop-filter 的浏览器提供更不透明的降级背景色。

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