Fonts
| Design Token | Description | Value |
| –global–font-primary | The default UI font family | Monrope, sans-serif |
| –global–font-secondary | The default for headings | Poppins, sans-serif |
Font-size
| Design Token | Description | Value |
| –global–font-size-h1 | This is h1 font size | 46px |
| –global–font-size-h2 | This is h2 font size | 40px |
| –global–font-size-h3 | This is h3 font size | 34px |
| –global–font-size-h4 | This is h4 font size | 28px |
| –global–font-size-h5 | This is h5 font size | 22px |
| –global–font-size-h6 | This is h6 font size | 18px |
| –global–font-body | This is the base font size | 16px |
| –global–font-lead | This is the lead font size | 20px |
Line Height
| Design Token | Description | Value |
| –global–line-height-h1 | This is the default line height for h1 headings. | 60px |
| –global–line-height-h2 | This is the default line height for h2 headings | 52px |
| –global–line-height-h3 | This is the default line height for h3 headings | 44px |
| –global–line-height-h4 | This is the default line height for h4 headings | 36px |
| –global–line-height-h5 | This is the default line height for h5 headings | 33px |
| –global–line-height-h6 | This is the default line height for h6 headings | 27px |
| –global–line-height-body | This is the default line height for body text | 29px |
| –global–line-height-lead | This is the default line height for lead text. | 36px |
Space
| Design Token | Description | Value |
| –global–space-xs | This is an extra small space | 5px |
| –global–space-sm | This is a small space | 10px |
| –global–space-md | This is a medium space | 15px |
| –global–space-lg | This is a large space | 30px |
| –global–space-xl | This is an extra large space | 60px |
| –global–space-vertical | This is a vertical space most commonly used for buttons and inputs | 6px |
| –global–space-horizontal | This is a horizontal space most commonly used for buttons and inputs | 27px |
Radius
| Design Token | Description | Value |
| –global–border-radius | This is the default border radius most commonly used for buttons and inputs | 8px |
| –global–border-radius-pill | This is the default border radius most commonly used for pills | 100px |
| –global–border-radius-small | This is the default border radius for small UI elements | 6px |
Box Shadow
| Design Token | Description | Value |
| –global–box-shadow | Default box shadow. | 0px 1px 25px 0px rgb(104 103 103 / 15%) |
| –global–box-shadow-card | Default box shadow for card component. | 10px 10px 25px 0px rgb(104 103 103 / 20%) |
Colors
| Design Token | Description | Value |
| –global-color-accent | Used as primary button background and as a link color. | #3EC1D3 |
| –global-color-accent-alt | Used as second color that highlights the important things | #2B6CB0 |
| –global-color-strongest-text | Default text color. Used as the main text color throughout the UI | #1A202C |
| –global-color-strong-text | Contrast or text color used to create a design hierarchy with your text, borders etc. | #2D3748 |
| –global-color-medium-text | Contrast or text color used to create a design hierarchy with your text, borders etc. | #4A5568 |
| –global-color-subtle-text | The brightest Text color used to create a design hierarchy with your text, borders etc. | #718096 |
| –global-color-subtle-background | The darkest background color | #EDF2F7 |
| –global-color-lighter-background | The intermediate color background | #F7FAFC |
| –global-color-white | White Color | #FFFFFF |
| –global-border-color | The default border color | #F7FAFC |
Additional Colors
| Design Token | Description | Value |
| –global-color-accent-light | Used as primary button background and as a link color. | #CDEFF4 |
| –global-color-accent-soft | Used as second color that highlights the important things | #2B6CB0 |
| –global-color-accent-alt-light | Default text color. Used as the main text color throughout the UI | #FFEFD6 |
| –global-color-accent-alt-soft | Contrast or text color used to create a design hierarchy with your text, borders etc. | #FFFBF3 |