字体排版用来传达信息内容，并界面看起来有秩序
决定不同层级文本的大小
| Token | font size / line height | 预览 |
|---|---|---|
| $font.size.header-1 | 32px / 40px |
用于社区欢迎标题
社区欢迎标题、活动标题、增值服务类标题
|
| $font.size.header-2 | 24px / 32px |
用于菜单列表标题
菜单列表标题
|
| $font.size.header-3 | 20px / 28px |
用于弹窗类标题
弹窗类标题
|
| $font.size.title | 18px / 24px |
用于主标题
头部功能条标题、卡片标题
|
| $font.size.subtitle | 16px / 22px |
用于副标题
卡片标题、按钮文本、聊天正文
|
| $font.size.body | 14px / 20px |
常规文本
无特别强调的所有场景
|
| $font.size.caption | 12px / 16px |
辅助描述性文本
辅助、描述性文本
|
| $font.size.Lable | 10px / 12px |
主要用于标签内文本
主要用于标签内文本
|
| $font.size.mini | 8px / 10px |
主要用于头像下方状态
头像下方状态类标签内文本，如直播、派对状态
|
决定不同层级文本的粗细
| Token | Value |
|---|---|
| --font-weight-normal | 400 |
| --font-weight-medium | 500 |
| --font-weight-semibold | 600 |
客户端PC汉字/英文采用【MiSans VF】字体，部分阿拉伯数字采用【DIN Condensed】字体
使用圆角来描述容器与界面元素的轮廓，从一定程度决定产品的视觉调性
按钮/标签/小元素一般采用2px圆角，卡片/弹窗/下拉抽屉等中型元素一般采用4px，框体级一般采用8px
间距变量被应用在各个组件内部，或组件与组件之间，用来调整产品整体的密集和紧凑程度
| Token | Value | Token | Value |
|---|---|---|---|
| $space0 | 0px | $space600 | 24px |
| $space50 | 2px | $space650 | 28px |
| $space100 | 4px | $space700 | 32px |
| $space150 | 6px | $space800 | 40px |
| $space200 | 8px | $space900 | 48px |
| $space250 | 10px | $space950 | 60px |
| $space300 | 12px | $space1000 | 80px |
| $space400 | 16px | ||
| $space500 | 20px |