Typography
Manrope carries the titles, labels and reading text. Geist Mono carries code and identifiers. Typography exposes the type scale through boolean roles; components own the typography of their labels.
Font families
Register the faces in the application and pass them to ThemeProvider fonts. The package ships no font files; the system face stands in until the configured family is available. Nested providers inherit the registered faces.
Sans serif
Manrope
--font-sans
The quick brown fox jumps over the lazy dog 0123456789
The docs register weights 400, 500, 600, 700 and 800.
Monospace
Geist Mono
--font-mono
const id = "01HZ73K"
For code, identifiers and copyable values.
Type scale
Each sample uses the real Typography role. Pick one role per element, such as h2 or body; the role owns its size, leading and default weight.
Display
Sphinx of black quartz, judge my vow.
<Typography display>
24 / 27 · bold
Hero titles. One per screen, at most.
H1
Sphinx of black quartz, judge my vow.
<Typography h1>
20 / 25 · bold
Top-level page titles.
H2
Sphinx of black quartz, judge my vow.
<Typography h2>
17 / 22 · bold
Major page sections, dialog titles.
H3
Sphinx of black quartz, judge my vow.
<Typography h3>
16 / 20 · bold
Subsections, sheet and drawer titles.
H4
Sphinx of black quartz, judge my vow.
<Typography h4>
15 / 20 · bold
In-app page titles, card titles.
H5
Sphinx of black quartz, judge my vow.
<Typography h5>
14 / 19 · bold
Section and card headings, form section labels.
Lead
Sphinx of black quartz, judge my vow.
<Typography lead>
14 / 21 · medium
Lead paragraphs, identity names.
Body
Sphinx of black quartz, judge my vow.
<Typography body>
12.5 / 19 · medium
Default reading text.
Small
Sphinx of black quartz, judge my vow.
<Typography small>
11.5 / 17 · semibold · muted
Secondary text, helpers.
Tiny
Sphinx of black quartz, judge my vow.
<Typography tiny>
11 / 15 · semibold · muted
Metadata, timestamps, labels.
Helper roles
Muted text, captions, inline code and bare monospace values are also named roles.
Muted
Sphinx of black quartz, judge my vow.
<Typography muted>
De-emphasised body text.
Caption
Section label
<Typography caption>
Eyebrows, uppercase section labels (10/13 bold, 16% tracking).
Code
--primary
<Typography code>
Inline code, tokens, IDs (muted pill).
Mono
01HZK7M8N9P0Q1R2
<Typography mono>
Monospace values, no fill.
Weights
Weight is an independent boolean axis. The four public weight props below combine with any role. A component such as Stats may use another registered weight in its own skin; that does not add a Typography prop.
Patterns in use
Use the component that owns the content instead of rebuilding its label or value typography around it.
Page header
Identities
Manage the people in your workspace.
Active sessions
1,204
+18 today
Identifier
rachel.chen@example.com
ID
01HZK7M8N9P0Q1R2
Inline code
The primary role identifies selection and links. Primary buttons read the action role.