Typeface
We use Atlassian Sans for all headings and body copy within our product.
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 | (deprecated) | font size (rem) | font size (px) | line height | line height (px) | letter spacing (px) |
|---|---|---|---|---|---|---|
body-sm | small | 0.75rem | 12px | 1.5 | 18px | normal |
body-md | medium | 0.875rem | 14px | 1.57 | 21px | normal |
body-lg | large | 1.125rem | 18px | 1.44 | 25px | -0.2px |
heading-sm | xlarge | 1.5rem | 24px | 1.16 | 27px | -0.2px |
heading-md | xxlarge | 2rem | 32px | 1.125 | 36px | -0.5px |
heading-lg | xxxlarge | 3rem | 48px | 1.16 | 55px | -1.2px |
Weights
Book weight will be renamed as regular weight to match Atlassian Design System.
| weight | value |
|---|---|
regular | 400 |
medium | 500 |
bold | 653 |
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 | regular | used for body text |
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">.