#间距
A3S UI 以 4px 为基础单位。紧密关系使用 4、6、8、12 与 16px；区域关系使用 24、32、48、64 与 96px。标题上方留白大于下方，不能靠额外卡片制造分组。
4px微间距8px相邻控件12px组件内部16px表面内边距24px分区间距32px页面区域<div class="grid w-full gap-4 rounded-xl border border-border bg-card p-6">
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">4px</code>
<span class="h-3 w-4 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">微间距</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">8px</code>
<span class="h-3 w-8 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">相邻控件</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">12px</code>
<span class="h-3 w-12 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">组件内部</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">16px</code>
<span class="h-3 w-16 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">表面内边距</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">24px</code>
<span class="h-3 w-24 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">分区间距</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">32px</code>
<span class="h-3 w-32 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">页面区域</span>
</div>
</div>#布局基准
| 角色 | 默认值 | 说明 |
|---|---|---|
| 标准控件 | 36px | 按钮、字段与组合控件 |
| 紧凑控件 | 28px | Ribbon 与明确的紧凑环境 |
| 粗指针目标 | 44px | 触摸与粗指针最小命中区域 |
| 顶栏 | 56px | 文档与工作区标题栏 |
| 文档侧栏 | 248px | 持久文档导航 |
| 阅读列 | 752px | 约 65–75 个字符 |
| 文档外壳 | 1440px | 最大内容宽度 |
手机、平板与桌面的页面内边距分别为 16px、24px 与 32–48px。900px 以下将次要检查器转为浮层；768px 以下将持久导航转为可关闭侧栏；520px 以下保留身份和关键操作，并保护底部安全区。
#应用参数
| 变量 | 默认值 | 组件 |
|---|---|---|
--a3s-control-height | 2.25rem | 标准控件 |
--a3s-control-height-sm | 1.75rem | 紧凑控件 |
--a3s-touch-target | 2.75rem | 粗指针命中目标 |
--a3s-task-navigation-size | 15.5rem | App Shell 与任务导航 |
--a3s-task-reading-size | 47.5rem | 任务记录与输入器 |
--a3s-task-inspector-size | 21rem | 任务检查器 |
--a3s-activity-rail-size | 2.875rem | 折叠导航轨 |
--a3s-workspace-header-height | 3.5rem | Workspace Header |
--a3s-toolbar-height | 2.6875rem | 独立 Toolbar 行 |
--a3s-toolbar-control-height | 1.8125rem | Toolbar 命令 |
--a3s-ribbon-tabs-height | 2.25rem | Ribbon 标签栏 |
--a3s-ribbon-panel-height | 4.625rem | Ribbon 命令区 |
--a3s-status-height | 1.75rem | Status Bar |
优先覆盖公开变量，不要覆盖组件内部网格选择器。调整密度时保持 4px 基线，并同时验证桌面、320px 宽度、200% 缩放和粗指针环境。