Foundations
Typography
Lato at two weights, five sizes in production use, and 13 named text styles. Every piece of text in the product should match one of these styles — if none fits, the answer is a new style, not a one-off override.
Figma source: ★ TYPOGRAPHY ↗The typeface
Lato carries the entire interface. Regular (400) and Bold (700) are the only weights; there is no medium, semibold or light in the system, and italic is used only inside user-authored rich text.
Cayuse Research Suite — Lato Regular
Cayuse Research Suite — Lato Bold
--font-family-primary:
"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;The Figma typography artboards document the size ramp in a table labelled with IBM Plex (“Plex 12, Plex 14, Plex 16…”) alongside a rem conversion, while every text style actually uses Lato. The Plex labels look like a leftover from an earlier exploration. The ramp values are correct; only the family name in that table is wrong. Worth cleaning up so nobody implements Plex from it.
Type styles
Thirteen named styles. The HTML column is the element each maps to by default — documented here because the Figma descriptions specify it and it is easy to lose in translation.
| Style | Size / line height | Weight | HTML | Use for |
|---|---|---|---|---|
| Page Title | 24 / 28 | Bold | <h1> | The single main title of a view, in the Page Heading pattern. Should match <title>. |
| Section Heading | 20 / 28 | Bold | <h2> | Headings of sections within a view, including tab panel headings. |
| Subheading | 16 / 20 | Regular | <h3> | Secondary line beneath a page title. |
| Body | 14 / 16 | Regular | <p>, controls | The base style. Most interface text. |
| Paragraph | 14 / 20 | Regular | <p> | Running prose. Same size as Body with looser leading for reading. |
| Label | 14 / 16 | Bold | <label> | Form labels and button text. |
| Captions | 12 / 14 | Regular | — | Help text, descriptive captions, error messages. |
| Table Header | 14 / 16 | Bold | <th> | Data grid column headers. |
| Table Text | 14 / 16 | Regular | <td> | Data grid cells. |
| Link | 14 / 16 underlined | Regular | <a> | Links. Pair with a colour token — the style carries no colour. |
| Bulleted List | 14 / 24 | Regular | <ul> | Unordered lists. |
| Numbered List | 14 / 24 | Regular | <ol> | Ordered lists. |
| Icon | 14 / 16 | Solid | — | Font Awesome glyphs set inline with text. |
Heading hierarchy
Type style and heading level are separate decisions that must agree. A Section
Heading style on an <h4> is a bug even though it looks right.
When to use it
- Exactly one
<h1>per view, carrying the Page Title style. - Nest heading levels without skipping —
h1 → h2 → h3. - Match the Page Title text to the document
<title>so browser tabs and history read sensibly. - Use a heading when the text introduces a region a screen-reader user would want to jump to.
When not to use it
- Do not pick a heading level for its size — set the level for structure and the style for appearance.
- Do not use bold body text as a substitute for a heading; it creates no landmark.
- Do not skip from
h1toh3becauseh2looks too big. - Do not put a Page Title style on more than one element in a view.
Line length and leading
Body (14/16) and Paragraph (14/20) are the same size and differ only in leading. That difference is the whole point: 16px leading is right for a control label or a table cell, and too tight for anything a person reads a sentence at a time.
- Use Body inside controls, cells and single-line content.
- Use Paragraph for any run of prose longer than one line.
- Cap running prose at roughly 70 characters per line. Beyond that the eye loses the line return, regardless of leading.