/ 企业协作 · 生产在用

智信设计系统分析

白底、蓝色主调、4px 圆角、PingFang / 微软雅黑 双平台字体栈。全部色值与尺度取自 web、action-center、desktop 三个前端项目的现行配置。

阅读令牌 查看组件

/ 01 · Color

颜色体系

系统是浅色画布唯一制。#3E7EFF 是唯一的品牌主色，承担主按钮、选中态与链接三件事；语义色四档（成功 / 警告 / 危险 / 逾期）只用于状态表达；中性色八阶把正文到浅底一路铺满。

品牌主色

Primary#3E7EFF主按钮背景、选中态、链接。
Primary Pressed#2E6BE6主按钮按下态。
Primary Border#D8E5FF主色边框。
Primary BG#EBF2FF主色浅底、菜单选中底。

语义色

Success#36D18E完成状态、成功提示。
Success BG#EAFAF3新内容浅底。
Warning#FEAC00警告提示。
Danger#FA4141危险操作、错误提示。
Danger Pressed#DD3636危险按钮按下态。
Overdue#FF950A逾期状态。与 Warning 并存，勿混用。

中性色

Ink#1F2329正文。
Body#5D616B次要文字。
Mute#8F959E占位符、弱化文字。
Control#C9CFD8控件默认、禁用文字。
Control Active#E0E4E8控件激活。
Hairline#E1E5EB边框。
Divider#E7E7E7分割线。与 Hairline 并存，按语义选。
Canvas Soft#F4F6F8浅底。

业务扩展色

Ts#63E4D7Ts 标识。浅底 #EFFCFB。
T0#B080FFT0 标识。浅底 #F7F2FF。
外部用户#45C5F7外部联系人标识。
搜索命中#FDF3AA搜索关键词高亮底。

渐变

布局底180deg · #EBF2FF → #F5F8FF页面主背景。
主色按钮185deg · #3E7EFF → #2C65D6强调型主按钮。
移动条90deg · #3E7EFF → #F5F8FF拖拽移动指示条。
新增区360deg · #E6EDFA → #DCE7FC新增内容区底。
头部180deg · #D2E1FF → #E4ECFB顶栏底。
标题180deg · #E4ECFB → #ECF1FA标题条底。
标签页180deg · #ECF1FA → #F4F6F8标签页容器底。

用法速查

场景令牌色值
正文gray-900#1F2329
次要文字gray-700#5D616B
占位符gray-500#8F959E
禁用文字gray-400#C9CFD8
边框gray-200#E1E5EB
分割线gray-200#E7E7E7
浅底gray-100#F4F6F8
主按钮背景blue-500#3E7EFF
主按钮按下blue-600#2E6BE6
主色浅底blue-50#EBF2FF
主色边框blue-100#D8E5FF
危险按钮red-500#FA4141
危险按钮按下red-600#DD3636
成功标签green-500#36D18E
成功浅底green-50#EAFAF3

/ 02 · Typography

排版层级

一条字体栈覆盖 macOS 与 Windows：PingFang SC 打头、Microsoft YaHei 兜底，字重交给 font-weight 而不是字体族。字号收敛到九档，12px 与 14px 承担了源码里 78% 的文本。

font-stack双平台统一
-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif
display-lg28 / 40 · 600
特大标题与空状态
display-md24 / 32 · 600
大标题
title-lg20 / 32 · 600
页面标题
title-md18 / 28 · 600
区块标题
title-sm16 / 24 · 500
小标题、卡片标题
body-md14 / 20 · 400
正文默认。表单、列表、对话内容都落在这一档，是系统里出现最多的文本。
body-sm13 / 18 · 400
紧凑正文。用于信息密度高的面板与侧栏。
caption12 / 18 · 400
次要文字、表格内容、标签。使用频次仅次于 14px。
micro10 / 16 · 400
角标、辅助说明。不承载可读性关键信息。
button-md14 / 1 · 400
确定
正文 Regularweight 400正文默认字重。
强调 Mediumweight 500强调文字、选中项。
标题 Semiboldweight 600标题。
重强调 Boldweight 700重强调，源码中多写作 bold。

/ 03 · Buttons

按钮变体

按钮统一 32px 高、4px 圆角、14px 标签、水平内边距 16px。填充主按钮是唯一的高强调形态，一屏只应出现一个；胶囊（20px 圆角）仅用于筛选类标签按钮。

/ button-primary #3E7EFF 填充，白字。页面唯一主操作。按下态换 #2E6BE6。
/ button-secondary 白底 + #E1E5EB 边框 + 正文墨色。默认次级操作。
/ button-ghost 主色浅底 #EBF2FF + 主色边框 #D8E5FF + 主色文字。弱化的主色操作。
/ button-danger #FA4141 填充。仅用于不可逆操作，按下态 #DD3636。
/ button-text 无底无框，主色文字。表格行内与卡片脚部的轻操作。
/ button-pill 20px 圆角胶囊。仅用于筛选条与标签选择器。

/ 04 · Cards

卡片与容器

卡片是白底 + 1px #E1E5EB 边框 + 8px 圆角 + 20px 内边距。默认不投影；只有脱离文档流的浮层（下拉、对话框）才带阴影。标签用 2px 圆角，与卡片形成尺度区分。

/ 0.1 · card-content

默认内容卡片

白底、1px 边框、8px 圆角、20px 内边距。任何内容块的默认外壳。

查看详情
/ 0.2 · card-list-item

列表卡片

同样外壳，头部挂业务标签。标签用 2px 圆角配业务扩展色的浅底。

Ts T0 已完成
/ 0.3 · card-panel

浮层面板

下拉与悬浮面板复用卡片外壳，额外叠一层轻阴影 0 0 4px 0 rgba(0,0,0,.1)，边框可省。

悬浮面板示意

/ 05 · Spacing

间距刻度

七档间距，8px 是默认值，占源码用量的一半。2px 与 4px 服务图标贴合与紧凑元素，16px 与 20px 服务组间与区块。刻度不是等比的——它是从实际写法统计出来的。

space-22 px
space-44 px
space-66 px
space-88 px
space-1212 px
space-1616 px
space-2020 px

结构尺寸

名称值来源
顶栏高度48pxdesktop constant.scss
侧边导航宽度60pxdesktop constant.scss
菜单选中左边条4pxdesktop constant.scss

/ 06 · Border radius

圆角刻度

4px 是绝对主力——输入框、按钮、卡片默认都用它。2px 留给标签与小徽标，6px / 8px 留给弹窗内卡片与对话框，20px 与 9999px 只用于胶囊与头像。

radius-22 px
标签、小徽标。
radius-44 px
输入框、按钮、卡片默认。
radius-66 px
弹窗内卡片。
radius-88 px
对话框、大卡片。
radius-2020 px
胶囊按钮。
radius-full9999 px
头像、药丸标签。

/ 07 · Elevation

层级与阴影

三档阴影加一档平面。默认平面靠 1px 边框划界；轻阴影给悬浮卡片与下拉面板；重阴影只给对话框与右键菜单。第三条不是真实投影，是吸底栏的上边界线。

/ Level 0 · 平面 无阴影，1px #E1E5EB 边框划界。所有静态卡片与容器的默认状态。
/ Level 1 · 轻 0 0 4px 0 rgba(0, 0, 0, 0.1)。悬浮卡片、下拉面板。
/ Level 2 · 重 0 0 10px rgba(0, 0, 0, 0.3)。对话框、右键菜单。
/ Level 3 · 分隔 0 -1px 0 0 #F4F6F8。吸底栏上边界，非真实投影。