Design tokens generator
Design tokens are the minimum elements of the design system
Example
//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;Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000/design-tokens-generator/
$ yarn run dev
# build for production and launch server
$ yarn run build
$ yarn start
# generate static project
$ yarn run generate
# deploy to github pages
$ yarn deploy