design token lab / token workshop
把视觉方向沉淀成 Design Tokens

选择一套风格，先检查真实组件样张，再复制可落地的 design-tokens.md。适合给 Agent 或项目主题直接使用。
风格样张
UI 部件
硬边方向
视觉方向
风格样张

组件样张
液态玻璃

Token 工坊
样张Tokens应用
导出
先验收样张，再导出 Tokens
先看到风格，再沉淀变量

同一组 token 必须同时撑住导航、Hero、按钮、输入框、卡片、代码块和浮层，才值得进入项目。
apply map
组件落点

Shell
backgroundforegroundmuted
控制页面底色、主体文字和弱信息，不在业务组件里重新定义。
Card
surfaceCardborderSubtleradiusCardshadowCard
作为默认容器层，适合列表项、面板和信息块。
Action
primaryprimaryForegroundradiusButtonring
只给主按钮、关键链接和可交互焦点使用。
Signal
accentaccentForegroundborderStrong
用于状态、Badge、强调信息和少量视觉锚点。
delivery
落地清单

先把 CSS Variables 放到主题入口，再接 Tailwind v4 mapping。
先替换 Page、Card、Button、Badge、Input 五类基础组件。
保留两级阴影、两级圆角和两级边框，避免每个组件造局部特例。
用真实页面做一次桌面和移动端检查，再把 tokens 写入项目文档。
Token 文档
design-tokens.md

Token 摘要

把组件处理成一层带厚度的透明材料：颜色来自背后的环境，边缘有压缩折射，中心保持清透，阴影像玻璃浮在界面上。
适用：系统壳、导航、工具浮层、AI 助手、个人主页、轻量仪表盘
Primary
#f8fbff
Accent
#8ab4ff
Radius
34px
Shadow
2 levels
文档预览Liquid Glass
# Design Tokens: Liquid Glass

## Intent

把组件处理成一层带厚度的透明材料：颜色来自背后的环境，边缘有压缩折射，中心保持清透，阴影像玻璃浮在界面上。

## Best Fit

系统壳、导航、工具浮层、AI 助手、个人主页、轻量仪表盘

## Preview Contract

这套 tokens 已在同一个 HTML 样张中验证过：导航、Hero、按钮、输入框、Badge、内容卡片、代码块、列表和浮层。


## Token Source

```json
{
  "color": {
    "background": {
      "$type": "color",
      "$value": "#11151c"
    },
    "foreground": {
      "$type": "color",
      "$value": "#fbfdff"
    },
    "muted": {
      "$type": "color",
      "$value": "rgba(251, 253, 255, 0.70)"
    },
    "surface": {
      "card": {
        "$type": "color",
        "$value": "rgba(255, 255, 255, 0.19)"
      },
      "elevated": {
        "$type": "color",
        "$value": "rgba(255, 255, 255, 0.31)"
      }
    },
    "primary": {
      "default": {
        "$type": "color",
        "$value": "#f8fbff"
      },
      "foreground": {
        "$type": "color",
        "$value": "#11151c"
      }
    },
    "accent": {
      "default": {
        "$type": "color",
        "$value": "#8ab4ff"
      },
      "foreground": {
        "$type": "color",
        "$value": "#061121"
      }
    },
    "border": {
      "subtle": {
        "$type": "color",
        "$value": "rgba(255, 255, 255, 0.24)"
      },
      "strong": {
        "$type": "color",
        "$value": "rgba(255, 255, 255, 0.58)"
      }
    },
    "ring": {
      "$type": "color",
      "$value": "rgba(138, 180, 255, 0.46)"
    }
  },
  "radius": {
    "card": {
      "$type": "dimension",
      "$value": "34px"
    },
    "button": {
      "$type": "dimension",
      "$value": "999px"
    }
  },
  "shadow": {
    "card": {
      "$type": "shadow",
      "$value": "inset 0 1px 0 rgba(255,255,255,.64), inset 0 -1px 0 rgba(255,255,255,.16), 0 18px 54px rgba(10,14,20,.22)"
    },
    "floating": {
      "$type": "shadow",
      "$value": "inset 0 1px 0 rgba(255,255,255,.78), inset 0 0 0 1px rgba(255,255,255,.16), 0 26px 88px rgba(10,14,20,.30), 0 2px 18px rgba(255,255,255,.12)"
    }
  },
  "effect": {
    "glassBlur": {
      "$type": "custom",
      "$value": "blur(38px) saturate(1.8) brightness(1.12)"
    }
  }
}
```

