Apeiron UI

基础规范

组件库的初版颜色与尺寸规范。切换明暗主题,查看同一组变量的表现。

基于 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

让每一次交互清晰可见

间距

4px
8px
12px
16px
24px
32px
48px

圆角

Tooltip 等浮层使用 6px 圆角;按钮、输入框等控件统一使用 8px 圆角;胶囊描边按钮(outlined)为全圆角。

浮层 6px

rounded-md

控件 8px

rounded-lg

胶囊 全圆角

rounded-full