Design Token

Mai multe ca aceasta

Game Design/Production

după HAJI SUHAIMI HAJI SUHAIMI

Designer Checklist

după Alexander Sadler

Revised Core Concept Map - PME 801

după Emily Wood

caracteristicas de un boseto o bosquejo

după Magaly Samara Vergara G

Category

Property

Object

Variant

Scale

State

Mode

Design Token

Stroke (Category)

xl (scale)

lg (scale)

md (scale)

3

sm (scale)

2

xs (scale)

1

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

Shades (Property)

Tosca (Variant)

Purple (Variant)

LPurple (Variant)

Pink (Variant)

Red (Variant)

Yellow (Variant)

Blue (Variant)

LGrey (Variant)

Grey (Variant)

Orange (Variant)

Green (Variant)

950 (Scale)

900 (Scale)

850 (Scale)

800 (Scale)

700 (Scale)

600 (Scale)

500 (Scale)

400 (Scale)

300 (Scale)

200 (Scale)

150 (Scale)

100 (Scale)

050 (Scale)

000 (Scale)

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)

toggle (Variant)

toast (Variant)

tooltip (Variant)

table (Variant)

right (Scale)

left (Scale)

buttonpressed (Variant)

overlay (Variant)

raised (Variant)

ambient (Variant)

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