## Liquid Glass Extended Tokens

这套扩展 token 偏“系统级液态玻璃”，不是蓝色霓虹玻璃。核心是透明材料会吸收背后环境色，边缘比中心更亮、更厚，悬浮感来自柔和投影和内高光，而不是强发光。

## Video Distillation

从「Apple 新一代最強 UI 設計！Liquid Glass 全面解析」这类系统级 Liquid Glass 拆解里，真正要落地的是四件事：

- 材质不是装饰：玻璃层要承担导航、控制、浮层这类系统外壳角色，不能铺满所有内容卡片。
- 环境决定颜色：玻璃本身保持中性，颜色来自背后的内容、壁纸、插画或状态背景。
- 边缘表达厚度：用亮边、内阴影和轻微折射表现材料厚度，中心区域要保持可读。
- 动效表达液态：交互时用小幅形变、亮边流动和柔和位移，不用夸张弹跳或大面积发光。

```ts
export const liquidGlassTokens = {
  color: {
    base: {
      ink: "#11151c",
      graphite: "#1a2029",
      mist: "#edf3fb",
      frost: "#f8fbff",
      pearl: "#ffffff",
      shadow: "#0a0e14",
    },
    glass: {
      clear: "rgba(255, 255, 255, 0.19)",
      raised: "rgba(255, 255, 255, 0.31)",
      pressed: "rgba(255, 255, 255, 0.14)",
      veil: "rgba(255, 255, 255, 0.10)",
      milk: "rgba(255, 255, 255, 0.42)",
      chrome: "rgba(255, 255, 255, 0.72)",
    },
    refraction: {
      sky: "#8ab4ff",
      lilac: "#d9c7ff",
      rose: "#f6c8ff",
      mint: "#c8f5e6",
      amber: "#ffe3a3",
    },
    text: {
      primary: "#fbfdff",
      secondary: "rgba(251, 253, 255, 0.70)",
      tertiary: "rgba(251, 253, 255, 0.48)",
      inverse: "#11151c",
    },
    border: {
      hairline: "rgba(255, 255, 255, 0.24)",
      edge: "rgba(255, 255, 255, 0.58)",
      bright: "rgba(255, 255, 255, 0.78)",
      inner: "rgba(255, 255, 255, 0.18)",
      shadowEdge: "rgba(10, 14, 20, 0.18)",
    },
    state: {
      success: "#86efac",
      warning: "#fde68a",
      danger: "#fda4af",
      info: "#93c5fd",
      selected: "rgba(255, 255, 255, 0.42)",
      disabled: "rgba(251, 253, 255, 0.32)",
    },
  },

  semantic: {
    background: {
      app: "#11151c",
      environment: "linear-gradient(145deg, #11151c 0%, #1a2029 48%, #0f131a 100%)",
      wallpaperGlow: "radial-gradient(circle at 18% 14%, rgba(138,180,255,.30), transparent 26rem), radial-gradient(circle at 82% 20%, rgba(246,200,255,.22), transparent 24rem)",
      scrim: "rgba(17, 21, 28, 0.42)",
    },
    surface: {
      base: "rgba(255, 255, 255, 0.14)",
      raised: "rgba(255, 255, 255, 0.22)",
      floating: "rgba(255, 255, 255, 0.31)",
      selected: "rgba(255, 255, 255, 0.42)",
      solidFallback: "rgba(28, 33, 42, 0.92)",
    },
    content: {
      primary: "#fbfdff",
      secondary: "rgba(251, 253, 255, 0.70)",
      tertiary: "rgba(251, 253, 255, 0.48)",
      disabled: "rgba(251, 253, 255, 0.32)",
      onLightGlass: "#11151c",
    },
    outline: {
      separator: "rgba(255, 255, 255, 0.16)",
      control: "rgba(255, 255, 255, 0.42)",
      focus: "rgba(138, 180, 255, 0.46)",
      rim: "rgba(255, 255, 255, 0.78)",
    },
  },

  gradient: {
    page: "radial-gradient(circle at 18% 14%, rgba(138,180,255,.30), transparent 26rem), radial-gradient(circle at 82% 20%, rgba(246,200,255,.22), transparent 24rem), radial-gradient(circle at 52% 84%, rgba(200,245,230,.16), transparent 30rem), linear-gradient(145deg, #11151c 0%, #1a2029 48%, #0f131a 100%)",
    environmentBand: "linear-gradient(115deg, rgba(138,180,255,.65), rgba(246,200,255,.48) 42%, rgba(255,227,163,.34) 70%, rgba(200,245,230,.46))",
    glassSurface: "linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.18) 44%, rgba(255,255,255,.10) 100%)",
    glassEdge: "linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.26) 40%, rgba(255,255,255,.12) 100%)",
    refractionRim: "conic-gradient(from 210deg, rgba(255,255,255,.70), rgba(138,180,255,.36), rgba(246,200,255,.30), rgba(255,255,255,.62), rgba(200,245,230,.28), rgba(255,255,255,.70))",
    specularSweep: "linear-gradient(100deg, transparent 0%, rgba(255,255,255,.72) 43%, transparent 66%)",
    innerCaustic: "radial-gradient(circle at 22% 16%, rgba(255,255,255,.56), transparent 17%), radial-gradient(circle at 82% 76%, rgba(255,255,255,.18), transparent 28%)",
  },

  material: {
    thinGlass: {
      background: "rgba(255, 255, 255, 0.14)",
      border: "1px solid rgba(255, 255, 255, 0.24)",
      backdropFilter: "blur(24px) saturate(1.45) brightness(1.06)",
    },
    liquidGlass: {
      background: "linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.18) 44%, rgba(255,255,255,.10) 100%)",
      border: "1px solid rgba(255, 255, 255, 0.58)",
      backdropFilter: "blur(38px) saturate(1.8) brightness(1.12)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,.64), inset 0 -1px 0 rgba(255,255,255,.16), 0 18px 54px rgba(10,14,20,.22)",
    },
    floatingGlass: {
      background: "rgba(255, 255, 255, 0.31)",
      border: "1px solid rgba(255, 255, 255, 0.78)",
      backdropFilter: "blur(46px) saturate(1.95) brightness(1.14)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,.78), inset 0 0 0 1px rgba(255,255,255,.16), 0 26px 88px rgba(10,14,20,.30), 0 2px 18px rgba(255,255,255,.12)",
    },
    controlGlass: {
      background: "rgba(255, 255, 255, 0.22)",
      border: "1px solid rgba(255, 255, 255, 0.42)",
      backdropFilter: "blur(30px) saturate(1.7) brightness(1.1)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,.56), 0 10px 28px rgba(10,14,20,.18)",
    },
  },

  radius: {
    icon: "14px",
    chip: "999px",
    control: "22px",
    card: "28px",
    panel: "34px",
    sheet: "46px",
  },

  space: {
    0: "0px",
    1: "4px",
    2: "8px",
    3: "12px",
    4: "16px",
    5: "20px",
    6: "24px",
    8: "32px",
    10: "40px",
    12: "48px",
    16: "64px",
  },

  size: {
    iconButton: {
      sm: "32px",
      md: "40px",
      lg: "48px",
    },
    controlHeight: {
      sm: "34px",
      md: "42px",
      lg: "52px",
    },
    navHeight: {
      compact: "56px",
      regular: "72px",
    },
    glassMinTarget: "44px",
  },

  typography: {
    family: {
      ui: "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', sans-serif",
      display: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', sans-serif",
      mono: "'SF Mono', ui-monospace, Menlo, monospace",
    },
    size: {
      caption: "12px",
      body: "15px",
      callout: "16px",
      title: "22px",
      largeTitle: "34px",
    },
    weight: {
      regular: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
    },
    lineHeight: {
      tight: 1.12,
      body: 1.48,
      relaxed: 1.68,
    },
    tracking: {
      normal: "0",
      label: "0.01em",
    },
  },

  shadow: {
    hairline: "inset 0 1px 0 rgba(255,255,255,.64)",
    card: "inset 0 1px 0 rgba(255,255,255,.64), inset 0 -1px 0 rgba(255,255,255,.16), 0 18px 54px rgba(10,14,20,.22)",
    floating: "inset 0 1px 0 rgba(255,255,255,.78), inset 0 0 0 1px rgba(255,255,255,.16), 0 26px 88px rgba(10,14,20,.30), 0 2px 18px rgba(255,255,255,.12)",
    focus: "0 0 0 4px rgba(138,180,255,.18), 0 0 0 1px rgba(255,255,255,.54)",
  },

  motion: {
    duration: {
      tap: "120ms",
      control: "220ms",
      surface: "520ms",
      ambient: "5600ms",
    },
    easing: {
      standard: "cubic-bezier(0.2, 0, 0, 1)",
      liquid: "cubic-bezier(0.65, 0, 0.35, 1)",
      float: "cubic-bezier(0.16, 1, 0.3, 1)",
    },
  },

  interaction: {
    hover: {
      transform: "translateY(-1px)",
      background: "rgba(255, 255, 255, 0.34)",
      borderColor: "rgba(255, 255, 255, 0.78)",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,.82), 0 18px 48px rgba(10,14,20,.24)",
    },
    active: {
      transform: "translateY(0) scale(0.985)",
      background: "rgba(255, 255, 255, 0.18)",
      boxShadow: "inset 0 1px 8px rgba(10,14,20,.16)",
    },
    selected: {
      background: "rgba(255, 255, 255, 0.42)",
      borderColor: "rgba(255, 255, 255, 0.82)",
    },
  },

  component: {
    navBar: {
      height: "72px",
      material: "floatingGlass",
      radius: "999px",
      padding: "8px",
      itemGap: "6px",
      activeItem: "rgba(255, 255, 255, 0.42)",
    },
    tabBar: {
      height: "56px",
      material: "floatingGlass",
      radius: "999px",
      indicator: "rgba(255, 255, 255, 0.46)",
      iconColor: "rgba(251, 253, 255, 0.70)",
      activeIconColor: "#fbfdff",
    },
    sheet: {
      material: "floatingGlass",
      radius: "46px",
      maxWidth: "720px",
      padding: "24px",
      backdrop: "rgba(17, 21, 28, 0.34)",
    },
    button: {
      primary: {
        height: "44px",
        radius: "999px",
        background: "rgba(255, 255, 255, 0.72)",
        color: "#11151c",
        border: "1px solid rgba(255, 255, 255, 0.78)",
      },
      secondary: {
        height: "44px",
        radius: "999px",
        background: "rgba(255, 255, 255, 0.18)",
        color: "#fbfdff",
        border: "1px solid rgba(255, 255, 255, 0.42)",
      },
    },
    input: {
      height: "44px",
      material: "controlGlass",
      radius: "22px",
      placeholder: "rgba(251, 253, 255, 0.42)",
      focusRing: "0 0 0 4px rgba(138,180,255,.18), 0 0 0 1px rgba(255,255,255,.54)",
    },
    chip: {
      height: "32px",
      radius: "999px",
      background: "rgba(255, 255, 255, 0.16)",
      selectedBackground: "rgba(255, 255, 255, 0.42)",
    },
  },

  layer: {
    base: 0,
    glass: 10,
    nav: 100,
    sheetBackdrop: 900,
    sheet: 1000,
    toast: 1100,
  },

  accessibility: {
    minimumTextOnGlass: "rgba(251, 253, 255, 0.70)",
    stableTextScrim: "linear-gradient(180deg, rgba(17,21,28,.24), rgba(17,21,28,.42))",
    reduceTransparencyFallback: "rgba(28, 33, 42, 0.92)",
    reduceMotionDuration: "120ms",
  },
} as const
```

