Kategoriak: All - design

arabera Muhammad Rizqinovniari 18 hours ago

17

Design Token

The content outlines various design tokens used for defining spacing, elevation, shadow properties, overlays, fonts, and margins in a design system. Spacing tokens are categorized from 2xs to 5xl, each corresponding to specific pixel values.

Design Token

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