样板间 · LIVING STYLE GUIDE
设计系统
苹果灰白底 + 统一白色表面 + 发丝分隔线，玻璃只在图层真正重叠处点到为止。下方是真实渲染的令牌与组件，照此即可保持全站一致。
01 — 颜色
中性 · 界面骨架
强调 · 仅用于重点
标志性渐变 · hero / CTA / 题图
02 — 字体与排版
03 — 圆角 · 阴影
圆角档位
阴影档位
04 — 组件
胶囊分段控件
点一下试试选中态切换。
按钮
主按钮 →
次按钮
标签 / 胶囊徽标
X
普通标签
强调标签
🔥 最热
热议
统一列表 + 发丝线
05 — 液态玻璃（克制使用）
✓ 用玻璃
吸顶导航、模态浮层、彩色 CTA 内的标签、题图上的来源徽标。
✕ 不用玻璃
普通内容卡片、列表行、纯白区块之间——实色白 + 阴影即可。
完整规范见 design-system.md · 组件见 components.md
06 — 动效(交互层,见 motion.md)
规则:反馈在按下瞬间(不等松开);入场 ~400ms --ease-spring、退场同路径 ~260ms;玻璃面 blur+scale+opacity 同动(材质化);CSS transition 可中途反向(不用 keyframes);三条 prefers-reduced-* 必备。
材质化 Sheet
blur 0→20 与位移/缩放同动,从触发方向(底部)升起,退场原路返回。连点按钮试试中途反向——transition 天然可打断。