## Liquid Glass CSS Variables

```css
:root {
  --lg-ink: #11151c;
  --lg-graphite: #1a2029;
  --lg-mist: #edf3fb;
  --lg-frost: #f8fbff;
  --lg-pearl: #ffffff;

  --lg-glass-clear: rgba(255, 255, 255, 0.19);
  --lg-glass-raised: rgba(255, 255, 255, 0.31);
  --lg-glass-pressed: rgba(255, 255, 255, 0.14);
  --lg-glass-veil: rgba(255, 255, 255, 0.10);

  --lg-surface-base: rgba(255, 255, 255, 0.14);
  --lg-surface-raised: rgba(255, 255, 255, 0.22);
  --lg-surface-floating: rgba(255, 255, 255, 0.31);
  --lg-surface-selected: rgba(255, 255, 255, 0.42);
  --lg-surface-solid-fallback: rgba(28, 33, 42, 0.92);

  --lg-content-primary: #fbfdff;
  --lg-content-secondary: rgba(251, 253, 255, 0.70);
  --lg-content-tertiary: rgba(251, 253, 255, 0.48);
  --lg-content-disabled: rgba(251, 253, 255, 0.32);
  --lg-content-on-light-glass: #11151c;

  --lg-sky: #8ab4ff;
  --lg-lilac: #d9c7ff;
  --lg-rose: #f6c8ff;
  --lg-mint: #c8f5e6;
  --lg-amber: #ffe3a3;

  --lg-success: #86efac;
  --lg-warning: #fde68a;
  --lg-danger: #fda4af;
  --lg-info: #93c5fd;

  --lg-border-hairline: rgba(255, 255, 255, 0.24);
  --lg-border-edge: rgba(255, 255, 255, 0.58);
  --lg-border-bright: rgba(255, 255, 255, 0.78);
  --lg-border-separator: rgba(255, 255, 255, 0.16);
  --lg-border-control: rgba(255, 255, 255, 0.42);
  --lg-border-focus: rgba(138, 180, 255, 0.46);

  --lg-radius-icon: 14px;
  --lg-radius-chip: 999px;
  --lg-radius-control: 22px;
  --lg-radius-card: 28px;
  --lg-radius-panel: 34px;
  --lg-radius-sheet: 46px;

  --lg-space-1: 4px;
  --lg-space-2: 8px;
  --lg-space-3: 12px;
  --lg-space-4: 16px;
  --lg-space-5: 20px;
  --lg-space-6: 24px;
  --lg-space-8: 32px;
  --lg-space-10: 40px;
  --lg-space-12: 48px;

  --lg-size-icon-button-sm: 32px;
  --lg-size-icon-button-md: 40px;
  --lg-size-icon-button-lg: 48px;
  --lg-size-control-sm: 34px;
  --lg-size-control-md: 42px;
  --lg-size-control-lg: 52px;
  --lg-size-nav-compact: 56px;
  --lg-size-nav-regular: 72px;
  --lg-size-min-target: 44px;

  --lg-blur-thin: blur(24px) saturate(1.45) brightness(1.06);
  --lg-blur-panel: blur(38px) saturate(1.8) brightness(1.12);
  --lg-blur-floating: blur(46px) saturate(1.95) brightness(1.14);

  --lg-shadow-card: inset 0 1px 0 rgba(255,255,255,.64), inset 0 -1px 0 rgba(255,255,255,.16), 0 18px 54px rgba(10,14,20,.22);
  --lg-shadow-floating: inset 0 1px 0 rgba(255,255,255,.78), inset 0 0 0 1px rgba(255,255,255,.16), 0 26px 88px rgba(10,14,20,.30), 0 2px 18px rgba(255,255,255,.12);
  --lg-shadow-focus: 0 0 0 4px rgba(138,180,255,.18), 0 0 0 1px rgba(255,255,255,.54);

  --lg-hover-transform: translateY(-1px);
  --lg-active-transform: translateY(0) scale(0.985);
  --lg-text-scrim: linear-gradient(180deg, rgba(17,21,28,.24), rgba(17,21,28,.42));
  --lg-reduce-transparency: rgba(28, 33, 42, 0.92);

  --lg-font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
  --lg-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  --lg-text-caption: 12px;
  --lg-text-body: 15px;
  --lg-text-callout: 16px;
  --lg-text-title: 22px;
  --lg-text-large-title: 34px;
  --lg-leading-body: 1.48;
  --lg-leading-relaxed: 1.68;

  --lg-z-glass: 10;
  --lg-z-nav: 100;
  --lg-z-sheet-backdrop: 900;
  --lg-z-sheet: 1000;
  --lg-z-toast: 1100;
}
```

