unify-token

Unify Token

Unify Token are collection of design token that can be used on any supported Tokopedia Platform (currently Web, Android and iOS).

The tokens are consist of:

• Color
• Typography
• Spacing
• Grid

For now iOS only support these design token:

• Color
• Typography: Font Size

Important Info

Starting from version 1.5.0, please use new token that are on different folder path. The older token are still on previous path but will be removed on the future updates.

< 1.5.0  = unify-token/build/...
>= 1.5.0 = unify-token/build/v2/...

Currently the new version only support colors, other will follow because the naming convention are still not decided.

The Cheat Sheet for the tokens also renewed, please refer to the link below.

• New Version Cheat Sheet
• Old Version Cheat Sheet

Cheat Sheet (New Version, >= 1.5.0)

Colors

Usage

import { N0, N50, R100, ... } from 'unify-token/build/v2/colors';
...

.some-class {
  color: ${N50};
  background-color: ${R100};
}

Neutral

N0 = '#FFFFFF';
N50 = '#F3F4F5';
N75 = '#E5E7E9';
N100 = '#DBDEE2';
N150 = '#B5BBC5';
N200 = '#9FA6B0';
N300 = '#838994';
N400 = '#6C727C';
N500 = '#52565E';
N600 = '#40454C';
N700 = '#31353B';

Red

R100 = '#FFEAEF';
R200 = '#FFCCD9';
R300 = '#FD8AA7';
R400 = '#FF5C84';
R500 = '#EF144A';
R600 = '#D6001C';

Green

G100 = '#EBFFEF';
G200 = '#D6FFDE';
G300 = '#82EF95';
G400 = '#4FD15A';
G500 = '#03AC0E';
G600 = '#12883D';

Blue

B100 = '#E5F5FF';
B200 = '#CCEBFF';
B300 = '#77CAFF';
B400 = '#32AFFF';
B500 = '#009BFF';
B600 = '#0066A9';

Purple

P100 = '#FBE7FF';
P200 = '#EEBBFF';
P300 = '#D07EFF';
P400 = '#AC43F6';
P500 = '#9022DC';
P600 = '#7A08C9';

Teal

T100 = '#EBF6F6';
T200 = '#D2F2F2';
T300 = '#B0E2E5';
T400 = '#84C6C9';
T500 = '#689C9E';
T600 = '#3A6E70';

Yellow

Y100 = '#FFFAE6';
Y200 = '#FFF0B3';
Y300 = '#FFC400';
Y400 = '#FF8B00';
Y500 = '#FA591D';

Cheat Sheet (Old Version, < 1.5.0)

Colors

Usage

import { Neutral, Red, Green, ... } from 'unify-token/build/color';
...

.some-class {
  color: ${Neutral.N0};
  background-color: ${Red.R500};
}

Neutral

N0 = '#FFFFFF';
N50 = '#F3F4F5';
N75 = '#E5E7E9';
N100 = '#DBDEE2';
N150 = '#B5BBC5';
N200 = '#9FA6B0';
N300 = '#838994';
N400 = '#6C727C';
N500 = '#52565E';
N600 = '#40454C';
N700 = '#31353B';

Red

R100 = '#FFEAEF';
R200 = '#FFCCD9';
R300 = '#FD8AA7';
R400 = '#FF5C84';
R500 = '#EF144A';
R600 = '#D6001C';

Green

G100 = '#EBFFEF';
G200 = '#D6FFDE';
G300 = '#82EF95';
G400 = '#4FD15A';
G500 = '#03AC0E';
G600 = '#12883D';

Blue

B100 = '#E5F5FF';
B200 = '#CCEBFF';
B300 = '#77CAFF';
B400 = '#32AFFF';
B500 = '#009BFF';
B600 = '#0066A9';

Purple

P100 = '#FBE7FF';
P200 = '#EEBBFF';
P300 = '#D07EFF';
P400 = '#AC43F6';
P500 = '#9022DC';
P600 = '#7A08C9';

Teal

T100 = '#EBF6F6';
T200 = '#D2F2F2';
T300 = '#B0E2E5';
T400 = '#84C6C9';
T500 = '#689C9E';
T600 = '#3A6E70';

Yellow

Y100 = '#FFFAE6';
Y200 = '#FFF0B3';
Y300 = '#FFC400';
Y400 = '#FF8B00';
Y500 = '#FA591D';

Typography

Usage

import { fontSize, fontWeight, ... } from 'unify-token/build/typograhpy';
...

.some-class {
  font-size: ${fontSize.lvl3};
  font-weight: ${fontWeight.regular};
}

Font Type

stackHeading = Nunito Sans
desktop = Open Sans
lite = Open Sans
ios = SF Pro Text
android = Roboto

Font Size

lvl1 = 10px
lvl2 = 12px
lvl3 = 14px
lvl4 = 16px
lvl5 = 18px
lvl6 = 20px
lvl7 = 24px
lvl8 = 28px
lvl9 = 34px
lvl10 = 38px

Font Weight

regular = 400
bold = 700
extraBold = 800

Line Height

lvl1 = 16px
lvl2 = 18px
lvl3 = 20px
lvl4 = 22px
lvl5 = 24px
lvl6 = 26px
lvl7 = 30px
lvl8 = 34px
lvl9 = 40px
lvl10 = 44px

Grid

Usage

import { breakpoint, gutter, ... } from 'unify-token/build/grid';
...

.some-class {
  width: ${breakpoint.mobile};
  padding: ${gutter.mobile};
}

Breakpoint

mobile = 768px
tablet = 1024px
desktop = 1200px

Gutter

mobile = 8px
tablet = 12px
desktop = 12px

Column

mobile = 8px
tablet = 12px
desktop = 12px

Spacing

Usage

import { spacing, layout } from 'unify-token/build/grid';

...

.some-class {
  padding: ${spacing.lvl3};
  margin: ${layout.lvl2};
}

Spacing

lvl1 = 2px
lvl2 = 4px
lvl3 = 8px
lvl4 = 16px
lvl5 = 24px
lvl6 = 32px
lvl7 = 40px
lvl8 = 48px

Layout

lvl1 = 8px
lvl2 = 16px
lvl3 = 24px
lvl4 = 32px
lvl5 = 40px
lvl6 = 48px
lvl7 = 64px
lvl8 = 96px
lvl9 = 128px