Typeface
Sizes
Please use the naming for sizes from the first column. We are in the process of deprecating our naming from the second column to better align with Atlassian Design System.
| size | size (deprecated) | font size rem | line height | font size px | line height px | letter spacing px |
|---|---|---|---|---|---|---|
body-sm | small | 0.75rem | 1.5 | 12px | 18px | calc(0.6px - 0.05em) |
body-md | medium | 0.875rem | 1.6 | 14px | 22px | calc(0.6px - 0.05em) |
body-lg | large | 1.125rem | 1.45 | 18px | 26px | calc(0.6px - 0.05em) |
heading-sm | xlarge | 1.5rem | 1.35 | 24px | 32px | calc(0.6px - 0.05em) |
heading-md | xxlarge | 2rem | 1.2 | 32px | 38px | calc(0.6px - 0.05em) |
heading-lg | xxxlarge | 3rem | 1.15 | 48px | 55px | calc(0.6px - 0.05em) |
Weights
Medium is being introduced as a new weight for components and alongside icons. Book weight will be renamed as regular weight to match Atlassian Design System.
| name | value |
|---|---|
book | 400 |
regular | 400 |
medium | 500 |
bold | 700 |
Semantic variants
Most text use cases can be covered by a specific variant.
| variant | size | font weight | usage |
|---|---|---|---|
mainTitle | heading-md | bold | used for the main title in a view, this variant should be used only once per view |
title | body-lg | bold | used for titles |
body | body-md | book | used for body text |
Color
Use body color as default text color. Use bodyDimmed color to de-emphasize text.
Line length
To improve legability, limit paragraph lines to 50 characters. Use CSS ch unit: <Container maxWidth="50ch">.