## CSS Utility Blueprint

```css
.lg-material {
  border: 1px solid var(--lg-border-edge);
  background: linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.18) 44%, rgba(255,255,255,.10));
  box-shadow: var(--lg-shadow-card);
  backdrop-filter: var(--lg-blur-panel);
  -webkit-backdrop-filter: var(--lg-blur-panel);
}

.lg-material::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), transparent 34%),
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.36), transparent 32%);
  mask-image: linear-gradient(black, transparent 72%);
}

.lg-control {
  min-height: var(--lg-size-min-target);
  border-radius: var(--lg-radius-control);
  transition:
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    background 220ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 220ms cubic-bezier(0.2, 0, 0, 1);
}

.lg-control:hover {
  transform: var(--lg-hover-transform);
}

.lg-control:active {
  transform: var(--lg-active-transform);
}

@media (prefers-reduced-transparency: reduce) {
  .lg-material {
    background: var(--lg-reduce-transparency);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-control {
    transition-duration: 120ms;
  }
}
```

## Liquid Glass Component Rules

- Page：背景必须有可被玻璃“吸收”的环境色块，玻璃本身不要承担主色。
- Card：默认用 `thinGlass`；核心容器用 `liquidGlass`；弹层和导航才用 `floatingGlass`。
- Button：主按钮可以是白色液态胶囊，辅按钮用透明玻璃；悬浮时只增加内高光和轻微上浮。
- Input：使用 `controlGlass`，焦点只加浅蓝系统 ring，不做整块发光。
- Nav / Tab：可以使用最高级别 `floatingGlass`，但需要固定高度、明确 hit area 和当前态。
- Sheet / Modal：背景遮罩要轻，不要把页面压黑；浮层边缘比主体更亮。
- State：成功、警告、危险色只做小面积状态，不改变玻璃主材质。
- Edge：边缘高光要比中心更明显，模拟厚玻璃压缩后的亮边。
- Text：正文放在暗面或稳定玻璃面上，不直接压在环境色带和高光扫线上。
- Accessibility：正文所在玻璃层必须有暗色 scrim 或稳定底色；用户开启降低透明度时切到 `--lg-reduce-transparency`。

