Design Token

Margin

r

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

5xl

r

80

4xl

r

64

3xl

r

48

2xl

r

40

xl

r

32

lg

r

24

md

r

16

sm

r

12

xs

r

8

2xs

r

4

Gap

r

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

5xl

4xl

3xl

2xl

xl

lg

md

sm

xs

2xs

Padding

r

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

5xl

4xl

3xl

2xl

xl

lg

md

sm

xs

2xs

Radius

r

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

rd

r

9999

xl

r

30

lg

r

20

md

r

10

sm

r

5

Font

r

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

heading

h1

heading

h2

heading

h3

heading

h4

subheading

h5

subheading

h6

subheading

h7

subheading

h7

capital

body

bold

body

body

sm

body

xs

body

italic

body

underline

body

paragraph

body

paragraphindent

Elevation

Shadow

r

shadow component

left

r

black #000000opacity 15

lg

r

x, y, blur, spread-8, 0,15, 0

sm

r

x,y,blur,spread-4, 0, 10, 0

right

r

black #000000opacity 15

lg

r

x,y,blur,spread8, 0,15, 0

sm

r

x,y,blur,spread4, 0,10, 0

top

r

black #000000opacity 15

lg

r

x,y,blur,spread0, -8,15, 0

sm

r

x,y,blur,spread0, -4, 10, 0

topleft

r

black #000000opacity 15

lg

sm

topright

r

black #000000opacity 15

lg

sm

bottom

r

black #000000opacity 15

lg

r

x,y,blur,spread0, 8,15, 0

sm

r

x,y,blur,spread0, 4, 10, 0

bottomleft

r

black #000000opacity 15

lg

sm

bottomright

r

black #000000opacity 15

lg

sm

uniform

r

black #000000opacity 15

lg

r

0,0,15,2

sm

r

0,0,10,-2

Overlay

r

utk transparant backgroundbackground dark 80%

Color

r

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

Text

r

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

Dark

r

600

Lighdark

r

500

Light

r

400

White

r

0

Success

r

500

Secondary

r

500

Danger

r

500

Info

r

500

Warning

r

500

Success

r

500

Bolder

r

600

Secondary

r

500

Bolder

r

600

Danger

r

500

Bolder

r

600

Info

r

500

Bolder

r

600

Warning

r

500

Bolder

r

600

Icon

r

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

Dark

r

600

Lighdark

r

500

Light

r

400

White

r

0

Success

r

500

Secondary

r

500

Danger

r

500

Info

r

500

Warning

r

500

Background

r

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

Lighdark

Dark

Light

White

Success

Secondary

Info

Warning

Danger

Lightdark

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Dark

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Light

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

White

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Success

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Secondary

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Info

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Warning

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Danger

Hover

r

Hover = +100

Disable

r

turun 50% opacity colornya

Success

r

bolder = 600

Subtle

r

100

Bolder

r

600

Secondary

r

bolder = 600

Subtle

r

100

Bolder

r

600

Danger

r

bolder = 600

Subtle

r

100

Bolder

r

600

Info

r

bolder = 600

Subtle

r

100

Bolder

r

600

Warning

r

bolder = 600

Subtle

r

100

Bolder

r

600

Neutral

r

bolder = 400

Subtle

r

200

Middle

r

300

Bolder

r

400

Stroke

r

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

Dark

Lighdark

Light

White

Button

Success

r

500

Secondary

r

500

Danger

r

500

Info

r

500

Warning

r

500

Success

Bolder

r

600

Secondary

Bolder

r

600

Danger

Bolder

r

600

Info

Bolder

r

600

Warning

Bolder

r

600

Icon

3xl

r

80

2xl

r

64

xl

r

40

lg

r

32

md

r

24

sm

r

16

xs

r

8