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

Inspirate by

• http://meiuca.design/
• https://shopify.github.io/polaris-tokens/
• https://www.lightningdesignsystem.com/design-tokens/
• https://protocol.mozilla.org/fundamentals/tokens.html
• https://design.bitnami.com/category/Design-Tokens/