## Liquid Glass Component Mapping

| Component | Material | Key Tokens |
| --- | --- | --- |
| App Background | environment | `semantic.background.environment`, `gradient.page` |
| Nav Bar | floatingGlass | `component.navBar`, `layer.nav` |
| Tab Bar | floatingGlass | `component.tabBar`, `component.tabBar.indicator` |
| Card | thinGlass | `material.thinGlass`, `radius.card`, `shadow.card` |
| Primary Panel | liquidGlass | `material.liquidGlass`, `gradient.glassEdge` |
| Sheet | floatingGlass | `component.sheet`, `layer.sheet` |
| Button | controlGlass | `component.button`, `interaction.hover`, `interaction.active` |
| Input | controlGlass | `component.input`, `shadow.focus` |
| Chip | thinGlass | `component.chip`, `semantic.surface.selected` |



## CSS Variables

```css
:root {
  --background: #11151c;
  --foreground: #fbfdff;
  --muted-foreground: rgba(251, 253, 255, 0.70);
  --surface-card: rgba(255, 255, 255, 0.19);
  --surface-elevated: rgba(255, 255, 255, 0.31);
  --primary: #f8fbff;
  --primary-foreground: #11151c;
  --accent: #8ab4ff;
  --accent-foreground: #061121;
  --border-subtle: rgba(255, 255, 255, 0.24);
  --border-strong: rgba(255, 255, 255, 0.58);
  --ring: rgba(138, 180, 255, 0.46);
  --radius-card: 34px;
  --radius-button: 999px;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.64), inset 0 -1px 0 rgba(255,255,255,.16), 0 18px 54px rgba(10,14,20,.22);
  --shadow-floating: inset 0 1px 0 rgba(255,255,255,.78), inset 0 0 0 1px rgba(255,255,255,.16), 0 26px 88px rgba(10,14,20,.30), 0 2px 18px rgba(255,255,255,.12);
  --blur-glass: blur(38px) saturate(1.8) brightness(1.12);
}
```

