Design Token

More like this

Anciens de Kelkoo en 2012

by jo poli

CX inside Zara stores

by Maria Ines Vaccari

Problem Solving Methodology BBC

by Long Le

C# senior developing

by qi an

Design Token

Color

color (property, variant, scale, state)

Property : Icon, Text, Background, Stroke

Variant : Primary, Secondary, Neutral, Danger, Info, Warning

Scale : Subtle, Bolder

State : Hover, Active

Stroke

dark = 600

lightdark = 500

light = 200

white = 0

Button = 300

Button

Background

dark = 600

lightdark = 500

light = 100

white = 0

Neutral

bolder = 400

Middle

300

200

bolder = 600

Subtle

100

Disable

Lightdark

Disable

turun 50% opacity colornya

Hover

Hover = +100

Icon

Text

success, secondary, danger, info, warning itu = 500

dark = 600

lightdark = 500

light = 400

white = 0

Bolder

Warning

Info

Danger

Secondary

Success

White

0

Light

400

Lighdark

500

Dark

600

Elevation

Overlay

utk transparant background

background dark 80%

Shadow

shadow component

uniform

0,0,10,-2

0,0,15,2

bottomright

bottomleft

bottom

x,y,blur,spread

0, 4, 10, 0

x,y,blur,spread

0, 8,15, 0

topright

topleft

top

x,y,blur,spread

0, -4, 10, 0

x,y,blur,spread

0, -8,15, 0

right

x,y,blur,spread

4, 0,10, 0

x,y,blur,spread

8, 0,15, 0

left

black #000000

opacity 15

x,y,blur,spread

-4, 0, 10, 0

x, y, blur, spread

-8, 0,15, 0

Font

Category (variant,scale,state)

Font (subheading, h7, capital)

paragraphindent

paragraph

underline

italic

body

bold

capital

h7

h6

subheading

h5

h4

h3

h2

heading

h1

Radius

sm = 5

md = 10

lg = 20

xl = 30

rd = 9999

5

10

20

30

rd

9999

Padding

Gap

Margin

2xs = 4

xs = 8

sm =12

md = 16

lg = 24

xl =32

2xl = 40

3xl = 48

4xl = 64

5xl = 80

2xs

4

xs

8

sm

12

md

16

lg

24

xl

32

2xl

40

3xl

48

4xl

64

5xl

80