Design Token

Margin
(Category)

r

2xs = 4xs = 8sm =12md = 16lg = 24xl =322xl = 403xl = 484xl = 645xl = 80

5xl
(Scale)

r

80

4xl
(Scale)

r

64

3xl
(Scale)

r

48

2xl
(Scale)

r

40

xl
(Scale)

r

32

lg
(Scale)

r

24

md
(Scale)

r

16

sm
(Scale)

r

12

xs
(Scale)

r

8

2xs
(Scale)

r

4

Gap
(Category)

r

2xs = 4xs = 8sm =12md = 16lg = 24xl =322xl = 403xl = 484xl = 645xl = 80

5xl
(Scale)

r

80

4xl
(Scale)

r

64

3xl
(Scale)

r

48

2xl
(Scale)

r

40

xl
(Scale)

r

32

lg
(Scale)

r

24

md
(Scale)

r

16

sm
(Scale)

r

12

xs
(Scale)

r

8

2xs
(Scale)

r

4

Padding
(Category)

r

2xs = 4xs = 8sm =12md = 16lg = 24xl =322xl = 403xl = 484xl = 645xl = 80

5xl
(Scale)

r

80

4xl
(Scale)

r

64

3xl
(Scale)

r

48

2xl
(Scale)

r

40

xl
(Scale)

r

32

lg
(Scale)

r

24

md
(Scale)

r

16

sm
(Scale)

r

12

xs
(Scale)

r

8

2xs
(Scale)

r

4

Radius
(Category)

r

sm = 5md = 10lg = 20xl = 30rd = 9999

rd
(Scale)

r

9999

xl
(Scale)

r

30

lg
(Scale)

r

20

md
(Scale)

r

10

sm
(Scale)

r

5

Font
(Category)

r

Category (variant,scale,state)Font (subheading, h7, capital)

heading
(Variant)

h1
(Scale)

r

poppins boldfont size 35font height 40next penulisan 35/40 = size/height

heading
(Variant)

h2
(Scale)

r

poppins semibold29/32

heading
(Variant)

h3
(Scale)

r

poppins bold24/28

heading
(Variant)

h4
(Scale)

r

poppins medium20/24

subheading
(Variant)

h5
(Scale)

r

poppins bold16/20

subheading
(Variant)

h6
(Scale)

r

poppins semibold14/16

subheading
(Variant)

h7
(Scale)

r

poppins semibold12/16

subheading
(Variant)

h7
(Scale)

capital
(State)

r

poppins bold12/16capital

body
(Variant)

bold
(State)

r

poppins bold12/16

body
(Variant)

r

medium12/16

body
(Variant)

small
(State)

r

medium11/16

body
(Variant)

xtrasmall
(State)

r

medium8/12

body
(Variant)

italic
(State)

r

medium italic12/16

body
(Variant)

underline
(State)

r

semibold12/16underline

body
(Variant)

paragraph
(State)

r

medium12/24

body
(Variant)

paragraphindent
(State)

r

medium12/24paragraph spacing 16

Elevation
(Category)

r

shadow color #00000

ambient
(Variant)

sm
(Scale)

r

x 0y 0blur 6spread 0transparency 10%

lg
(Scale)

r

x 0y 0blur 12spread 0transparency 10%

raised
(Variant)

sm
(Scale)

r

x 0y 0blur 8spread 0transparency 15%

lg
(Scale)

r

x 0y 0blur 16spread 0transparency 15%

overlay
(Variant)

sm
(Scale)

r

x 0y 0blur 16spread 0transparency 20%

lg
(Scale)

r

x 0y 0blur 24spread 0transparency 20%

buttonpressed
(Variant)

r

x 0y 4blur 4spread 0transparency 25%

table
(Variant)

left
(Scale)

r

x 4y 0blur 4spread 0transparency 15%

right
(Scale)

r

x -4y 0blur 4spread 0transparency 15%

tooltip
(Variant)

r

x 0y 4blur 16spread 0transparency 15%

toast
(Variant)

r

x 0y 4blur 8spread 0transparency 15%

toggle
(Variant)

r

x 0y 1blur 2spread 0transparency 20%

Color
(Category)

r

color (property, variant, scale, state)Property : Icon, Text, Background, StrokeVariant : Primary, Secondary, Neutral, Danger, Info, WarningScale : Subtle, BolderState : Hover, Active

Text
(Property)

r

success, secondary, danger, info, warning itu = 500dark = 600lightdark = 500light = 400white = 0

Dark
(Variant)

r

600#333F47

Lighdark
(Variant)

r

500#7E93A8

Light
(Variant)

r

400#B2BFC8

White
(Variant)

r

0#FFFFFF

Success
(Variant)

r

500#08A94C

Secondary
(Variant)

r

500#F8981D

Danger
(Variant)

r

500#D62926

Info
(Variant)

r

500#047CDD

Warning
(Variant)

r

500#FCD305

Success
(Variant)

r

500

Bolder
(State)

r

600#06873D

Secondary
(Variant)

r

500

Bolder
(State)

r

600#C67A17

Danger
(Variant)

r

500

Bolder
(State)

r

600#AB211E

Info
(Variant)

r

500

Bolder
(State)

r

600#0363B1

Warning
(Variant)

r

500

Bolder
(State)

r

600#CAA904

Icon
(Property)

r