## Tailwind v4 Mapping

```css
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-card: var(--surface-card);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border-subtle);
  --color-ring: var(--ring);
  --radius-lg: var(--radius-card);
  --radius-md: var(--radius-button);
}
```

## Component Mapping

| Component | Tokens |
| --- | --- |
| Page | `--background`, `--foreground` |
| Card | `--surface-card`, `--border-subtle`, `--radius-card`, `--shadow-card` |
| Floating Panel | `--surface-elevated`, `--border-strong`, `--shadow-floating` |
| Button | `--primary`, `--primary-foreground`, `--radius-button` |
| Badge | `--accent`, `--accent-foreground` |
| Focus Ring | `--ring` |

## Implementation Checklist

- 先把 CSS Variables 放到主题入口，再接 Tailwind v4 mapping。
- 先替换 Page、Card、Button、Badge、Input 五类基础组件。
- 保留两级阴影、两级圆角和两级边框，避免每个组件造局部特例。
- 用真实页面做一次桌面和移动端检查，再把 tokens 写入项目文档。

## Agent Handoff Prompt

```text
请把这套 Design Tokens 应用到当前项目。先映射 CSS variables 与 Tailwind v4 theme，再按 Page、Card、Button、Badge、Input 的顺序替换基础组件。不要新增无关视觉特效；如果现有组件缺少对应 token，优先复用语义最接近的 token。
```

## Usage Rules

- 先应用到真实组件样张，再全局替换项目主题。
- 大面积背景只用 `--background` 和 `--surface-card`，强调色只用于按钮、Badge、链接和状态。
- 阴影最多保留 `card` 与 `floating` 两层，避免廉价发光。
- 圆角只使用 `card` 与 `button` 两组，不要每个组件单独造半径。

## Avoid

- 不要做成蓝色霓虹玻璃
- 不要让玻璃面板密集堆叠
- 不要用厚重黑影制造悬浮感