Tokens

Design tokens are the backbone of the design system. They are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or REM values for spacing) in order to maintain a scalable and consistent visual system for web development.

Spacing

  rem px
0.3125rem 5px
0.9375rem 15px
1.875rem 30px
3.75rem 60px
7.5rem 120px

Font Sizes

  rem px
0.75rem 12px
0.875rem 14px
1rem 16px
1.25rem 20px
1.375rem 22px
2.25rem 36px

Font Families

"Source Sans Pro", sans-serif
"Roboto", sans-serif

Font Weights

300
400
600

Line Height

1
1.3
1.375
1.4
1.545454546

Borders

1px
3px
3px

Letter Spacing

0
1px