Design Token

何为 Design Token (设计语义)

Design Token 是设计工程化视角的产物，也是设计与前端之间共用的语言。

使用 Design Token 可长期维护产品的视觉体系，在一套设计系统中它具备统一命名规则；它本质上通过 Token的方式定义设计系统中的设计原子，如颜色、投影、字体、字号等的寓意，使其与具体的样式值解耦；比如设计师设计的产品品牌色为 #008aff，Token 为 Brand1，当产品风格需要迭代时只需要修改一次 Brand1 的对应变量色值即可实现整套产品的UI迭代；对 Design Token 合理的定义可以让属性参数更容易理解，也更便于对产品风格的控制，保证实际设计中的视觉一致性和扩展性。

在实际设计与标注过程中，理论上产品设计中的所有样式需要取至 Design Token，设计标准过程中应该使用Design Token 进行标注与前端开发。

//Font Family
$font-family-01: Roboto, sans-serif;
//Font Size
$font-size-01: 62px;
$font-size-02: 48px;
$font-size-03: 32px;
$font-size-04: 24px;
$font-size-05: 16px;
$font-size-06: 14px;
$font-size-07: 12px;
//Line Height
$line-height-01: 1;
$line-height-02: 1.5;
//Font Weight
$font-weight-01: normal;
$font-weight-02: medium;
$font-weight-03: bold;
//Letter Spacing
$letter-spacing-01: -1;
$letter-spacing-02: 0;
$letter-spacing-03: 1;
//Brand Colors
$color-primary: #000;
$color-secundary: #fff;
//Media Query
$media-query-01: 576px;
$media-query-02: 768px;
$media-query-03: 992px;
$media-query-04: 1200px;
//Sizes
$size-01: 4px;
$size-01: 8px;
$size-01: 16px;
$size-01: 24px;
$size-01: 32px;
$size-01: 64px;
//Box Shadow
$box-shadow-01: 4px 0 8px 0 rgba(0,0,0,.16);
$box-shadow-02: 8px 0 16px 0 rgba(0,0,0,.16);
$box-shadow-03: 16px 0 24px 0 rgba(0,0,0,.16);
//Border Width
$border-01: 1px;
$border-02: 2px;
$border-03: 4px;
//Border Radius
$border-radius-01: 4px;
$border-radius-02: 50%;
$border-radius-03: 500px;
//Icon Size
$icon-size-01: 16px;
$icon-size-02: 24px;
$icon-size-03: 46px;
//Opacity
$opacity-01: .1;
$opacity-02: .4;
$opacity-03: .6;
$opacity-04: .8;