形状与层级

A3S UI 使用 4、6、8 与 12px 四级圆角。静态表面保持平坦；只有真正浮在内容上方或内容会从其下方经过的表面才获得阴影。

微型

4px

控件

6px

表面

8px

浮层

12px

<div class="grid w-full gap-4 sm:grid-cols-4">
    <div class="rounded-sm border border-border bg-card p-5 text-center text-sm">
      微型
      <br />
      <code class="text-xs text-muted-foreground">4px</code>
    </div>
    <div class="rounded-md border border-border bg-card p-5 text-center text-sm">
      控件
      <br />
      <code class="text-xs text-muted-foreground">6px</code>
    </div>
    <div class="rounded-lg border border-border bg-card p-5 text-center text-sm">
      表面
      <br />
      <code class="text-xs text-muted-foreground">8px</code>
    </div>
    <div class="rounded-xl bg-card p-5 text-center text-sm shadow-[var(--a3s-shadow-soft)]">
      浮层
      <br />
      <code class="text-xs text-muted-foreground">12px</code>
    </div>
  </div>

圆角

令牌	默认值	用途
`--radius-sm` / `--a3s-radius-xs`	`4px`	Badge 内部、微型控件
`--radius-md` / `--a3s-radius-sm`	`6px`	Button、Input 与导航项
`--radius-lg` / `--a3s-radius-md`	`8px`	卡片、工具栏与稳定表面
`--radius-xl` / `--a3s-radius-lg`	`12px`	Dialog、Drawer、Popover 与预览框

药丸形只用于状态、紧凑筛选器、开关轨道和圆形操作，不能成为普通按钮或卡片的默认形状。

阴影

令牌	值	用途
`--a3s-shadow-control`	`0 1px 2px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 3%)`	选中控件与轻量预览边界
`--a3s-shadow-soft`	`0 8px 16px -4px rgb(0 0 0 / 20%)`	菜单、Popover 与浮动面板
`--a3s-shadow`	`0 20px 20px -8px rgb(0 0 0 / 24%)`	模态 Dialog

深色主题增加不透明度，不添加发亮边框。静态卡片、外壳、目录、任务记录和设置行不使用阴影。同一条边默认只使用清晰边界或浮动阴影，不重复强调。

#形状与层级

#圆角

#阴影

形状与层级

圆角

阴影