Design token library

This page shows all design tokens.

Design tokens

theme

color

text

default
var(--_1mqb4lm0) var(--_1mqb4lm0)
secondary
var(--_1mqb4lm1) var(--_1mqb4lm1)
tertiary
var(--_1mqb4lm2) var(--_1mqb4lm2)
inverse
var(--_1mqb4lm3) var(--_1mqb4lm3)
disabled
var(--_1mqb4lm4) var(--_1mqb4lm4)
selected
var(--_1mqb4lm5) var(--_1mqb4lm5)
danger
var(--_1mqb4lm6) var(--_1mqb4lm6)
warning
var(--_1mqb4lm7) var(--_1mqb4lm7)
success
var(--_1mqb4lm8) var(--_1mqb4lm8)
discover
var(--_1mqb4lm9) var(--_1mqb4lm9)
primary
var(--_1mqb4lma) var(--_1mqb4lma)
UNSAFE
white_default
var(--_1mqb4lmb) var(--_1mqb4lmb)
dark_default
var(--_1mqb4lmc) var(--_1mqb4lmc)

link

default
var(--_1mqb4lmd) var(--_1mqb4lmd)
pressed
var(--_1mqb4lme) var(--_1mqb4lme)
visited
default
var(--_1mqb4lmf) var(--_1mqb4lmf)
pressed
var(--_1mqb4lmg) var(--_1mqb4lmg)

skeleton

from
var(--_1mqb4lmh) var(--_1mqb4lmh)
to
var(--_1mqb4lmi) var(--_1mqb4lmi)

background

danger
normal
var(--_1mqb4lmj) var(--_1mqb4lmj)
hover
var(--_1mqb4lmk) var(--_1mqb4lmk)
pressed
var(--_1mqb4lml) var(--_1mqb4lml)
warning
normal
var(--_1mqb4lmm) var(--_1mqb4lmm)
hover
var(--_1mqb4lmn) var(--_1mqb4lmn)
pressed
var(--_1mqb4lmo) var(--_1mqb4lmo)
primary
normal
var(--_1mqb4lmp) var(--_1mqb4lmp)
hover
var(--_1mqb4lmq) var(--_1mqb4lmq)
pressed
var(--_1mqb4lmr) var(--_1mqb4lmr)
success
normal
var(--_1mqb4lms) var(--_1mqb4lms)
hover
var(--_1mqb4lmt) var(--_1mqb4lmt)
pressed
var(--_1mqb4lmu) var(--_1mqb4lmu)
discover
normal
var(--_1mqb4lmv) var(--_1mqb4lmv)
hover
var(--_1mqb4lmw) var(--_1mqb4lmw)
pressed
var(--_1mqb4lmx) var(--_1mqb4lmx)
disabled
normal
var(--_1mqb4lmy) var(--_1mqb4lmy)
subtle
normal
var(--_1mqb4lmz) var(--_1mqb4lmz)
hover
var(--_1mqb4lm10) var(--_1mqb4lm10)
pressed
var(--_1mqb4lm11) var(--_1mqb4lm11)
selected
normal
var(--_1mqb4lm12) var(--_1mqb4lm12)
hover
var(--_1mqb4lm13) var(--_1mqb4lm13)
pressed
var(--_1mqb4lm14) var(--_1mqb4lm14)

surface

sunken
normal
var(--_1mqb4lm15) var(--_1mqb4lm15)
default
normal
var(--_1mqb4lm16) var(--_1mqb4lm16)
hover
var(--_1mqb4lm17) var(--_1mqb4lm17)
pressed
var(--_1mqb4lm18) var(--_1mqb4lm18)
raised
normal
var(--_1mqb4lm19) var(--_1mqb4lm19)
hover
var(--_1mqb4lm1a) var(--_1mqb4lm1a)
pressed
var(--_1mqb4lm1b) var(--_1mqb4lm1b)
overlay
normal
var(--_1mqb4lm1c) var(--_1mqb4lm1c)
hover
var(--_1mqb4lm1d) var(--_1mqb4lm1d)
pressed
var(--_1mqb4lm1e) var(--_1mqb4lm1e)
inversed
sunken
normal
var(--_1mqb4lm1f) var(--_1mqb4lm1f)
default
normal
var(--_1mqb4lm1g) var(--_1mqb4lm1g)
hover
var(--_1mqb4lm1h) var(--_1mqb4lm1h)
pressed
var(--_1mqb4lm1i) var(--_1mqb4lm1i)
raised
normal
var(--_1mqb4lm1j) var(--_1mqb4lm1j)
hover
var(--_1mqb4lm1k) var(--_1mqb4lm1k)
pressed
var(--_1mqb4lm1l) var(--_1mqb4lm1l)
overlay
normal
var(--_1mqb4lm1m) var(--_1mqb4lm1m)
hover
var(--_1mqb4lm1n) var(--_1mqb4lm1n)
pressed
var(--_1mqb4lm1o) var(--_1mqb4lm1o)

