布局
间距
4px 基准，三种风格共用同一个阶梯：
| token | 值 | 常见用法 |
|---|---|---|
space-1 |
4 | 图标和文字之间 |
space-2 |
8 | 控件内边距、标签之间、侧栏条目左右 |
space-3 |
12 | 行内元素之间、卡片之间 |
space-4 |
16 | 卡片内边距、列表左右留白 |
space-6 |
24 | 区块之间、页面左右边距 |
space-8 |
32 | 大区块之间 |
space-10 / space-12 |
40 / 48 | 空状态上下留白、页面顶部 |
风格之间的疏密差别不靠改间距，而是靠尺寸 token：
| 尺寸 | 青藤 | 萌虎 | 像素 |
|---|---|---|---|
任务行最小高度 row-* |
46 | 58 | 32 |
按钮、输入框高度 control-* |
32 | 40 | 26 |
桌面侧栏宽度 sidebar-* |
248 | 264 | 260 |
触屏设备上，任何可点区域不小于 44×44：像素和青藤的控件在 Android 上用 VisualDensity 和外扩点击区补足，视觉高度不变。
栅格与断点
| 窗口宽度 | 名称 | 布局 |
|---|---|---|
| < 600 | compact | 单栏。侧栏收进抽屉，任务详情全屏推入，看板横向滑动、每次一列 |
| 600–899 | medium | 收起的图标导航条 + 列表；详情以底部或右侧面板打开 |
| 900–1279 | expanded | 侧栏 + 列表；详情是右侧面板（宽 400–480），列表随之变窄 |
| ≥ 1280 | expanded | 侧栏 + 列表 + 详情三栏同时可见 |
- 列表、看板和表格的内容区左右留白用
space-6，compact 下用space-4。 - 看板分栏宽度在 250–320 之间自适应，分栏间距
space-3。 - 管理面板和审计日志用 12 栏网格，栏间距 24，最大内容宽度 1200。
- macOS 客户端遵守系统标题栏和红绿灯的安全区：侧栏顶部留 28px。
圆角
| token | 青藤 | 萌虎 | 像素 | 用于 |
|---|---|---|---|---|
--radius-sm |
6 | 10 | 0 | 按钮、输入框、标签、导航条目 |
--radius-md |
8 | 16 | 0 | 卡片、任务行容器、弹出菜单 |
--radius-lg |
12 | 24 | 0 | 对话框、看板分栏、通知面板 |
radius-pill |
9999 | 9999 | 9999 | 头像、胶囊（像素风格的头像也改成方形） |
嵌套圆角时，内层半径 = 外层半径 − 内边距；像素风格永远是 0。
描边、阴影与层级
| 层级 | z | 阴影 | 青藤 | 萌虎 | 像素 |
|---|---|---|---|---|---|
| 页面 | 0 | — | — | — | — |
| 卡片、列表容器 | 0 | shadow-card |
1px 柔和投影 | 3px 硬阴影 | 无 |
| 悬停 / 拖动 | 0 | shadow-raised |
4px 16px 投影 | 5px 硬阴影 | 1px 品牌色描边 |
| 吸顶表头、状态栏 | z-sticky 10 |
— | |||
| 侧滑面板 | z-drawer 20 |
shadow-overlay |
|||
| 下拉菜单、日期选择 | z-popover 30 |
shadow-overlay |
12px 40px 投影 | 8px 硬阴影 | 4px 硬阴影 |
| 对话框 | z-modal 40 |
shadow-overlay + scrim 遮罩 |
|||
| 提示条 | z-toast 50 |
shadow-overlay |
描边粗细：青藤和像素 1px，萌虎 2.5px（--border-width）。萌虎的卡片、按钮、输入框、头像、标签都要描边，颜色用 border-strong；青藤和像素的卡片描边用 border-default，控件描边用 border-strong。