Typography and scale
One typeface, one type scale and a 4 px grid.
Type scale
The typeface is Inter. Style names follow the Apple scale so they feel familiar on iOS. body is the default in the app, compact in the dashboard. The smallest text is 11 px.
| Token | Size / line height | Weight | Used for |
|---|---|---|---|
--sui-text-display | 34 / 41 | 700 | Large numbers and opening titles |
--sui-text-title-1 | 28 / 34 | 700 | Page titles |
--sui-text-title-2 | 22 / 28 | 600 | Section titles |
--sui-text-title-3 | 20 / 26 | 600 | Dialog and sheet titles |
--sui-text-headline | 17 / 24 | 600 | Card titles |
--sui-text-body | 17 / 24 | 400 | Main text in the app |
--sui-text-callout | 16 / 22 | 400 | Form text on touch |
--sui-text-subheadline | 15 / 20 | 400 | List rows, large button labels |
--sui-text-compact | 14 / 20 | 400 | Main text in the dashboard |
--sui-text-footnote | 13 / 18 | 400 | Supporting text, field labels |
--sui-text-caption-1 | 12 / 16 | 400 | Small notes |
--sui-text-caption-2 | 11 / 14 | 500 | Tags and eyebrows |
Spacing
A 4 px grid. The token number times four is its value.
| Token | Value | Token | Value |
|---|---|---|---|
--sui-space-0-5 | 2 | --sui-space-6 | 24 |
--sui-space-1 | 4 | --sui-space-8 | 32 |
--sui-space-2 | 8 | --sui-space-10 | 40 |
--sui-space-3 | 12 | --sui-space-12 | 48 |
--sui-space-4 | 16 | --sui-space-16 | 64 |
--sui-space-5 | 20 |
Radius
| Token | Value | Used for |
|---|---|---|
--sui-radius-xs | 6 | Checkbox |
--sui-radius-sm | 8 | Menu items, tooltips |
--sui-radius-md | 12 | Fields |
--sui-radius-lg | 16 | Alerts, popovers |
--sui-radius-xl | 20 | Choice cards, tab track |
--sui-radius-2xl | 24 | Cards, dialogs |
--sui-radius-3xl | 28 | Bottom sheets |
--sui-radius-full | 999 | Buttons, chips, badges |
Control sizes
Buttons, fields, selects and chips share the same heights, so they line up when placed side by side.
| Token | Value | Used for |
|---|---|---|
--sui-control-xs | 28 | Table row actions |
--sui-control-sm | 32 | Toolbars and filters |
--sui-control-md | 40 | Desktop default |
--sui-control-lg | 48 | Touch default |
--sui-hit-min | 44 | Minimum touch target |