组件

每个条目都对应库中的一个真实组件。请组合使用它们，不要重复造轮子。

按钮与控件 — Button

胶囊形；层级由填充强度表达。每个区域只用一个填充（主要）按钮。最小点击区域 44×44。

• 结构剖析 — 容器圆角 980（胶囊）、图标 18、标签 15/500；高度 44、横向内边距 22、间距 8。
• 变体 — filled（主要）· tinted · gray（次要）· bordered · plain（文字）。
• 尺寸 — 小 28 · 中 44 · 大 50。
• 状态 — 默认 · 悬停（亮度 −8%）· 按下（缩放 .97）· 禁用（不透明度 .35）。
• 何时使用 — 主要按钮是页面唯一最重要的操作；次要操作使用 gray 或 plain。

表单与输入 — TextField、Textarea、SearchField、Checkbox、Radio、Switch、Select、Slider、Stepper、SegmentedControl

字段高度 44、圆角 10，聚焦时显示蓝色聚焦环。标签在上方，帮助文本在下方；错误使用红色边框加上一条消息——绝不只靠颜色。

• 聚焦 — 聚焦环对比度 ≥ 3:1。
• 错误 — 红色边框 + 解释文本（例如"请输入有效的邮箱地址。"）。
• 搜索 — 无边框、填充样式，前导放大镜。
• Checkbox / Radio / Switch — 20px 自定义控件；开关轨道开启 = 强调色。
• Stepper / Select / Slider — 触控目标 ≥ 44；滑块拇指 28 带阴影。

导航 — NavBar、TabBar、Breadcrumb、Tabs、Menu、PageControl

导航栏承载标题和主要操作；标签栏承载顶层切换。当前位置必须清晰可见；返回路径始终可达。

• NavBar — 吸顶、半透明材质、发丝级分隔线；标题居中、前导返回、尾随操作；提供大标题变体。
• TabBar — 底部标签，图标 + footnote 标签，选中 = 强调色；用 aria-selected 标记当前标签。
• Breadcrumb — 带 chevron 分隔符的路径；最后一项为当前位置。
• Menu — 上下文菜单；破坏性项用红色；分组之间加分隔符。

卡片与列表 — Card、List / ListRow、Disclosure

卡片以圆角（18）和极轻的阴影叠在背景之上。列表行共享同一高度、对齐一致，并用尾随 chevron 暗示可进入。

• Card — 圆角 18，阴影 0 1px 3px / 0 8px 24px 极低不透明度；可选 16:9 媒体、eyebrow、标题、描述、页脚。
• List row — 最小高度 44、内边距 14 18；前导插槽、标题 + 副标题、尾随值/chevron。
• Disclosure — 摘要行 + 可展开区域；展开时 chevron 旋转。

模态框与弹层 — Modal、Sheet

当用户必须专注于某个决策时使用模态框；当处理临时性操作时使用底部弹层。半透明压暗层位于其后；弹层带有抓取手柄，暗示下拉关闭。

• ✓ DO — 提供明确的关闭方式（按钮、点击压暗层、下拉）；让模态框专注于单一任务。
• ✕ DON'T — 不要模态框叠模态框；不要在模态框内放复杂的多步流程；绝不让用户陷入无路可退的境地。

浮层 — Popover、Tooltip

Popover 承载与某元素相关的轻量内容；tooltip 给出简短的纯文本提示。两者都用箭头指向触发元素，点击外部即关闭。Popover 会翻转方向以适配屏幕；tooltip 不可交互，在悬停或长按时显示。

标签页与展开 — Tabs、Disclosure

下划线标签页切换同级内容；展开面板按需展开次要信息。当前标签清晰高亮；展开 chevron 随状态旋转。Tabs 支持 role=tab + 方向键导航。

选择器 — DatePicker

日历使用月度网格；时间和有限选项使用滚轮。选中值为强调色填充圆点；今天用描边标记。

反馈 — Toast、Banner、Alert、Badge、ProgressBar、Spinner、Skeleton

按打断程度选择：banner 最轻，toast 短暂，dialog 要求做出决策。破坏性操作使用红色并二次确认。

• Toast — 短暂出现并自动消失；不打断。
• Banner — 内联状态（info / success / warning / danger），带色调背景。
• Alert — 确认对话框；破坏性确认用红色。
• Badge — 计数或圆点；加载用 Progress / Spinner / Skeleton。

数据展示 — Table、Tag、Avatar

表格中数字右对齐、文本左对齐，行高一致；标签用于筛选和分类；头像在缺图时回退为首字母。

• Table — 表头用 footnote/次要样式；数值单元格右对齐并用 font-variant-numeric: tabular-nums。
• Tag — 胶囊形，可选中、可移除。
• Avatar — 图片加首字母回退；AvatarGroup 重叠排列并用 +N 溢出标记。

数据可视化 — ProgressRing

图表服务于数据，而非装饰。坐标轴克制、网格线浅淡、强调色只点亮关键数据、数字用等宽数字对齐。环使用 conic-gradient，无需 SVG。

页面模板

常见页面都有经过验证的骨架——复用它们，让产品保持可预期：List（标题 + 可滚动行）、Detail（主视觉 + 操作）、Dashboard（指标卡片 + 图表）、Onboarding / Sign-in（居中、单一焦点）。