Design systemTypography
One typeface, three weights and a nine-step scale from the Figma design system. Most interface text is 14px or 12px.
The source is the Typography board in the Figma design system. In code, sizes, line heights and classes live in src/ui/typography/typography.css.
Typeface
Poppins, in three weights. Use weight for emphasis within a size; do not reach for a bigger size to make something stand out.
Scale
This is the scale in the Figma design system (page "Typography"). Each style comes in Semibold, Medium and Regular, and is published as a Figma text style such as Body/H1/Medium.
Figma and code
The code classes in typography.css mostly match, with three differences:
| Figma | Code | What to do |
|---|---|---|
| Display 1 (24/36) | .text-display-2-* | Use .text-display-2-*. The names are off by one. |
| Display 2 (20/32) | .text-display-3-* | Use .text-display-3-*. |
| Not in Figma | .text-display-1-* (28/40) | Avoid until it is added to Figma. |
| H3 (14/22) | No class | Use .text-body-1-*; the values are the same. |
Two files in the code define these classes: src/ui/style/typography.css, loaded once for the whole app, and src/ui/typography/typography.css, imported by components. Only the second has the 28px display size. Renaming the classes to Figma's names would make the two line up; until then, use the mapping above.
As read from the code
The same scale as the code defines it, read from src/ui/typography/typography.css.
Which size to use
| Text | Size | Class |
|---|---|---|
| Page title | 20 or 24px (Figma Display 2 or Display 1) | .text-display-3-semibold or .text-display-2-semibold |
| Section title, card title | 16px (H2) | .text-h2-medium |
| Body, table cells, inputs, menu items | 14px (B1) | .text-body-1-regular |
| Labels, buttons, captions, secondary text | 12px (B2) | .text-body-2-regular |
The scale includes a 10px metadata step. Do not use it in new screens: 12px is the smallest size Petavue shows.
Rules
- Use sentence case everywhere: titles, buttons, menu items and table headers. Capital letters are for names only.
- Uppercase is allowed only for very short labels such as table header captions, at 12px with a little letter spacing.
- Keep line length under about 75 characters for anything people read in full.
- Numbers in tables use
font-variant-numeric: tabular-numsso columns line up.
.campaign-table__value {
font-size: 14px;
font-variant-numeric: tabular-nums;
}