Color色彩
为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。
主色
使用较为安全的蓝色作为主色调,其中Light Primary常用于hover,Dark Primary常用于active

Primary

#1875f0

Light Primary

#1875f0的10%透明度

Dark Primary

#1569D8

辅助色
除了主色外的场景色,需要在不同的场景中使用。辅助色是具有代表性的颜色,常用于信息提示。比如成功、警告和失败。同时应用于Echarts图表。

Success

#50D116

Danger

#FF1023

Warning

#F18F1C

Subsidiary

#5553CE

Info

#2CACE4

中性色
中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。

主标题 Title

#222222

副标题 Sub Ttitle

#444444

正文 Content

#555555

描述 Description

#555555

禁用 Disabled

#BFBFBF

边框 Border

#e9e9e9

分割线 Divider

#E9E9E9

背景 Background

#F4F4F4

投影
需要在不同的场景中使用。投影用于增加页面层次感。

门户板块

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05)

专题

box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1)

云端业务工作室

box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);

  • 色彩
  • 主色
  • 辅助色
  • 中性色
  • 投影