形状
令牌导出定义了九档圆角,生成器区域用其中六档,每档对应一类东西。这个配对是骨架:换皮肤不改它。(另外三档——tiny 2、xxlarge 16、xxxlarge 24——属于平台自己的表面。)
rounded.none(0)——展开状态下属性卡片标题行的下两角(收起时标题行就是整张卡片,四角都圆)rounded.small(4px)——标签、分区标题里的 24px 图标底板、分段控件的选中项rounded.medium(6px)——所有控件:输入框、下拉、按钮、分段轨道、色块rounded.large(8px)——缩略图卡片、缩放簇、图标按钮、收起胶囊、40px 工具底板、属性卡片rounded.xlarge(12px)——对话框与悬浮栏
24 · sm 4
28 · md 6
32 · md 6
40 · lg 8
卡片 · lg 8
对话框 · xl 12
圆角跟着高度走:28 和 32 的控件 6px,40 的大按钮 8px,浮起的容器 8 与 12,属性卡片四角 8px。配对比单个数字重要——40px 的按钮配 6px 看着没做完,配 20px 就成了另一个产品。
rounded.circle 是导出里的 100px,不是 9999px:它只在宽度小于 200px 的元素上才呈胶囊,而这里所有全圆的东西都在这个范围内——36px 的开关轨道、12px 的圆钮、68px 的 Tips 胶囊。它留给真正的圆形:开关圆钮、滑块圆钮、状态点。系统里只有两个胶囊,不会再多:开关轨道,因为圆角矩形的开关会读成复选框;Tips 按钮,它要读作「帮助」而不是又一个操作。其余按钮都是圆角矩形。
圆角是唯一的造型手段。没有缺口、没有斜切、没有装饰性边框、没有渐变描边。