Foundations
Typography
Geist Sans is the only type family used in the Yuno Dashboard. One family across headings, body, labels, amounts, IDs and tokens — no monospace anywhere in product. Type scale is Tailwind default.
Updated Jul 8, 2026 by Leonardo Posada
Type family
One family for the entire Dashboard.
Aa
Geist Sans
The only type family in the Yuno Dashboard.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ($€£¥)
Type scale
Only sizes from the Tailwind default scale. Don't invent 11, 13, 15, 17.
| Class | Size / Line | Preview | Use for |
|---|---|---|---|
| text-xs | 12px / 16px | The quick brown fox | Chips, captions, hints, timestamps. |
| text-sm | 14px / 20px | The quick brown fox | Default body. Labels, buttons. |
| text-base | 16px / 24px | The quick brown fox | Long reading, doc paragraphs. |
| text-lg | 18px / 28px | The quick brown fox | Sub-headings, small KPIs. |
| text-xl | 20px / 28px | The quick brown fox | Card titles, section headers. |
| text-2xl | 24px / 32px | The quick brown fox | Section headers. |
| text-3xl | 30px / 36px | The quick brown fox | Page titles. |
| text-4xl | 36px / 40px | The quick brown fox | Hero titles. |
Weights
Aa
font-normal · 400
Body text, descriptions, table cells.
Aa
font-medium · 500
Labels, buttons, nav items, mild emphasis.
Aa
font-semibold · 600
Card titles, dialog titles, KPIs.
Aa
font-bold · 700
Section titles — the main dividers inside a page.
Usage
Do
- Geist Sans for everything in the Dashboard — headings, body, labels, amounts, IDs.
- Use text-sm as default body — it's the Dashboard standard.
- Use font-bold for section titles, font-semibold for card / dialog titles and KPIs.
- Apply tracking-tight on sizes ≥ text-xl to avoid floating letters.
Don't
- Don't use Geist Mono (or any monospace) in Dashboard screens.
- Don't use custom sizes (11, 13, 15, 17) — they fall outside the scale.
- Don't mix multiple weights on the same line.
- Don't skip the hierarchy — Regular / Medium / Semibold / Bold each have a role.
Font smoothing
Antialiased everywhere.
The app body applies -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale. Without this, text looks thicker than in Figma.
Not used at Yuno
Not used at Yuno
Geist Mono (or any monospace) is not used in the Dashboard.
The Yuno Dashboard commits to a single sans-serif family. Amounts, IDs, tokens and card numbers all live in Sans and align naturally with the rest of the UI. Monospace carries a technical / developer connotation that doesn't fit a consumer-facing payments product. If you see mono in this kit's UI it's only because we're displaying code snippets in documentation — inside product screens, use Sans always.
Not used at Yuno
Aa
Geist Mono
var(--primary)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ($€£¥)