Typography

The typeface is Plus Jakarta Sans, loaded by the app (see Styles, font and dark mode). Text is set with text styles: named combinations of size, line height and weight that match the text styles in Figma.

Text styles

There are 22. Use them through the Text component:

<Text as="h2" textStyle="heading4">Bookings</Text>
<Text textStyle="bodyS" tone="muted">12 departures this week</Text>

Each row shows the style name, then font size / line height and weight.

bodyL

18px / 26px, weight 400

body

16px / 24px, weight 400

bodyS

14px / 22px, weight 400

labelL

18px / 26px, weight 500

label

16px / 24px, weight 500

labelS

14px / 22px, weight 500

caption

13px / 20px, weight 400

captionStrong

13px / 20px, weight 500

overline

12px / 16px, weight 600

tiny

11px / 14px, weight 400

displayXL

72px / 80px, weight 800

displayL

60px / 68px, weight 800

displayM

48px / 56px, weight 700

heading1

40px / 48px, weight 700

heading2

32px / 40px, weight 700

heading3

28px / 36px, weight 600

heading4

24px / 32px, weight 600

heading5

20px / 28px, weight 600

heading6

18px / 26px, weight 600

subtitleL

18px / 26px, weight 600

subtitle

16px / 24px, weight 600

subtitleS

14px / 22px, weight 600

Font families

Token	Value	CSS variable	Notes
sans	Plus Jakarta Sans Variable, Plus Jakarta Sans, ui-sans-serif, system-ui, -apple-system, sans-serif	--su-fonts-sans
mono	JetBrains Mono, ui-monospace, SF Mono, Menlo, monospace	--su-fonts-mono

Font sizes

Each size has a line height with the same name.

Token	Value	CSS variable	Notes
3xs	11px	--su-font-sizes-3xs
2xs	12px	--su-font-sizes-2xs
xs	13px	--su-font-sizes-xs
sm	14px	--su-font-sizes-sm
md	16px	--su-font-sizes-md
lg	18px	--su-font-sizes-lg
xl	20px	--su-font-sizes-xl
2xl	24px	--su-font-sizes-2xl
3xl	28px	--su-font-sizes-3xl
4xl	32px	--su-font-sizes-4xl
5xl	40px	--su-font-sizes-5xl
6xl	48px	--su-font-sizes-6xl
7xl	60px	--su-font-sizes-7xl
8xl	72px	--su-font-sizes-8xl

Line heights

Token	Value	CSS variable	Notes
3xs	14px	--su-line-heights-3xs
2xs	16px	--su-line-heights-2xs
xs	20px	--su-line-heights-xs
sm	22px	--su-line-heights-sm
md	24px	--su-line-heights-md
lg	26px	--su-line-heights-lg
xl	28px	--su-line-heights-xl
2xl	32px	--su-line-heights-2xl
3xl	36px	--su-line-heights-3xl
4xl	40px	--su-line-heights-4xl
5xl	48px	--su-line-heights-5xl
6xl	56px	--su-line-heights-6xl
7xl	68px	--su-line-heights-7xl
8xl	80px	--su-line-heights-8xl
tight	1.25	--su-line-heights-tight
normal	1.5	--su-line-heights-normal

Font weights

Token	Value	CSS variable	Notes
regular	400	--su-font-weights-regular
medium	500	--su-font-weights-medium
semibold	600	--su-font-weights-semibold
bold	700	--su-font-weights-bold
extrabold	800	--su-font-weights-extrabold