typography

fontFamilies

primary
fontFamily
'IBM Plex Sans', Helvetica, Arial, sans-serif

'IBM Plex Sans', Helvetica, Arial, sans-serif

secondary
fontFamily
Degular, Helvetica, Arial, sans-serif

Degular, Helvetica, Arial, sans-serif

fontWeights

regular
fontWeight
400

400

light
fontWeight
300

300

bold
fontWeight
700

700

medium
fontWeight
500

500

fontSizes

75
dimension
0.75rem
87
dimension
0.875rem
100
dimension
1rem
125
dimension
1.25rem
150
dimension
1.5rem
175
dimension
1.75rem
200
dimension
2rem
250
dimension
2.5rem
300
dimension
3rem
350
dimension
3.5rem
400
dimension
4rem
base
dimension
16px

lineHeights

primary
dimension
150%
secondary
dimension
120%

letterSpacing

0
dimension
0%
2
dimension
2%

paragraphSpacing

100
dimension
1rem

colors

base

black
color
#000000
#000000
white
color
#ffffff
#ffffff

red

100
color
#f9ebeb
#f9ebeb
200
color
#e4acab
#e4acab
300
color
#d98988
#d98988
400
color
#c95755
#c95755
500
color
#be3432
#be3432
600
color
#952827
#952827
700
color
#6d1e1d
#6d1e1d
800
color
#451312
#451312

magenta

100
color
#f1e8ea
#f1e8ea
200
color
#c69fa7
#c69fa7
300
color
#ae7783
#ae7783
400
color
#8c3c4d
#8c3c4d
500
color
#741429
#741429
600
color
#510e1d
#510e1d
700
color
#390a14
#390a14
800
color
#27070e
#27070e

teal

100
color
#eaeded
#eaeded
200
color
#a7b4b7
#a7b4b7
300
color
#829599
#829599
400
color
#4d686d
#4d686d
500
color
#28494f
#28494f
600
color
#1c3337
#1c3337
700
color
#111f22
#111f22
800
color
#0c1618
#0c1618

cyan

100
color
#f5f9f9
#f5f9f9
200
color
#e9f1f2
#e9f1f2
300
color
#d6e4e6
#d6e4e6
400
color
#bdd4d7
#bdd4d7
500
color
#8fb5bc
#8fb5bc
600
color
#669aa3
#669aa3
700
color
#4d7880
#4d7880
800
color
#395a60
#395a60

gray

100
color
#f2f2ec
#f2f2ec
200
color
#d4d2ce
#d4d2ce
300
color
#a5a199
#a5a199
400
color
#837e77
#837e77
500
color
#585450
#585450
600
color
#3e3b38
#3e3b38
700
color
#2b2927
#2b2927
800
color
#1b1918
#1b1918

yellow

100
color
#fdf9ee
#fdf9ee
200
color
#f8e4ba
#f8e4ba
300
color
#f5d99e
#f5d99e
400
color
#f1c974
#f1c974
500
color
#eebe57
#eebe57
600
color
#e8a517
#e8a517
700
color
#ba8512
#ba8512
800
color
#8e6610
#8e6610

green

100
color
#eaf0eb
#eaf0eb
200
color
#a8bfad
#a8bfad
300
color
#83a58b
#83a58b
400
color
#4e7e59
#4e7e59
500
color
#2a6437
#2a6437
600
color
#1d4626
#1d4626
700
color
#122b18
#122b18
800
color
#0b190e
#0b190e

blue

100
color
#e8eef2
#e8eef2
200
color
#a1b9cb
#a1b9cb
300
color
#7a9cb6
#7a9cb6
400
color
#407296
#407296
500
color
#195581
#195581
600
color
#123b5a
#123b5a
700
color
#0c2a40
#0c2a40
800
color
#071927
#071927

purple

500
color
#775B92
#775B92

spacing

25
dimension
0.25rem
50
dimension
0.5rem
75
dimension
0.75rem
100
dimension
1rem
150
dimension
1.5rem
200
dimension
2rem
250
dimension
2.5rem
300
dimension
3rem
350
dimension
3.5rem
400
dimension
4rem
450
dimension
4.5rem
500
dimension
5rem
550
dimension
5.5rem
600
dimension
6rem
650
dimension
6.5rem
1000
dimension
10rem
1250
dimension
12.5rem

animation

duration

instant
duration
0
ultra-fast
duration
150ms
fast
duration
300ms
moderate-fast
duration
450ms
moderate-slow
duration
600ms
slow
duration
750ms
ultra-slow
duration
900ms

easing

standard
cubicBezier
cubic-bezier(.42,0,.58,1)
entrance
cubicBezier
cubic-bezier(0,0,.58,1)
exit
cubicBezier
cubic-bezier(.42,0,1,1)
linear
cubicBezier
cubic-bezier(0,0,1,1)