Design Tokens

Colors

TokenValue
Token:
$color-black

Value:
#000000
Token:
$color-black-0

For animation purposes

Value:
rgba(0, 0, 0, 0)
Token:
$color-black-03

Value:
rgba(0, 0, 0, 0.03)
Token:
$color-black-06

Value:
rgba(0, 0, 0, 0.06)
Token:
$color-black-10

Value:
rgba(0, 0, 0, 0.1)
Token:
$color-black-20

Value:
rgba(0, 0, 0, 0.2)
Token:
$color-black-30

Value:
rgba(0, 0, 0, 0.3)
Token:
$color-black-40

Value:
rgba(0, 0, 0, 0.4)
Token:
$color-black-50

Value:
rgba(0, 0, 0, 0.5)
Token:
$color-black-60

Value:
rgba(0, 0, 0, 0.6)
Token:
$color-black-70

Value:
rgba(0, 0, 0, 0.7)
Token:
$color-black-80

Value:
rgba(0, 0, 0, 0.8)
Token:
$color-black-90

Value:
rgba(0, 0, 0, 0.9)
Token:
$color-brand-primary

Value:
#295de5
Token:
$color-brand-secondary

Value:
#6422eb
Token:
$color-brand-tertiary

Value:
#501bbc
Token:
$color-dark-gray

Value:
#565656
Token:
$color-darker-gray

Value:
#2a2a2a
Token:
$color-disabled

Value:
#ababab
Token:
$color-divider

Value:
rgba(0, 0, 0, 0.1)
Token:
$color-divider-dark

Value:
rgba(0, 0, 0, 0.2)
Token:
$color-divider-light

Value:
rgba(255, 255, 255, 0.1)
Token:
$color-gray

Value:
#818181
Token:
$color-light-gray

Value:
#ababab
Token:
$color-lighter-gray

Value:
#d5d5d5
Token:
$color-lightest-gray

Value:
#f4f4f4
Token:
$color-muted

Value:
#d5d5d5
Token:
$color-ui-alert

Value:
#d94011
Token:
$color-ui-error

Value:
#d10034
Token:
$color-ui-primary

Value:
#295de5
Token:
$color-ui-success

Value:
#00a67f
Token:
$color-ui-warning

Value:
#d10034
Token:
$color-very-muted

Value:
#f4f4f4
Token:
$color-white

Value:
#ffffff
Token:
$color-white-0

For animation purposes

Value:
rgba(255, 255, 255, 0)
Token:
$color-white-03

Value:
rgba(255, 255, 255, 0.03)
Token:
$color-white-06

Value:
rgba(255, 255, 255, 0.06)
Token:
$color-white-10

Value:
rgba(255, 255, 255, 0.1)
Token:
$color-white-20

Value:
rgba(255, 255, 255, 0.2)
Token:
$color-white-30

Value:
rgba(255, 255, 255, 0.3)
Token:
$color-white-40

Value:
rgba(255, 255, 255, 0.4)
Token:
$color-white-50

Value:
rgba(255, 255, 255, 0.5)
Token:
$color-white-60

Value:
rgba(255, 255, 255, 0.6)
Token:
$color-white-70

Value:
rgba(255, 255, 255, 0.7)
Token:
$color-white-80

Value:
rgba(255, 255, 255, 0.8)
Token:
$color-white-90

Value:
rgba(255, 255, 255, 0.9)

Fonts

TokenValue
Token:
$font-family-monospace

Value:
Harmonium
'Montserrat', sans-serif
Token:
$font-family-serif

Value:
Harmonium
'Georgia', serif
Token:
$font-family-sans-serif

Value:
Harmonium
'Roboto', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif

Font Sizes

TokenValue
Token:
$font-size-tiny

the smallest size of the font

Value:
Harmonium
0.474rem
Token:
$font-size-smaller

a smaller font size

Value:
Harmonium
0.711rem
Token:
$font-size-small

the small size of the font

Value:
Harmonium
1.067rem
Token:
$font-size-medium

the medium size of the font

Value:
Harmonium
1.6rem
Token:
$font-size-large

the large size of the font

Value:
Harmonium
2.4rem
Token:
$font-size-larger

a larger font size

Value:
Harmonium
3.6rem
Token:
$font-size-largest

the largest size of the font

Value:
Harmonium
5.4rem
Token:
$font-size-base

the base size of the font

Value:
Harmonium
1.6rem

Border Radius

TokenValue
Token:
$border-radius-small

Value:
3px
Token:
$border-radius-rounded

Value:
100000px

Z-Index

TokenValue
Token:
$z-index-above-everything

Value:
1000
Token:
$z-index-above-most

Value:
10
Token:
$z-index-above

Value:
1
Token:
$z-index-default

Value:
0
Token:
$z-index-below

Value:
-1
Token:
$z-index-below-most

Value:
-10
Token:
$z-index-below-everything

Value:
-1000

Spacing

TokenValue
Token:
$spacing-tiny

Value:
6px
Token:
$spacing-small

Value:
12px
Token:
$spacing-medium

Value:
24px
Token:
$spacing-large

Value:
48px
Token:
$spacing-larger

Value:
72px
Token:
$spacing-base

Value:
24px

Shadows

TokenValue
Token:
$box-shadow-default

Value:
0 1px 4px 0 rgba(0, 0, 0, 0.3)
Token:
$box-shadow-hover

Value:
0 2px 6px 0 rgba(0, 0, 0, 0.5)
Token:
$box-shadow-active

Value:
0 1px 2px 0 rgba(0, 0, 0, 0.3)

Font Weights

TokenValue
Token:
$font-weight-light

Value:
The quick brown fox jumped over the lazy dog.
300
Token:
$font-weight-normal

Value:
The quick brown fox jumped over the lazy dog.
400
Token:
$font-weight-bold

Value:
The quick brown fox jumped over the lazy dog.
700