形状与层级 · 设计系统 · iantype.com

形状与层级基础

展示

系统样例

圆角

按控件、卡片、面板和胶囊的层级选择。

小圆角0.375rem

控件圆角0.625rem

卡片圆角0.875rem

面板圆角1.25rem

胶囊圆角999px

边框与阴影

先用边框分组，只在层级变化时使用阴影。

结构边框1px

焦点边框2px

浮起表面shadow.raised

浮层表面shadow.elevated

Token

3 个分类

名称	类型	浅色	深色	预览
`global.radius.sm`小圆角	dimension	`0.375rem`	`0.375rem`	Aa
`global.radius.md`控件圆角	dimension	`0.625rem`	`0.625rem`	Aa
`global.radius.lg`卡片圆角	dimension	`0.875rem`	`0.875rem`	Aa
`global.radius.xl`面板圆角	dimension	`1.25rem`	`1.25rem`	Aa
`global.radius.pill`胶囊圆角	dimension	`999px`	`999px`	Aa
`global.border.thin`结构边框	dimension	`1px`	`1px`	Aa
`global.border.focus`焦点边框	dimension	`2px`	`2px`	Aa
`global.shadow.raised`浮起表面	shadow	`0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 8px oklch(0 0 0 / 0.06)`	`0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 8px oklch(0 0 0 / 0.06)`	Aa
`global.shadow.elevated`浮层表面	shadow	`0 0 0 1px oklch(0 0 0 / 0.07), 0 12px 32px oklch(0 0 0 / 0.12)`	`0 0 0 1px oklch(0 0 0 / 0.07), 0 12px 32px oklch(0 0 0 / 0.12)`	Aa

使用

使用规则

页面和组件通过语义或组件 Token 使用这些值。
不要在页面中复制原始值。
浅色和深色主题分别检查实际组合。