形状 · 间距 · 层级Shape · Space · Layers
圆得彻底，但圆得有规矩：内圆角 = 外圆角 − 内边距。间距走 4pt 栅格，控件高度只有三档。层级不用阴影，靠表面色阶和发丝线表达。
圆角
按钮、搜索框、开关、滑块一律全圆；装内容的容器按层级从 14 取到 44。嵌套时内圆角 = 外圆角 − 内边距，所以实际用到的值不全落在刻度上（比如 20、28）。悬停或聚焦色块，粗线会沿轮廓描一遍。
8px--ok-r-1
12px--ok-r-2
16px--ok-r-3
24px--ok-r-4
32px--ok-r-5
44px--ok-r-6
全圆--ok-r-full
容器的圆角是曲率连续的超椭圆：直边和弧线之间没有曲率突变。支持 corner-shape 的浏览器里，--ok-r-1 … --ok-r-6 会乘上半径倍率 --ok-rk（1.45）来保持视觉大小，所以刻度上标的是标称值；不支持的浏览器回退成普通圆角。全圆始终是正圆。倍率怎么改、两种曲线的对比见 主题 · 圆角系数。自己写圆角时记得配上 corner-shape: var(--ok-corner)。
同心圆角
拖动滑块改变内边距：内圆角始终等于外圆角减去内边距，两条弧线保持平行。
里面是一个真的 Group：它没有设圆角，读的是外层传下来的 --ok-r-nested。
库里的容器自动做这件事。装圆角容器的外层——Surface、悬浮卡片（对话框、抽屉等）、AppShell 的侧栏卡片、Popover 的内容区——把“圆角 − 内边距 × rk”（不小于 4 × rk）写进 --ok-r-nested；Card 把它写到自己的直接子元素上。可以嵌套的容器——Card、Group、Table、CodeBlock、Image、Alert——圆角写的是 var(--ok-r-nested, 默认圆角)：单独用时是默认值，放进容器就自动同心。
放进容器就同心
不需要给里面的组件传圆角。
npm i oink-ui容器内边距
卡片、分组、表格、对话框、通知这些装内容的容器，内边距按同一套规矩取。
- 四边相等。内容到容器上、下、左、右的距离是同一个值。分组和表格里，首行、末行自己的内边距不够，差的部分由容器补足。
- 跟着圆角走。内边距取圆角的四分之三左右，落在 4pt 栅格上：圆角 20 配 16，24 配 20，32 配 24。
- 套容器用同心。里面装的是另一个圆角容器时，内边距 = 外圆角 − 内圆角：面板 44 套分组 28，内边距就是 16。
库里已经按这套规矩配好：Card 的 size 是 sm 20 / 16、md 24 / 20、lg 32 / 24（圆角 / 内边距）；Surface 是 sm 32 / 12、md 44 / 16、lg 44 / 20。自己用 Box 拼容器时，radius 和 padding 要成对选。
间距
4pt 栅格，令牌 --ok-s-1 到 --ok-s-16，后面的数字乘 4 就是像素。组件内 8 / 12，行内 16 / 20，区块之间 32 / 48。布局原语（Stack、Inline、Grid、Box）的 gap、padding 属性填的就是这个档位数字。
--ok-s-14--ok-s-28--ok-s-312--ok-s-416--ok-s-520--ok-s-624--ok-s-832--ok-s-1040--ok-s-1248--ok-s-1664控件高度
按钮、输入框、选择器、分段、步进、快捷键框共用三档高度 32 / 40 / 48，并排时取同一档。可点击的列表项（菜单项、下拉选项、导航项、命令面板结果、树节点）用 --ok-h-item：桌面 36，子项 30。下面标注的是当前环境的实际值。
触屏设备上三档控件高度抬到 36 / 44 / 52；列表项在触屏和手机宽度（< 520px）下都抬到 44。保证点按区域不小于 44px。在桌面上模拟触屏用 data-touch，演示见 主题 · 触屏高度。
描边
底色和背景分不开才描边。描边只有浅、深两档颜色（--ok-line、--ok-line-2），一律画在元素内侧，不占布局。
- 有底色不描。灰底或彩色底的控件靠颜色区分：输入框、各种轨道、标签、徽标，以及默认、主、强调按钮。
- 白底描浅边。白色或接近表面色的块描 1px
--ok-line：面板、卡片、分组、表格、选项卡片、分段的选中块。 - 浮层描深边。盖在内容上面的层描 1px
--ok-line-2：菜单、下拉、通知、悬浮卡片。 - 小控件描深边。复选框、单选框、描边按钮 1.5px
--ok-line-2；滑块圆钮 1px。 - 状态只换颜色。悬停时浅边加深成深边，粗细不变；聚焦和校验结果用 1.5px 的状态色。
- 分隔用发丝线。行与行、单元格之间只画一条 1px 浅线，不描整圈。
层级
不用阴影。层与层靠表面色阶和发丝线区分：越靠上的层越亮；浮层换成加深的描边，对话框再用遮罩压暗背景。各层的色值见色彩页的“语义表面”。
- 顶部高光只给大块容器。面板、分组、卡片、表格、菜单、通知、对话框顶部带一道 1.5px 的
--ok-hi；按钮、输入框这些控件不带。 - 浮层不透明、不磨砂。菜单、下拉、通知用不透明的
--ok-pop，不加背景模糊。只有模态遮罩--ok-scrim会把背后的页面压暗并模糊 8px。 - 深色主题方向不变。越往上越亮，凹槽比画布更深。
表面色阶的完整色值见 色彩。
在自己的样式里用
.my-panel {
padding: var(--ok-s-5);
border-radius: var(--ok-r-4); corner-shape: var(--ok-corner);
background: var(--ok-card);
/* 内描边 + 顶部高光，不是投影 */
box-shadow: inset 0 0 0 1px var(--ok-line), inset 0 1.5px 0 var(--ok-hi);
}