---
title: Color
---

<style>
.color-list{float:left;width:100%;margin-bottom:50px}
.color-list.inline{float:left;width:auto;margin-bottom:50px}
.color-title{float:left;width:100%;font-size:14px;color:#111A34}
.color-item{float:left;width:140px;min-height:148px;margin-top:16px;margin-right:20px;margin-bottom:20px;padding-bottom:20px;border:solid 1px #E4E5E7;border-radius:4px 4px 0 0;overflow:hidden}
.color-item.no-gap{margin-right:0}
.color-item-box.large{width:140px;height:84px}
.color-item-box.small{width:60px;height:60px;margin-bottom:10px;font-size:12px;font-weight:100;color:#fff;text-align:center;line-height:60px}
.color-item-text{margin:10px 0 0!important;padding:0 10px!important;font-size:14px!important;color:#666F83;line-height:1!important}
.color-item-text span{color:#ccc}
</style>

Color is a good way to convey the brand. To ensure the consistency of the style of the product experience, it is recommended to use a palette and other tools to build brand-specific palettes and usage rules.    


#### Functional color definition       

**Blue**: brand color / basic color, representing convenience, safety, professional   
**Orange**: brand color, representing gain, consumption, equity   
**Green**: health, security     
**Red**: reminder users when overdue or strong reminder      

#### Brand color

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#FF7D41"></div>
    <p class="color-item-text">#FF7D41</p>
    <p class="color-item-text">Brand orange</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#2F86F6"></div>
    <p class="color-item-text">#2F86F6</p>
    <p class="color-item-text">Brand blue</p>
  </div>
</div>

#### Functional color

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#FF5257"></div>
    <p class="color-item-text">#FF5257</p>
    <p class="color-item-text">Strong prompt error</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#5878B4"></div>
    <p class="color-item-text">#5878B4</p>
    <p class="color-item-text">Text link color</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#28AA91"></div>
    <p class="color-item-text">#28AA91</p>
  </div>
</div>

#### Neutral color

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#FFFFFF;border-bottom:solid 1px #E4E5E7"></div>
    <p class="color-item-text">#FFFFFF</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#E2E4EA"></div>
    <p class="color-item-text">#E2E4EA</p>
    <p class="color-item-text">Line/card background color</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#F9FAFB"></div>
    <p class="color-item-text">#F9FAFB</p>
    <p class="color-item-text">Operating area background color</p>
  </div>
</div>

#### Text information

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#111A34"></div>
    <p class="color-item-text">#111A34</p>
    <p class="color-item-text">Title text</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#41485D"></div>
    <p class="color-item-text">#41485D</p>
    <p class="color-item-text">Body</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#666F83"></div>
    <p class="color-item-text">#666F83</p>
    <p class="color-item-text">Operating area background color</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#858B9C"></div>
    <p class="color-item-text">#858B9C</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#C5CAD5"></div>
    <p class="color-item-text">#C5CAD5</p>
    <p class="color-item-text">Non-clickable state</p>
  </div>
</div>

#### Mask (transparent)

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:rgba(0, 0, 0, .7)"></div>
    <p class="color-item-text">#000000</p>
    <p class="color-item-text">70%</p>
  </div>
</div>