主题
全局样式
颜色
颜色在人机交互中，扮演着极具重要的角色，它传达品牌特色，凸显内容的强弱层次，传达关联性等信息。良好的色彩搭配，可以更好得帮助用户完成任务，执行操作。
经过了多年企业服务积累与实践，我们不断抽象视觉，沉淀出独有的色彩规范，满足不同企业级视觉文化价值观的需求。
提示
以下色彩规范主要展示不同场景，不同组件，颜色的使用规范，指引每个设计者或开发者做更好地判断和决策，所展示的具体色值以恒拓高科为例，仅供参考，并非指定使用。
一、主色
Primary
#007AFF
主题色
二、辅助色
除了主色外的场景色，需要在不同的场景中使用，例如危险色表示危险的操作。
Success
#54AB41
成功色
Warning
#E6A23C
警告色
Danger
#E44C27
危险色
Info
#909399
提示色
三、点缀色
Accent0
#5F70FB
Accent1
#0099AA
Accent2
#E44C27
Accent3
#54AB41
四、背景色
Primary
#F5F5F5
主要背景色
Secondary
#EDEDED
辅助背景色
View
#FFFFFF
显示页面背景色
Search-box
#EDEDED
搜索框背景色
Selected
#F5F5F5
元素选中背景色
Focus
#F6F6F7
元素获取光标后背景色
Mask
RGBA(0, 0, 0, .4)
遮罩层颜色
五、图标颜色
Light
RGBA(255, 255, 255, .5)
白色图标
Dark
#585858
暗黑图标
Gray
#CCCCCC
灰色图标
六、边框颜色
Light
RGBA(51, 51, 51, .05)
分割线
Form
#D6D6D6
表单边框色
字体
字体是体系化界面设计中最基本的构成之一。
我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。
一、字体家族
优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。
css
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。
二、字体大小
12px小号字体，用于提示信息、备注等辅助场景；14px常规字体大小，适用于90%的场景，正文、列表、详情等；16px加大，较多用于标题；18px特大，个人详情的姓名昵称等。
三、字阶与行高
行高可以理解为一个包裹在字体外面的无形的盒子，为了让布局更加自然，行高会和字体大小形成一种比例：
12px小号字体，对应行高18px；14px常规字体，对应行高20px；16px加大字体，对应行高22px；18px特大字体，对应行高24px。
行高等于字体大小加 6。
四、字重
字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。
五、字体颜色
文本颜色如果和背景颜色太接近就会难以阅读。
Primary
#333333
主颜色
Secondary
#666666
辅助颜色
Hint
#999999
提示颜色
Disabled
#CCCCCC
可不用颜色
White
#FFFFFF
白色
间隔
css
--block-space-compact: 4px;
--block-space: 8px;
--block-space-interval: 16px;圆角
圆角默认使用4px，部分场景会使用2px。
css
--border-radius-small: 2px;
--border-radius: 4px;
--border-radius-round: 50%;