Design Token

Più simili a questo

Nectar Product Development

da Nectar Product Development

Nuevo mapa

da María Ximena Calderón

JKS World Championship 2015

da Kobus Prinsloo

Design Cycle

da Daniel Flynn

Category

Property

Object

Variant

Scale

State

Mode

Design Token

Icon (Category)

Color (Category)

color (property, variant, scale, state)

Property : Icon, Text, Background, Stroke

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

Scale : Subtle, Bolder

State : Hover, Active

Stroke (Property)

dark = 600

lightdark = 500

light = 200

white = 0

Button = 300

Button (Variant)

Background (Property)

dark = 600

lightdark = 500

light = 100

white = 0

Neutral (Variant)

bolder = 400

Middle (State)

300

200

bolder = 600

Subtle (State)

100

Lightdark (Variant)

Disable (State)

turun 50% opacity colornya

Hover (State)

Hover = +100

Icon (Property)

Text (Property)

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

dark = 600

lightdark = 500

light = 400

white = 0

Bolder (State)

Warning (Variant)

Info (Variant)

Danger (Variant)

Secondary (Variant)

Success (Variant)

White (Variant)

0

Light (Variant)

400

Lighdark (Variant)

500

Dark (Variant)

600

Elevation (Category)

Overlay (Property)

utk transparant background

background dark 80%

Shadow (Property)

shadow component

uniform (Variant)

0,0,10,-2

0,0,15,2

bottomright (Variant)

bottomleft (Variant)

bottom (Variant)

x,y,blur,spread

0, 4, 10, 0

x,y,blur,spread

0, 8,15, 0

topright (Variant)

topleft (Variant)

top (Variant)

x,y,blur,spread

0, -4, 10, 0

x,y,blur,spread

0, -8,15, 0

right (Variant)

x,y,blur,spread

4, 0,10, 0

x,y,blur,spread

8, 0,15, 0

left (Variant)

black #000000

opacity 15

x,y,blur,spread

-4, 0, 10, 0

x, y, blur, spread

-8, 0,15, 0

Font (Category)

Category (variant,scale,state)

Font (subheading, h7, capital)

paragraphindent (State)

paragraph (State)

underline (State)

italic (State)

xtrasmall (State)

small (State)

body (Variant)

bold (State)

capital (State)

h7 (Scale)

h6 (Scale)

subheading (Variant)

h5 (Scale)

h4 (Scale)

h3 (Scale)

h2 (Scale)

heading (Variant)

h1 (Scale)

Radius (Category)

sm = 5

md = 10

lg = 20

xl = 30

rd = 9999

5

10

20

30

rd (Scale)

9999

Padding (Category)

Gap (Category)

Margin (Category)

2xs = 4

xs = 8

sm =12

md = 16

lg = 24

xl =32

2xl = 40

3xl = 48

4xl = 64

5xl = 80

2xs (Scale)

4

xs (Scale)

8

sm (Scale)

12

md (Scale)

16

lg (Scale)

24

xl (Scale)

32

2xl (Scale)

40

3xl (Scale)

48

4xl (Scale)

64

5xl (Scale)

80