3trees UI Design System
B-side component documentation
Design Tokens
Design Tokens 定义 Web 与 App 共用的视觉语言，包括颜色、字体、间距、阴影和圆角。
Color Light Mode/颜色色板
Light Mode 下的基础色板入口，用于展示品牌色、文字色、背景色、容器色和边框色。
功能色
标准色
#E5F4EB
#CCEAD7
#B2DFC3
#99D5AF
#80CA9B
#66BF88
#4DB574
#009538
#137F33
#006120
辅色1
#FFF7F3
#FFE7E1
#FFD8D0
#FFC5BA
#FFAD9F
#FF8A7A
#DF4136
#BF0008
#921B15
#750000
辅色2
#FDEFE5
#FBDFCC
#F9D0B2
#F7C099
#F5B080
#F3A066
#EF8133
#EB6100
#B04100
#691800
辅色3
#E5F5FB
#CCEBF8
#B2E2F4
#99D8F0
#66C4E9
#33B1E1
#009DDA
#008CC5
#0073A4
#005780
辅色4
#FFFAEA
#FEF4D5
#FEEFC0
#FEE9AB
#FCC92C
#D7B043
#C19200
#A47B00
#876400
#674B00
文字&图标色
text/primary主要文字color.text.gray-1#181818
text/secondary次要文字color.text.gray-2#767676
text/placeholder占位文字color.text.gray-3#B3B3B3
text/disabled禁用文字color.text.gray-4#EDEDED
text/inverse反色文字color.neutral.white-1#FFFFFF
中性色
neutral/white-1#FFFFFF
50#FDFDFD
100#F7F7F7
200#EDEDED
300#DEDEDE
400#CBCBCB
500#B3B3B3
600#909090
700#767676
800#555555
900#181818
Color Tokens Light Mode/色彩规则
Light Mode 语义色规则入口，用于说明 token 如何映射到业务状态、操作层级和组件语义。
中性色彩
Light 模式默认全局中性色阶配置
| Token | 描述 | 颜色 |
|---|---|---|
| bg/page | 后台页面底层背景 | color.neutral.gray-2#F7F7F7 |
| bg/surface | 主要容器背景 | color.neutral.white-1#FFFFFF |
| bg/surface-subtle | 次要容器背景 | color.neutral.gray-1#FDFDFD |
| bg/component | 组件默认浅背景 | color.neutral.gray-2#F7F7F7 |
| border/default | 默认组件边框 | color.neutral.gray-3#EDEDED |
| border/strong | 较强边框或选中辅助线 | color.neutral.gray-4#DEDEDE |
中性色彩交互token
交互状态token
| Token | 描述 | 颜色 |
|---|---|---|
| bg/container-hover | 容器 hover 背景 | color.neutral.gray-2#F7F7F7 |
| bg/container-active | 容器按下背景 | color.neutral.gray-3#EDEDED |
| bg/surface-subtle-hover | 次要容器 hover 背景 | color.neutral.gray-3#EDEDED |
| bg/surface-subtle-active | 次要容器按下背景 | color.neutral.gray-4#DEDEDE |
| bg/component-active | 组件 active 背景 | color.neutral.gray-6#B3B3B3 |
| bg/component-disabled | 组件禁用背景 | color.neutral.gray-2#F7F7F7 |
文字&图标色彩
默认 Light 模式文字和图标色彩配置
| Token | 描述 | 颜色 |
|---|---|---|
| text/primary | 主要文字 | color.text.gray-1#181818 |
| text/secondary | 次要文字 | color.text.gray-2#767676 |
| text/placeholder | 占位文字 | color.text.gray-3#B3B3B3 |
| text/disabled | 禁用文字 | color.text.gray-4#EDEDED |
| text/inverse | 深色或品牌色背景上的反色文字 | color.neutral.white-1#FFFFFF |
| text/brand | 品牌文字 | color.brand.8#009538 |
| text/link | 链接文字 | color.brand.8#009538 |
| icon/primary | 主要图标 | color.text.gray-1#181818 |
| icon/secondary | 次要图标 | color.text.gray-2#767676 |
| icon/disabled | 禁用图标 | color.text.gray-4#EDEDED |
| icon/brand | 品牌图标 | color.brand.8#009538 |
主题色&功能色
主题相关配置
| Token | 描述 | 颜色 |
|---|---|---|
| brand/default | 品牌主色 | color.brand.8#009538 |
| brand/hover | 品牌 hover | color.brand.7#4DB574 |
| brand/active | 品牌 pressed / active | color.brand.9#137F33 |
| brand/disabled | 品牌禁用 | color.brand.3#B2DFC3 |
| brand/focus | 品牌 focus 背景 | color.brand.2#CCEAD7 |
| brand/light | 品牌浅底色 | color.brand.1#E5F4EB |
| status/info/bg | 信息标签底色 | color.blue.1#E5F5FB |
| status/info/default | 信息状态色 | color.blue.6#33B1E1 |
| status/info/text | 信息文字色 | color.blue.7#009DDA |
| status/warning/bg | 警示标签底色 | color.orange.1#FDEFE5 |
| status/warning/default | 警示状态色 | color.orange.6#F3A066 |
| status/warning/text | 警示文字色 | color.orange.8#EB6100 |
| status/success/bg | 成功标签底色 | color.brand.1#E5F4EB |
| status/success/default | 成功状态色 | color.brand.7#4DB574 |
| status/success/text | 成功文字色 | color.brand.8#009538 |
| status/caution/default | 非阻断提醒状态色 | color.orange.6#F3A066 |
| status/caution/bg | 提醒标签底色 | color.yellow.1#FFFAEA |
| status/caution/text | 提醒文字色 | color.text.gray-2#767676 |
| status/error/bg | 错误标签底色 | color.red.1#FFF7F3 |
| status/error/disabled | 禁用状态字体/图标色 | color.red.3#FFAD9F |
| status/error/default | 错误状态色 | color.red.7#DF4136 |
| status/error/active | 点击状态警示色 | color.red.9#921B15 |
| status/error/text | 错误文字色 | color.red.8#BF0008 |
Typography/字体
字体 token 入口，用于沉淀标题、正文、标记文本的字号、字重、行高和字距。
Font Family / 字体族
fontFamily/base: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC
Font Size / 字体大小
字体大小 token
font-size/display-large:64px
大型展示标题，后台中极少使用，仅用于封面或核心展示
font-size/display-medium:48px
中型展示标题
font-size/headline-large:36px
页面级标题
font-size/headline-medium:28px
模块级大标题
font-size/headline-small:24px
模块标题或页面标题
font-size/title-extralarge:20px
重点区块标题
font-size/title-large:18px
次重点区块标题
font-size/title-medium:16px
卡片、表单分组标题
font-size/title-small:14px
表格列头、紧凑标题
font-size/body-large:16px
较大正文或说明
font-size/body-medium:14px
后台默认正文、表单、表格内容
font-size/body-small:12px
辅助信息、弱提示
font-size/mark-small:12px
小标签、状态标记
font-size/mark-medium:14px
常规标签、强调字段
font-size/link-large:16px
大号链接
font-size/link-medium:14px
默认链接
font-size/link-small:12px
小号链接
Line Height / 行高
行高 token，与字号层级一一对应
| Token | Value |
|---|---|
| line-height/display-large | 72px |
| line-height/display-medium | 56px |
| line-height/headline-large | 44px |
| line-height/headline-medium | 36px |
| line-height/headline-small | 32px |
| line-height/title-extralarge | 28px |
| line-height/title-large | 26px |
| line-height/title-medium | 24px |
| line-height/title-small | 22px |
| line-height/body-large | 24px |
| line-height/body-medium | 22px |
| line-height/body-small | 20px |
| line-height/mark-small | 20px |
| line-height/mark-medium | 22px |
| line-height/link-large | 24px |
| line-height/link-medium | 22px |
| line-height/link-small | 20px |
Font Weight / 字重
字重 token，用于正文与强调文字。
| Token | Value | 描述 |
|---|---|---|
| font-weight/regular | 400 | 常规字重 |
| font-weight/medium | 500 | 中等字重 |
| font-weight/semibold | 600 | 强调标题与标签字重 |
Letter Spacing / 字距
letter-spacing/default: 0px
Spacing/间距
间距 token 入口，用于约束控件内边距、组件间距、布局间距和页面安全边距。
2px
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
160px
Primitives / Spacing
基础间距 token，用于 width / height / gap，并作为语义间距 alias 来源。
| Token | Value | Usage |
|---|---|---|
| spacer/2 | 2px | 细微间距，如图标与文字、贴近元素 |
| spacer/4 | 4px | 细微间距，如图标与文字、贴近元素 |
| spacer/8 | 8px | 组件内部紧凑间距 |
| spacer/12 | 12px | 组件内部紧凑间距 |
| spacer/16 | 16px | 常规控件、卡片与页面基础间距 |
| spacer/24 | 24px | 常规控件、卡片与页面基础间距 |
| spacer/32 | 32px | 模块、区块与卡片组间距 |
| spacer/40 | 40px | 模块、区块与卡片组间距 |
| spacer/48 | 48px | 模块、区块与卡片组间距 |
| spacer/64 | 64px | 页面大区块与空状态留白 |
| spacer/96 | 96px | 大范围页面留白、强分区间距 |
| spacer/160 | 160px | 超大页面留白、首屏或大版块分隔 |
Semantics / Spacing
B 端页面语义间距，全部 alias 到 Primitives / Spacing 的 spacer 数值。
| Token | Alias | Value | Usage |
|---|---|---|---|
| spacing/component/xxs | spacer/2 | 2px | 极细微关系，如分隔线与贴近元素 |
| spacing/component/xs | spacer/4 | 4px | 图标与文字的紧密间距 |
| spacing/component/sm | spacer/8 | 8px | 控件内部小间距、紧凑元素间距 |
| spacing/component/md | spacer/12 | 12px | 默认控件内部间距、表单标签与控件间距 |
| spacing/component/lg | spacer/16 | 16px | 常规组件 padding、工具栏项间距 |
| spacing/component/xl | spacer/24 | 24px | 大组件 padding、表单组间距 |
| spacing/layout/xs | spacer/16 | 16px | 紧凑区块间距 |
| spacing/layout/sm | spacer/24 | 24px | 默认区块间距、页面内容边距 |
| spacing/layout/md | spacer/32 | 32px | 模块组间距、卡片组间距 |
| spacing/layout/lg | spacer/40 | 40px | 大模块间距 |
| spacing/layout/xl | spacer/48 | 48px | 页面大区块间距 |
| spacing/layout/xxl | spacer/64 | 64px | 强分区或空状态上下留白 |
| spacing/page/margin | spacer/24 | 24px | B 端页面默认左右边距 |
| spacing/page/header-gap | spacer/16 | 16px | 页面标题与操作区间距 |
| spacing/page/section-gap | spacer/24 | 24px | 页面内容区块默认间距 |
| spacing/page/gutter | spacer/24 | 24px | 栅格列间距与容器边距 |
| spacing/card/padding-sm | spacer/16 | 16px | 紧凑卡片内边距 |
| spacing/card/padding-md | spacer/24 | 24px | 默认卡片内边距 |
| spacing/card/padding-lg | spacer/32 | 32px | 重点卡片或详情卡片内边距 |
| spacing/card/header-body-gap | spacer/16 | 16px | 卡片标题与内容间距 |
| spacing/card/group-gap | spacer/24 | 24px | 卡片组间距 |
| spacing/form/item-gap | spacer/16 | 16px | 表单项纵向间距 |
| spacing/form/label-control-gap | spacer/8 | 8px | 表单标签与控件间距 |
| spacing/form/inline-gap | spacer/12 | 12px | 同一行表单控件间距 |
| spacing/form/group-gap | spacer/24 | 24px | 表单分组间距 |
| spacing/table/cell-padding-x | spacer/16 | 16px | 表格单元格水平 padding |
| spacing/table/cell-padding-y | spacer/12 | 12px | 表格单元格垂直 padding |
| spacing/table/toolbar-gap | spacer/16 | 16px | 表格工具栏按钮/筛选项间距 |
| spacing/table/section-gap | spacer/16 | 16px | 筛选区、工具栏与表格之间间距 |
| spacing/list/item-gap | spacer/8 | 8px | 列表项内部紧凑间距 |
| spacing/list/item-padding-x | spacer/16 | 16px | 列表项水平 padding |
| spacing/list/item-padding-y | spacer/12 | 12px | 列表项垂直 padding |
| spacing/control/icon-text-gap | spacer/4 | 4px | 按钮、菜单、标签中图标与文字间距 |
| spacing/control/group-gap | spacer/8 | 8px | 按钮组、操作组紧凑间距 |
| spacing/control/padding-x-sm | spacer/8 | 8px | 小尺寸控件水平 padding |
| spacing/control/padding-x-md | spacer/12 | 12px | 默认控件水平 padding |
| spacing/control/padding-x-lg | spacer/16 | 16px | 大尺寸控件水平 padding |
| spacing/overlay/padding | spacer/16 | 16px | Popover、Dropdown 等浮层内边距 |
| spacing/modal/padding | spacer/24 | 24px | 弹窗内容默认 padding |
| spacing/drawer/padding | spacer/24 | 24px | 抽屉内容默认 padding |
Shadow/阴影
阴影 token 入口，用于卡片、下拉、抽屉、弹窗等不同浮层高度的视觉表达。
Shadow / 阴影
单层阴影，用于 B 端页面卡片、浮层和弹窗层级。
shadow.shadow-1
shadow.shadow-2
shadow.shadow-3
| Token | Value | Mapping | CSS | Usage |
|---|---|---|---|---|
| shadow.shadow-1 | 0px 2px 4px rgba(0, 0, 0, 0.02) | shadow-1/layer-1/* | --shadow-card-token / shadow-card | 轻量卡片、默认容器、低层级悬浮 |
| shadow.shadow-2 | 0px 2px 6px rgba(0, 0, 0, 0.06) | shadow-2/layer-1/* | --shadow-floating-token / shadow-floating | 下拉层、Popover、临时浮层 |
| shadow.shadow-3 | 0px 2px 8px rgba(0, 0, 0, 0.08) | shadow-3/layer-1/* | --shadow-modal-token / shadow-modal | Modal、Drawer、强层级浮层 |
Primitives / Shadow
基础阴影 token，作为 shadow-1、shadow-2、shadow-3 的 layer 参数来源。
| Token | Value | 描述 |
|---|---|---|
| shadow/offset/x-0 | 0 | 阴影 X 偏移 0 |
| shadow/offset/y-2 | 2 | 阴影 Y 偏移 2 |
| shadow/blur/4 | 4 | 阴影模糊 4 |
| shadow/blur/6 | 6 | 阴影模糊 6 |
| shadow/blur/8 | 8 | 阴影模糊 8 |
| shadow/spread/0 | 0 | 阴影扩散 0 |
| shadow/color/black-alpha-02 | #00000005 | 阴影颜色 black 2% |
| shadow/color/black-alpha-06 | #0000000F | 阴影颜色 black 6% |
| shadow/color/black-alpha-08 | #00000014 | 阴影颜色 black 8% |
Radius/圆角
圆角 token 入口，用于统一控件、卡片、面板和胶囊标签的形态层级。
Radius / 圆角
圆角用于定义控件、容器、浮层和胶囊元素的边界风格。Primitive 层保留原始数值，Semantic 层按 UI 场景引用。
Primitives / Radius
原始圆角数值，仅表达尺寸，不直接描述业务用途。
radius/none0px
radius/22px
radius/44px
radius/66px
radius/88px
radius/1212px
radius/1616px
radius/full999px / full
Semantics / Radius
语义圆角按 ToB 后台常见 UI 场景命名，并通过 alias 映射到 Primitive 层。
radius/control/sm小尺寸控件
Alias: radius/4 / 4pxCSS: --radius-control-sm
radius/control/md默认控件
Alias: radius/4 / 4pxCSS: --radius-control-md / rounded-control
radius/control/lg大尺寸控件或强调操作区
Alias: radius/6 / 6pxCSS: --radius-control-lg / rounded-control-lg
radius/control/none表格单元格、分割型容器等需要直角的区域
Alias: radius/none / 0pxCSS: --radius-control-none
radius/card卡片、信息块、列表容器
Alias: radius/8 / 8pxCSS: --radius-card / rounded-card
radius/panel页面面板、筛选区、表格容器
Alias: radius/8 / 8pxCSS: --radius-panel / rounded-panel
radius/popover下拉层、浮层、提示菜单
Alias: radius/8 / 8pxCSS: --radius-popover / rounded-popover
radius/modal弹窗、抽屉中的内容容器
Alias: radius/12 / 12pxCSS: --radius-modal / rounded-modal
radius/image图片、缩略图、上传预览
Alias: radius/8 / 8pxCSS: --radius-image
radius/tag标签、徽标、轻量状态块
Alias: radius/4 / 4pxCSS: --radius-tag / rounded-tag
radius/pill胶囊按钮、胶囊标签、圆形头像
Alias: radius/full / 999pxCSS: --radius-pill / rounded-pill
| Token | Alias | Value | CSS | Usage |
|---|---|---|---|---|
| radius/control/sm | radius/4 | 4px | --radius-control-sm | 小尺寸控件 |
| radius/control/md | radius/4 | 4px | --radius-control-md / rounded-control | 默认控件 |
| radius/control/lg | radius/6 | 6px | --radius-control-lg / rounded-control-lg | 大尺寸控件或强调操作区 |
| radius/control/none | radius/none | 0px | --radius-control-none | 表格单元格、分割型容器等需要直角的区域 |
| radius/card | radius/8 | 8px | --radius-card / rounded-card | 卡片、信息块、列表容器 |
| radius/panel | radius/8 | 8px | --radius-panel / rounded-panel | 页面面板、筛选区、表格容器 |
| radius/popover | radius/8 | 8px | --radius-popover / rounded-popover | 下拉层、浮层、提示菜单 |
| radius/modal | radius/12 | 12px | --radius-modal / rounded-modal | 弹窗、抽屉中的内容容器 |
| radius/image | radius/8 | 8px | --radius-image | 图片、缩略图、上传预览 |
| radius/tag | radius/4 | 4px | --radius-tag / rounded-tag | 标签、徽标、轻量状态块 |
| radius/pill | radius/full | 999px | --radius-pill / rounded-pill | 胶囊按钮、胶囊标签、圆形头像 |