基础规范
组件库的初版颜色与尺寸规范。切换明暗主题,查看同一组变量的表现。
基于 Apeiron 现有配色整理,属于组件库初版变量,待设计确认。
语义颜色
页面背景
--ui-background组件表面
--ui-surface主要文字
--ui-foreground次要文字
--ui-muted品牌主色
--ui-primary次要背景
--ui-secondary悬停背景
--ui-accent边框
--ui-border链接
--ui-link危险操作
--ui-danger成功
--ui-success深边框
--ui-border-deep输入框边框
--ui-input输入框悬停
--ui-input-hover占位文字
--ui-placeholder只读底色
--ui-fill-deep字体
使用系统字体,兼顾中英文阅读,无需额外下载字体。
32px让每一次交互清晰可见
24px让每一次交互清晰可见
16px让每一次交互清晰可见
14px让每一次交互清晰可见
12px让每一次交互清晰可见
间距
4px8px12px16px24px32px48px圆角
Tooltip 等浮层使用 6px 圆角;按钮、输入框等控件统一使用 8px 圆角;胶囊描边按钮(outlined)为全圆角。
浮层 6px
rounded-md控件 8px
rounded-lg胶囊 全圆角
rounded-full