border

focus
var(--_1mqb4lm1p) var(--_1mqb4lm1p)
default
var(--_1mqb4lm1q) var(--_1mqb4lm1q)
selected
var(--_1mqb4lm1r) var(--_1mqb4lm1r)
highlighted
var(--_1mqb4lm1s) var(--_1mqb4lm1s)
blanket
var(--_1mqb4lm1t) var(--_1mqb4lm1t)

global

font

family

brand
var(--_1tbg2t60) var(--_1tbg2t60)
sans
var(--_1tbg2t61) var(--_1tbg2t61)
mono
var(--_1tbg2t62) var(--_1tbg2t62)

weight

regular
var(--_1tbg2t63) var(--_1tbg2t63)
medium
var(--_1tbg2t64) var(--_1tbg2t64)
bold
var(--_1tbg2t65) var(--_1tbg2t65)
heavy
var(--_1tbg2t66) var(--_1tbg2t66)

size

xhuge
var(--_1tbg2t67) var(--_1tbg2t67)
huge
var(--_1tbg2t68) var(--_1tbg2t68)
xlarge
var(--_1tbg2t69) var(--_1tbg2t69)
large
var(--_1tbg2t6a) var(--_1tbg2t6a)
xmedium
var(--_1tbg2t6b) var(--_1tbg2t6b)
medium
var(--_1tbg2t6c) var(--_1tbg2t6c)
small
var(--_1tbg2t6d) var(--_1tbg2t6d)

lineHeight

none
var(--_1tbg2t6e) var(--_1tbg2t6e)
tight
var(--_1tbg2t6f) var(--_1tbg2t6f)
normal
var(--_1tbg2t6g) var(--_1tbg2t6g)

spacing

none
var(--_1tbg2t6h) var(--_1tbg2t6h)
xsmall
var(--_1tbg2t6i) var(--_1tbg2t6i)
small
var(--_1tbg2t6j) var(--_1tbg2t6j)
medium
var(--_1tbg2t6k) var(--_1tbg2t6k)
large
var(--_1tbg2t6l) var(--_1tbg2t6l)
xlarge
var(--_1tbg2t6m) var(--_1tbg2t6m)

radius

none
var(--_1tbg2t6n) var(--_1tbg2t6n)
small
var(--_1tbg2t6o) var(--_1tbg2t6o)
medium
var(--_1tbg2t6p) var(--_1tbg2t6p)
large
var(--_1tbg2t6q) var(--_1tbg2t6q)
xlarge
var(--_1tbg2t6r) var(--_1tbg2t6r)
huge
var(--_1tbg2t6s) var(--_1tbg2t6s)
full
var(--_1tbg2t6t) var(--_1tbg2t6t)

borderWidth

standard
var(--_1tbg2t6u) var(--_1tbg2t6u)
thick
var(--_1tbg2t6v) var(--_1tbg2t6v)

transition

duration

fast
var(--_1tbg2t6w) var(--_1tbg2t6w)
standard
var(--_1tbg2t6x) var(--_1tbg2t6x)
slow
var(--_1tbg2t6y) var(--_1tbg2t6y)
xslow
var(--_1tbg2t6z) var(--_1tbg2t6z)

timing

linear
var(--_1tbg2t610) var(--_1tbg2t610)
ease
var(--_1tbg2t611) var(--_1tbg2t611)
easeIn
var(--_1tbg2t612) var(--_1tbg2t612)
easeOut
var(--_1tbg2t613) var(--_1tbg2t613)
easeInOut
var(--_1tbg2t614) var(--_1tbg2t614)

zIndex

noscript
var(--_1tbg2t615) var(--_1tbg2t615)
toaster
var(--_1tbg2t616) var(--_1tbg2t616)
toolTip
var(--_1tbg2t617) var(--_1tbg2t617)
blanket
var(--_1tbg2t618) var(--_1tbg2t618)