Typography
Roles are named by what the text is for; each fixes family, weight, size and line height. Components, VelioBot and Figma text styles use the same roles. The scale below feeds them and is never used directly.
Roles
| Role | Sample | Spec | Use |
|---|---|---|---|
display--v-type-display | £11.73 | Nohemi Bold · 34 / 41 · +2% | Hero amounts and page titles. |
display-sm--v-type-display-sm | Priya's birthday | Nohemi Bold · 28 / 34 · +2% | Large page and section headings (docs, onboarding). |
headline--v-type-headline | £11.73 | Nohemi Semibold · 22 / 28 · +2% | Large amounts and big headings. |
title--v-type-title | Priya's birthday | Nohemi Semibold · 20 / 25 · +2% | Card, sheet and section titles; tabs. |
subtitle--v-type-subtitle | Priya's birthday | Satoshi Bold · 17 / 22 | Lead lines, large list titles, totals. |
body--v-type-body | Priya's birthday | Satoshi Medium · 17 / 26 | Body copy, chat bubbles, inputs. |
body-sm--v-type-body-sm | Priya's birthday | Satoshi Medium · 15 / 22 | Secondary copy: key-value labels, steps, toasts, chips. |
label--v-type-label | Priya's birthday | Satoshi Bold · 15 / 20 | Buttons, list titles, values, segmented tabs, tile titles. |
label-lg--v-type-label-lg | Priya's birthday | Satoshi Bold · 16 / 21 | Large buttons. |
label-sm--v-type-label-sm | Priya's birthday | Satoshi Bold · 13 / 18 | Small buttons, avatar initials, compact controls. |
caption--v-type-caption | Priya's birthday | Satoshi Medium · 13 / 18 | Captions, times, helper text. |
caption-sm--v-type-caption-sm | Priya's birthday | Satoshi Medium · 12 / 16 | Supporting lines in lists and tiles, legends. |
tag--v-type-tag | Priya's birthday | Satoshi Bold · 12 / 16 | Badges, field labels, message authors. |
overline--v-type-overline | Priya's birthday | Satoshi Bold · 12 / 16 · +8% · caps | Small uppercase labels above content. |
micro--v-type-micro | Priya's birthday | Satoshi Bold · 11 / 13 | Calendar headers, image labels, tiny counts. |
mono--v-type-mono | VEL-2048 · 12:30 | ui-monospace Regular · 13 / 18 | IDs, codes and other fixed-width text. |
Roles with letter spacing or case have companion variables: font: var(--v-type-title); letter-spacing: var(--v-type-title-tracking). npm run check fails if one is missing.
In Gen UI
VelioBot's Text variants are roles: display, headline, title, subtitle, body, body-sm, label, caption, overline, mono.
Scale
Font sizes and their fixed line heights. Roles point here; components never do.
| Size | Line height | Roles |
|---|---|---|
11 | 13 | micro |
12 | 16 | caption-sm, tag, overline |
13 | 18 | label-sm, caption, mono |
15 | 20 | body-sm, label |
16 | 21 | label-lg |
17 | 22 | subtitle, body |
20 | 25 | title |
22 | 28 | headline |
28 | 34 | display-sm |
34 | 41 | display |
Tokens
| CSS | Value | Notes |
|---|---|---|
--v-font-display | "Nohemi", "Satoshi", system-ui, sans-serif | Titles. Nohemi Medium (500), Semibold (600) and Bold (700). |
--v-font-body | "Satoshi", system-ui, sans-serif | Everything else. Satoshi variable; the scale uses Medium (500), Semibold (600) and Bold (700). |
--v-font-mono | ui-monospace, "Menlo", monospace | |
--v-font-weight-regular | 400 | |
--v-font-weight-medium | 500 | |
--v-font-weight-semibold | 600 | |
--v-font-weight-bold | 700 | |
--v-letter-spacing-none | 0em | |
--v-letter-spacing-display | 0.02em | Nohemi titles: +2%. |
--v-letter-spacing-caps | 0.08em | Uppercase labels: +8%. |
--v-type-display | var(--v-font-weight-bold) var(--v-font-size-34)/var(--v-line-height-34) var(--v-font-display) | Hero amounts and page titles. |
--v-type-display-sm | var(--v-font-weight-bold) var(--v-font-size-28)/var(--v-line-height-28) var(--v-font-display) | Large page and section headings (docs, onboarding). |
--v-type-headline | var(--v-font-weight-semibold) var(--v-font-size-22)/var(--v-line-height-22) var(--v-font-display) | Large amounts and big headings. |
--v-type-title | var(--v-font-weight-semibold) var(--v-font-size-20)/var(--v-line-height-20) var(--v-font-display) | Card, sheet and section titles; tabs. |
--v-type-subtitle | var(--v-font-weight-bold) var(--v-font-size-17)/var(--v-line-height-17) var(--v-font-body) | Lead lines, large list titles, totals. |
--v-type-body | var(--v-font-weight-medium) var(--v-font-size-17)/var(--v-line-height-17-relaxed) var(--v-font-body) | Body copy, chat bubbles, inputs. |
--v-type-body-sm | var(--v-font-weight-medium) var(--v-font-size-15)/var(--v-line-height-15-relaxed) var(--v-font-body) | Secondary copy: key-value labels, steps, toasts, chips. |
--v-type-label | var(--v-font-weight-bold) var(--v-font-size-15)/var(--v-line-height-15) var(--v-font-body) | Buttons, list titles, values, segmented tabs, tile titles. |
--v-type-label-lg | var(--v-font-weight-bold) var(--v-font-size-16)/var(--v-line-height-16) var(--v-font-body) | Large buttons. |
--v-type-label-sm | var(--v-font-weight-bold) var(--v-font-size-13)/var(--v-line-height-13) var(--v-font-body) | Small buttons, avatar initials, compact controls. |
--v-type-caption | var(--v-font-weight-medium) var(--v-font-size-13)/var(--v-line-height-13) var(--v-font-body) | Captions, times, helper text. |
--v-type-caption-sm | var(--v-font-weight-medium) var(--v-font-size-12)/var(--v-line-height-12) var(--v-font-body) | Supporting lines in lists and tiles, legends. |
--v-type-tag | var(--v-font-weight-bold) var(--v-font-size-12)/var(--v-line-height-12) var(--v-font-body) | Badges, field labels, message authors. |
--v-type-overline | var(--v-font-weight-bold) var(--v-font-size-12)/var(--v-line-height-12) var(--v-font-body) | Small uppercase labels above content. |
--v-type-micro | var(--v-font-weight-bold) var(--v-font-size-11)/var(--v-line-height-11) var(--v-font-body) | Calendar headers, image labels, tiny counts. |
--v-type-mono | var(--v-font-weight-regular) var(--v-font-size-13)/var(--v-line-height-13) var(--v-font-mono) | IDs, codes and other fixed-width text. |