Design token library

This page shows all design tokens.

Design tokens

theme

color

text

default
var(--_1xvi3un0) var(--_1xvi3un0)
secondary
var(--_1xvi3un1) var(--_1xvi3un1)
tertiary
var(--_1xvi3un2) var(--_1xvi3un2)
inverse
var(--_1xvi3un3) var(--_1xvi3un3)
disabled
var(--_1xvi3un4) var(--_1xvi3un4)
selected
var(--_1xvi3un5) var(--_1xvi3un5)
danger
var(--_1xvi3un6) var(--_1xvi3un6)
warning
var(--_1xvi3un7) var(--_1xvi3un7)
success
var(--_1xvi3un8) var(--_1xvi3un8)
discover
var(--_1xvi3un9) var(--_1xvi3un9)
primary
var(--_1xvi3una) var(--_1xvi3una)
UNSAFE
white_default
var(--_1xvi3unb) var(--_1xvi3unb)
dark_default
var(--_1xvi3unc) var(--_1xvi3unc)

link

default
var(--_1xvi3und) var(--_1xvi3und)
pressed
var(--_1xvi3une) var(--_1xvi3une)
visited
var(--_1xvi3unf) var(--_1xvi3unf)

skeleton

from
var(--_1xvi3ung) var(--_1xvi3ung)
to
var(--_1xvi3unh) var(--_1xvi3unh)

background

danger
normal
var(--_1xvi3uni) var(--_1xvi3uni)
hover
var(--_1xvi3unj) var(--_1xvi3unj)
pressed
var(--_1xvi3unk) var(--_1xvi3unk)
warning
normal
var(--_1xvi3unl) var(--_1xvi3unl)
hover
var(--_1xvi3unm) var(--_1xvi3unm)
pressed
var(--_1xvi3unn) var(--_1xvi3unn)
primary
normal
var(--_1xvi3uno) var(--_1xvi3uno)
hover
var(--_1xvi3unp) var(--_1xvi3unp)
pressed
var(--_1xvi3unq) var(--_1xvi3unq)
success
normal
var(--_1xvi3unr) var(--_1xvi3unr)
hover
var(--_1xvi3uns) var(--_1xvi3uns)
pressed
var(--_1xvi3unt) var(--_1xvi3unt)
discover
normal
var(--_1xvi3unu) var(--_1xvi3unu)
hover
var(--_1xvi3unv) var(--_1xvi3unv)
pressed
var(--_1xvi3unw) var(--_1xvi3unw)
disabled
normal
var(--_1xvi3unx) var(--_1xvi3unx)
subtle
normal
var(--_1xvi3uny) var(--_1xvi3uny)
hover
var(--_1xvi3unz) var(--_1xvi3unz)
pressed
var(--_1xvi3un10) var(--_1xvi3un10)
selected
normal
var(--_1xvi3un11) var(--_1xvi3un11)
hover
var(--_1xvi3un12) var(--_1xvi3un12)
pressed
var(--_1xvi3un13) var(--_1xvi3un13)

surface

sunken
normal
var(--_1xvi3un14) var(--_1xvi3un14)
default
normal
var(--_1xvi3un15) var(--_1xvi3un15)
hover
var(--_1xvi3un16) var(--_1xvi3un16)
pressed
var(--_1xvi3un17) var(--_1xvi3un17)
raised
normal
var(--_1xvi3un18) var(--_1xvi3un18)
hover
var(--_1xvi3un19) var(--_1xvi3un19)
pressed
var(--_1xvi3un1a) var(--_1xvi3un1a)
overlay
normal
var(--_1xvi3un1b) var(--_1xvi3un1b)
hover
var(--_1xvi3un1c) var(--_1xvi3un1c)
pressed
var(--_1xvi3un1d) var(--_1xvi3un1d)
inversed
sunken
normal
var(--_1xvi3un1e) var(--_1xvi3un1e)
default
normal
var(--_1xvi3un1f) var(--_1xvi3un1f)
hover
var(--_1xvi3un1g) var(--_1xvi3un1g)
pressed
var(--_1xvi3un1h) var(--_1xvi3un1h)
raised
normal
var(--_1xvi3un1i) var(--_1xvi3un1i)
hover
var(--_1xvi3un1j) var(--_1xvi3un1j)
pressed
var(--_1xvi3un1k) var(--_1xvi3un1k)
overlay
normal
var(--_1xvi3un1l) var(--_1xvi3un1l)
hover
var(--_1xvi3un1m) var(--_1xvi3un1m)
pressed
var(--_1xvi3un1n) var(--_1xvi3un1n)

