These font tokens serve as a standardized way to reference fonts in UI Kit React,
ensuring consistency and efficiency in design implementation.
Core Font Tokens
Family
| | Name | Value |
| Aa |
--ui-kit-font-family-mono | "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace |
| Aa |
--ui-kit-font-family-sans | "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| Aa |
--ui-kit-font-family-system | -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
Size
| | Name | Value |
| Aa |
--ui-kit-font-size-sm | 12px |
| Aa |
--ui-kit-font-size-base | 13px |
| Aa |
--ui-kit-font-size-lg | 14px |
| Aa |
--ui-kit-font-size-xl | 15px |
Weight
| | Name | Value |
| Aa |
--ui-kit-font-weight-light | 300 |
| Aa |
--ui-kit-font-weight-regular | 400 |
| Aa |
--ui-kit-font-weight-medium | 500 |
| Aa |
--ui-kit-font-weight-bold | 700 |
Semantic Font Tokens
Heading lg
| | Name | Value |
| Aa |
--ui-kit-font-heading-lg-family | "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| Aa |
--ui-kit-font-heading-lg-size | 15px |
| Aa |
--ui-kit-font-heading-lg-weight | 500 |
Heading md
| | Name | Value |
| Aa |
--ui-kit-font-heading-md-family | "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| Aa |
--ui-kit-font-heading-md-size | 14px |
| Aa |
--ui-kit-font-heading-md-weight | 500 |
Heading sm
| | Name | Value |
| Aa |
--ui-kit-font-heading-sm-family | "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| Aa |
--ui-kit-font-heading-sm-size | 13px |
| Aa |
--ui-kit-font-heading-sm-weight | 500 |
Body md strong
| | Name | Value |
| Aa |
--ui-kit-font-body-md-strong-family | "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| Aa |
--ui-kit-font-body-md-strong-size | 13px |
| Aa |
--ui-kit-font-body-md-strong-weight | 500 |
Body md
| | Name | Value |
| Aa |
--ui-kit-font-body-md-family | "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| Aa |
--ui-kit-font-body-md-size | 13px |
| Aa |
--ui-kit-font-body-md-weight | 400 |
Body sm
| | Name | Value |
| Aa |
--ui-kit-font-body-sm-family | "Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| Aa |
--ui-kit-font-body-sm-size | 12px |
| Aa |
--ui-kit-font-body-sm-weight | 400 |