圆角与边框 Radius & Border
圆角七档 + 图标/输入框专用圆角；边框只保留 1px / 2px 两档（3px 留给 focus ring）。边框颜色在「颜色 / 边框」分组，本页只看形状与阴影。
圆角 radius · 9
| Token 名称 | 圆角半径 | 示例 |
|---|---|---|
| radius-none | 0px | |
| radius-xs | 2px | |
| radius-sm | 4px | |
| radius-composer-icon-button | {desktop.radius-md} | |
| radius-icon-button | 8px | |
| radius-md | 8px | |
| radius-lg | 12px | |
| radius-xl | 16px | |
| radius-full | 9999px |
边框宽度与线型 border-width / style · 4
| Token 名称 | 宽度 / 线型 | 示例 |
|---|---|---|
| border-width-thin | 1px | |
| border-width-strong | 2px | |
| border-style-dashed | dashed | |
| border-style-solid | solid |
组合与控件状态边框 border-solid / dashed / control · 7
| Token 名称 | 边框参数 | |
|---|---|---|
| border-dashed-neutral | 1px dashed #DFDFDF1px dashed #424244 | |
| border-solid-neutral | 1px solid #DFDFDF1px solid #424244 | |
| border-control-active | 1px solid color-mix(in srgb, #8E80F2 46%, #DFDFDF 54%)1px solid color-mix(in srgb, #9D91F5 46%, #424244 54%) | |
| border-control-default | 1px solid #DFDFDF1px solid #424244 | |
| border-control-hover | 1px solid color-mix(in srgb, #8E80F2 32%, #DFDFDF 68%)1px solid color-mix(in srgb, #9D91F5 32%, #424244 68%) | |
| border-dashed-interactive | 2px dashed color-mix(in srgb, #8E80F2 46%, #DFDFDF 54%)2px dashed color-mix(in srgb, #9D91F5 46%, #424244 54%) | |
| border-solid-interactive | 2px solid color-mix(in srgb, #8E80F2 46%, #DFDFDF 54%)2px solid color-mix(in srgb, #9D91F5 46%, #424244 54%) | |
阴影 shadow · 6
shadow-bar-bottom0 -3px 6px -2px rgb(0 0 0 / 0.08)0 -3px 6px -2px rgb(0 0 0 / 0.08)
shadow-bar-top0 3px 6px -2px rgb(0 0 0 / 0.08)0 3px 6px -2px rgb(0 0 0 / 0.08)
shadow-popover0 4px 12px rgb(0 0 0 / 0.20)0 4px 12px rgb(0 0 0 / 0.20)
shadow-raised0 1px 1px rgb(0 0 0 / 0.02)0 1px 1px rgb(0 0 0 / 0.02)
shadow-sticky-end-2px 0 4px -2px rgb(0 0 0 / 0.08)-2px 0 4px -2px rgb(0 0 0 / 0.08)
shadow-sticky-start2px 0 4px -2px rgb(0 0 0 / 0.08)2px 0 4px -2px rgb(0 0 0 / 0.08)