border

focus
var(--_1xvi3un1o) var(--_1xvi3un1o)
default
var(--_1xvi3un1p) var(--_1xvi3un1p)
selected
var(--_1xvi3un1q) var(--_1xvi3un1q)
highlighted
var(--_1xvi3un1r) var(--_1xvi3un1r)
blanket
var(--_1xvi3un1s) var(--_1xvi3un1s)

global

font

family

brand
var(--_1amizqj0) var(--_1amizqj0)
sans
var(--_1amizqj1) var(--_1amizqj1)
mono
var(--_1amizqj2) var(--_1amizqj2)

weight

regular
var(--_1amizqj3) var(--_1amizqj3)
medium
var(--_1amizqj4) var(--_1amizqj4)
bold
var(--_1amizqj5) var(--_1amizqj5)
heavy
var(--_1amizqj6) var(--_1amizqj6)

size

giant
var(--_1amizqj7) var(--_1amizqj7)
xhuge
var(--_1amizqj8) var(--_1amizqj8)
huge
var(--_1amizqj9) var(--_1amizqj9)
xlarge
var(--_1amizqja) var(--_1amizqja)
large
var(--_1amizqjb) var(--_1amizqjb)
xmedium
var(--_1amizqjc) var(--_1amizqjc)
medium
var(--_1amizqjd) var(--_1amizqjd)
small
var(--_1amizqje) var(--_1amizqje)

lineHeight

none
var(--_1amizqjf) var(--_1amizqjf)
tight
var(--_1amizqjg) var(--_1amizqjg)
normal
var(--_1amizqjh) var(--_1amizqjh)

spacing

none
var(--_1amizqji) var(--_1amizqji)
xsmall
var(--_1amizqjj) var(--_1amizqjj)
small
var(--_1amizqjk) var(--_1amizqjk)
medium
var(--_1amizqjl) var(--_1amizqjl)
large
var(--_1amizqjm) var(--_1amizqjm)
xlarge
var(--_1amizqjn) var(--_1amizqjn)

radius

none
var(--_1amizqjo) var(--_1amizqjo)
small
var(--_1amizqjp) var(--_1amizqjp)
medium
var(--_1amizqjq) var(--_1amizqjq)
large
var(--_1amizqjr) var(--_1amizqjr)
xlarge
var(--_1amizqjs) var(--_1amizqjs)
huge
var(--_1amizqjt) var(--_1amizqjt)
full
var(--_1amizqju) var(--_1amizqju)

borderWidth

standard
var(--_1amizqjv) var(--_1amizqjv)
thick
var(--_1amizqjw) var(--_1amizqjw)

transition

duration

fast
var(--_1amizqjx) var(--_1amizqjx)
standard
var(--_1amizqjy) var(--_1amizqjy)
slow
var(--_1amizqjz) var(--_1amizqjz)
xslow
var(--_1amizqj10) var(--_1amizqj10)

timing

linear
var(--_1amizqj11) var(--_1amizqj11)
ease
var(--_1amizqj12) var(--_1amizqj12)
easeIn
var(--_1amizqj13) var(--_1amizqj13)
easeOut
var(--_1amizqj14) var(--_1amizqj14)
easeInOut
var(--_1amizqj15) var(--_1amizqj15)

zIndex

noscript
var(--_1amizqj16) var(--_1amizqj16)
toaster
var(--_1amizqj17) var(--_1amizqj17)
toolTip
var(--_1amizqj18) var(--_1amizqj18)
dropdown
var(--_1amizqj19) var(--_1amizqj19)
blanket
var(--_1amizqj1a) var(--_1amizqj1a)