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 Sep 28, 2026 by Juan Pablo Turina
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. |
Levels
Five roles and three variants, named by what the text does. Each one is built from the scale above, so it never leaves it.
| Class | Size / Line | Preview | Use for |
|---|---|---|---|
| t-page | 30/36 · 600 · tracking-tight | Decisions | The one title of a page. |
| t-block | 16/24 · 600 | Why it stopped | The title of a block or a card inside the page. |
| t-body | 14/20 · 400 | Refund R$ 780 on order 88213 | Running text, table cells, descriptions. |
| t-body-m | 14/20 · 500 | Payment age 2 days | Body that needs a little weight: a label, a value people scan for. |
| t-meta | 12/16 · 400 | Secondary lines: eyebrows, timestamps, sources. | |
| t-meta-m | 12/16 · 500 | A secondary line with weight: a status, a short tag. | |
| t-figure | 30/30 · 600 · tracking-tight · tabular | 93.2% | The one number a card or an answer is about. |
| t-figure-sm | 24/32 · 600 · tracking-tight · tabular | R$ 12,900 | A number in a row of several, or in a tighter space. |
A level names a role, not a size.
Reach for a level when the text is doing one of these five jobs; the raw scale stays for everything else. t-page is exactly the PageHeader title and t-block is exactly Title default, so both paths render the same.
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 ($€£¥)