success, secondary, danger, info, warning itu = 500dark = 600lightdark = 500light = 400white = 0

Dark
(Variant)

r

600#333F47

Lighdark
(Variant)

r

500#7E93A8

Light
(Variant)

r

400#B2BFC8

White
(Variant)

r

0#FFFFFF

Success
(Variant)

r

500#08A94C

Secondary
(Variant)

r

500#F8981D

Danger
(Variant)

r

500#D62926

Info
(Variant)

r

500#047CDD

Warning
(Variant)

r

500#FCD305

Background
(Property)

r

dark = 600lightdark = 500light = 100white = 0

Dark
(Variant)

r

600#333F47

Lighdark
(Variant)

r

500#7E93A8

Light
(Variant)

r

100#F5F8FA

White
(Variant)

r

0#FFFFFF

Success
(Variant)

r

500#08A94C

Secondary
(Variant)

r

500#F8981D

Info
(Variant)

r

500#047CDD

Warning
(Variant)

r

500#FCD305

Danger
(Variant)

r

500#D62926

Neutral
(Variant)

r

300#D2DFE8

Dark
(Variant)

Hover
(State)

r

Hover = +100700#1A2730

Disable
(State)

r

turun 50% opacity colornya600#333F47 50%

Lightdark
(Variant)

Hover
(State)

r

Hover = +100600#333F47

Disable
(State)

r

turun 50% opacity colornya500#7E93A8 50%

Light
(Variant)

Hover
(State)

r

Hover = +100200#E8ECF5

Disable
(State)

r

turun 50% opacity colornya100#F5F8FA 50%

White
(Variant)

Hover
(State)

r

Hover = +100100#F5F8FA

Disable
(State)

r

turun 50% opacity colornya0#FFFFFF 50%

Success
(Variant)

Hover
(State)

r

Hover = +100600#06873D

Disable
(State)

r

turun 50% opacity colornya500#08A94C 50%

Secondary
(Variant)

Hover
(State)

r

Hover = +100600#C67A17

Disable
(State)

r

turun 50% opacity colornya500#F8981D 50%

Info
(Variant)

Hover
(State)

r

Hover = +100600#0363B1

Disable
(State)

r

turun 50% opacity colornya500#047CDD 50%

Warning
(Variant)

Hover
(State)

r

Hover = +100600#CAA904

Disable
(State)

r

turun 50% opacity colornya500#FCD305 50%

Danger
(Variant)

Hover
(State)

r

Hover = +100600#AB211E

Disable
(State)

r

turun 50% opacity colornya500#D62926 50%

Success
(Variant)

r

bolder = 600

Subtle
(State)

r

100#D5FADD

Bolder
(State)

r

600#06873D

Secondary
(Variant)

r

bolder = 600

Subtle
(State)

r

100#FEEAD2

Bolder
(State)

r

600#C67A17

Danger
(Variant)

r

bolder = 600

Subtle
(State)

r

100#F7D4D4

Bolder
(State)

r

600#AB211E

Info
(Variant)

r

bolder = 600

Subtle
(State)

r

100#CDE5F8

Bolder
(State)

r

600#0363B1

Warning
(Variant)

r

bolder = 600

Subtle
(State)

r

100#FEF6CD

Bolder
(State)

r

600#CAA904

Neutral
(Variant)

r

bolder = 400

Subtle
(State)

r

200#E8ECF5

Bolder
(State)

r

400#B2BFC8

Stroke
(Property)

r

dark = 600lightdark = 500light = 200white = 0Button = 300

Dark
(Variant)

r

600#333F47

Lighdark
(Variant)

r

500#7E93A8

Light
(Variant)

r

200#E8ECF5

White
(Variant)

r

0#FFFFFF

Button
(Variant)

r

300#D2DFE8

Success
(Variant)

r

500#08A94C

Secondary
(Variant)

r

500#F8981D

Danger
(Variant)

r

500#D62926

Info
(Variant)

r

500#047CDD

Warning
(Variant)

r

500#FCD305

Success
(Variant)

Bolder
(State)

r

600#06873D

Secondary
(Variant)

Bolder
(State)

r

600#C67A17

Danger
(Variant)

Bolder
(State)

r

600#AB211E

Info
(Variant)

Bolder
(State)

r

600#0363B1

Warning
(Variant)

Bolder
(State)

r

600#CAA904

Shades
(Property)

Green
(Variant)

000
(Scale)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Orange
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Grey
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

LGrey
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Blue
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Yellow
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Red
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Pink
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

LPurple
(Variant)

000
(Scale)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Purple
(Variant)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Tosca
(Variant)

050
(Scale)

050
(Scale)

100
(Scale)

150
(Scale)

200
(Scale)

300
(Scale)

400
(Scale)

500
(Scale)

600
(Scale)

700
(Scale)

800
(Scale)

850
(Scale)

900
(Scale)

950
(Scale)

Icon
(Category)

3xl
(Scale)

r

80

2xl
(Scale)

r

64

xl
(Scale)

r

40

lg
(Scale)

r

32

md
(Scale)

r

24

sm
(Scale)

r

16

xs
(Scale)

r

8

Stroke
(Category)

xs
(scale)

r

1

sm
(scale)

r

2

md
(scale)

r

3

lg
(scale)

r

4

xl
(scale)

r

5

Category

Property

Variant

Scale

State

Mode

Object