design
design/component-patterns/index.md
medium
design-component-patterns-index
跨风格组件落地约定索引 — 按钮层级、卡片与面板（含何时不用卡片）、动效曲线时长、每组件入场速查。Use when 写按钮·卡片·动效 / 定某组件入场方式 / 统一组件交互态 / 评审组件还原时。
子项索引
| 子项 | 一句话 |
|---|---|
| button-hierarchy leaf | 按钮四类层级 — 主(深)/CTA(品牌渐变)/描边次级/幽灵，各定 default·hover·active·focus·disabled 五态 |
| card-and-surface leaf | 卡片/面板/阴影层级约定 + inline sections over cards 原则(内容平铺用分区标题，不层层堆白卡) |
| motion-and-animation leaf | 动效约定 — 入场 translateY+fade、列表 stagger、hover 时长、标准/弹性曲线，并强制 prefers-reduced-motion 兜底 |
| entrance-patterns leaf | 每类组件入场速查 — 弹窗/抽屉/下拉/手风琴/列表/tab/卡片/页面各配哪种入场与 transform-origin |
Component Patterns · 组件落地
跨风格通用的组件交互与结构约定。风格层（bento/flat/wes）只换观感，这里的状态与层级不变。
路由
| 你在做什么 | 进哪个 |
|---|---|
| 写按钮 / 定主次 CTA 层级与交互态 | button-hierarchy |
| 写卡片面板 / 纠结要不要包卡片 | card-and-surface |
| 定曲线时长档位 / 处理 reduced-motion 底线 | motion-and-animation |
| 某个组件（弹窗/抽屉/下拉/列表…）该用哪种入场 | entrance-patterns |
链接
- 上层：
../index.md - 交互态对比度/焦点底线：
../foundations/accessibility.md - 组件态如何 token 化：
../design-language/tokens-and-theming.md