Font Size
Font size tokens for the design system
| Name | Preview | CSS Variable |
|---|---|---|
| 50x-large | 50x-large | --s3-font-size-50x-large: 100px; |
| heading-x-large | heading-x-large | --s3-font-size-heading-x-large: 60px; |
| heading-large | heading-large | --s3-font-size-heading-large: 50px; |
| 6x-large | 6x-large | --s3-font-size-6x-large: 40px; |
| 5x-large | 5x-large | --s3-font-size-5x-large: 35px; |
| 3x-large | 3x-large | --s3-font-size-3x-large: 28px; |
| heading | heading | --s3-font-size-heading: 1.5rem; |
| 2x-large | 2x-large | --s3-font-size-2x-large: 24px; |
| 1x-large | 1x-large | --s3-font-size-1x-large: 22px; |
| x-large | x-large | --s3-font-size-x-large: 20px; |
| lg | lg | --s3-font-size-lg: 1.125rem; |
| large | large | --s3-font-size-large: 16px; |
| regular | regular | --s3-font-size-regular: 14px; |
| x-medium | x-medium | --s3-font-size-x-medium: 13px; |
| medium | medium | --s3-font-size-medium: 12px; |
| small | small | --s3-font-size-small: 10px; |
| xsmall | xsmall | --s3-font-size-xsmall: 8px; |
Font Weight
Font weight tokens for the design system
| Name | Preview | CSS Variable | Font Family |
|---|---|---|---|
| Bold | Bold | --s3-font-bold | Nunito-Bold |
| Regular | Regular | --s3-font-regular | Nunito-Regular |
| Light | Light | --s3-font-light | Nunito-Light |
| Weight Heading | Weight Heading | --s3-font-weight-heading | 400 |
| Weight Light | Weight Light | --s3-font-weight-light | 100 |