液态玻璃 Liquid Glass

---
version: alpha
name: 液态玻璃 Liquid Glass
description: 折射与弹簧高光，像刚按下去的控制中心。
colors:
  primary: "#007AFF"
  secondary: "#8E8E93"
  tertiary: "#64D2FF"
  background: "#D6E6FF"
  surface: rgba(255,255,255,0.42)
  onPrimary: "#F4F4F5"
  onSecondary: "#F4F4F5"
  onTertiary: "#18181B"
  onBackground: "#0B1220"
  onSurface: "#0B1220"
  outline: rgba(255,255,255,0.6)
  muted: "#3C3C43"
  success: "#34C759"
  warning: "#FF9F0A"
  error: "#FF3B30"
typography:
  h1:
    fontFamily: -apple-system
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.03em
  h2:
    fontFamily: -apple-system
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  h3:
    fontFamily: -apple-system
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  body:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0em
  label:
    fontFamily: -apple-system
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  caption:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  mono:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
rounded:
  sm: 14px
  md: 20px
  lg: 28px
  xl: 36px
  full: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  navbar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.onBackground}"
  hero:
    backgroundColor: "{colors.background}"
    textColor: "{colors.onBackground}"
  icon-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
  slider:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
  toggle:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 51px
  notice:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.onSurface}"
    rounded: "{rounded.lg}"
  footer:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted}"
---

# 液态玻璃 Liquid Glass

## Overview

折射与弹簧高光，像刚按下去的控制中心。 整体气质是 日常应用适中、错落不对称、动效 电影式编排。品牌语气：liquid / refractive / system。密度 4/10，变化 6/10，动效 9/10。 材质：面板用更强 blur 和边缘高光；背景折射层缓慢漂移、可随指针平移。控件是 CSS 玻璃，不是每颗按钮一套 WebGL。禁止扁色半透明矩形。

How to use: 把本文件放到仓库根目录。在 Cursor / Claude Code / Codex 提示词中写：请阅读 DESIGN.md 并严格遵守其中的 tokens 与 Do/Don't。

## Colors

Semantic roles for the light theme. Keep a single accent; do not introduce a second brand hue.

- **primary** (`#007AFF`)
- **secondary** (`#8E8E93`)
- **tertiary** (`#64D2FF`)
- **background** (`#D6E6FF`)
- **surface** (`rgba(255,255,255,0.42)`)
- **outline** (`rgba(255,255,255,0.6)`)
- **muted** (`#3C3C43`)
- **success** (`#34C759`)
- **warning** (`#FF9F0A`)
- **error** (`#FF3B30`)
- **onSurface** (`#0B1220`)
- **onBackground** (`#0B1220`)
- **onPrimary** (`#F4F4F5`)
- **onSecondary** (`#F4F4F5`)
- **onTertiary** (`#18181B`)

## Typography

Hierarchy comes from weight and size, not from shouting. Body line length stays near 65 characters.

- **h1**: -apple-system 600 / 32px / 1.12 / -0.03em
- **h2**: -apple-system 600 / 24px / 1.2 / -0.02em
- **h3**: -apple-system 600 / 20px / 1.3 / -0.01em
- **body**: -apple-system 400 / 16px / 1.55 / 0em
- **label**: -apple-system 500 / 13px / 1.3 / 0.02em
- **caption**: -apple-system 400 / 12px / 1.4 / 0em
- **mono**: "JetBrains Mono" 500 / 13px / 1.45 / 0em

## Layout

Spacing scale: xs=4px, sm=8px, md=16px, lg=24px, xl=32px, 2xl=48px, 3xl=64px.

iOS：触控目标 ≥ 44pt，尊重 Safe Area 与 Dynamic Type，图标用 SF Symbols，导航使用 Large Title / 分组列表。

Web：移动优先，<768px 单列，正文 ≥ 16px，标题用 clamp()，容器 max-width 约 1120–1400px，全高区块用 min-h-[100dvh]。

Every element occupies its own spatial zone. No overlapping hero text. Collapse multi-column layouts below 768px.

## Elevation & Depth

- sm: `0 8px 24px rgba(10,20,40,0.12)`
- md: `0 16px 40px rgba(10,20,40,0.16)`
- lg: `0 28px 60px rgba(10,20,40,0.2)`
- surface: `liquid-glass`
- blur: `28px`
- saturate: `1.85`
- recipe: 面板用更强 blur 和边缘高光；背景折射层缓慢漂移、可随指针平移。控件是 CSS 玻璃，不是每颗按钮一套 WebGL。禁止扁色半透明矩形。

阴影带背景色相。高密度布局可用细分隔线代替卡片。
动效已接线：按钮按下、开关、滑杆和画布明暗使用 420ms / cubic-bezier(0.22, 1, 0.36, 1)，弹簧 stiffness 180 / damping 18。液态/黏土按压用弹性；野兽按下吃掉硬偏移；新拟态按下变内凹。
氛围性格是漂移加软弹：折射场缓慢移动，按下用弹簧。缩略图只保留 CSS 漂移与扫光；WebGL 折射层只在详情和编辑器加载。 循环氛围在 prefers-reduced-motion 时停止；按下仍可以一次到位。
禁止用扁色块冒充玻璃：必须 backdrop-filter，且玻璃后面要有可透的图像或网格。

## Shapes

Radius scale: sm=14px, md=20px, lg=28px, xl=36px, full=999px.

## Components

- **导航栏** (`web.navbar` / default / md): 桌面横导航含 logo、带图标的链接和一个主 CTA。
- **Hero** (`web.hero` / left / lg): Hero 使用 left 布局，最多一个主 CTA，禁止「Scroll to explore」。
- **快捷四宫** (`icon-row` / grid / md): 控制中心式四宫格，图标来自目录。
- **滑杆** (`slider` / default / md): 音量/亮度滑杆，轨道和拇指用 primary。
- **滑杆** (`slider` / default / md): 音量/亮度滑杆，轨道和拇指用 primary。
- **开关** (`toggle` / on / md): iOS 风格胶囊开关，开启态用 primary。
- **通知行** (`notice` / default / md): 通知行：图标 + 标题 + 时间。
- **页脚** (`web.footer` / default / md): 页脚克制，链接分组清晰。

## Do's and Don'ts

### Do
- 组件里用语义色 token，不要写死 hex。
- 只留一个强调色；层级靠字重和留白。
- 写清默认、悬停、焦点、按下、禁用和加载状态。
- 正文和可交互标签达到 WCAG 2.2 AA 对比度。
- 触控区域在 iOS 至少 44×44pt，在网页至少 44px。
- 毛玻璃必须盖在会动或有照片的背景上，折射才看得见。
- 按下用弹簧曲线；WebGL 只留在背景层，不要挂到每个控件上。

### Don't
- 高级感的展示标题不要用 Inter。
- 大面积不要用纯黑 #000000。
- 不要加霓虹外发光，也不要自定义鼠标光标。
- 不要把三张等宽功能卡当成默认布局。
- 不要藏掉焦点环，也不要低于 AA 对比度。
- 不要用一块没有模糊的半透明矩形假装液态玻璃。
- 不要把玻璃后面的背景冻成一块纯品牌色。
- 不要给每个按钮都上 MeshTransmissionMaterial。