Typography
One sans for every word, mono for what a person copies.
Font
Ship agents you can see
One sans for every role, mono for what a person copies.
0123456789 1,284 98.2% 12:04:09
Set in Quartz Sans and Quartz Mono, which are not bundled with Quartz. An installed Quartz renders the platform UI sans and monospace instead, at their normal width.
Scale
- Display XL, 80pxShip agents
- Display large, 60pxEvery run
- Display, 40pxPrompt releases
- Heading large, 32pxAPI keys
- Heading, 24pxRecent runs
- Heading small, 20pxModel settings
- Body large, 16pxAgents call tools, tools call models, and every call leaves a trace you can open.
- Body, 14pxThe eval finished in 42 seconds and passed 196 of 200 tickets.
- Body small, 13pxStarted 3 minutes ago by the release agent.
- Button, 16px
- Label, 14pxAgent
- Label small, 12pxLast run 12:04:09
- Code, 13pxawait run.wait({timeout: 30_000})
- Code small, 12pxrun_01J9ZK4E
- Code display, 32pxWDJB-MJHT
- Stat XL, 48px1.2M
- Stat large, 40px48.2M
- Stat, 32px1,284
- State word, 14pxRunning
| Class | Size | Line | Weight |
|---|---|---|---|
type-display-xl | 80px | 80px | 400 |
type-display-lg | 60px | 66px | 400 |
type-display | 40px | 44px | 400 |
type-heading-lg | 32px | 36px | 400 |
type-heading | 24px | 28px | 400 |
type-heading-sm | 20px | 24px | 400 |
type-body-lg | 16px | 22px | 340 |
type-body | 14px | 20px | 340 |
type-body-sm | 13px | 18px | 380 |
type-button | 16px | 20px | 400 |
type-label | 14px | 16px | 400 |
type-label-sm | 12px | 16px | 400 |
type-code | 13px | 20px | 400 |
type-code-sm | 12px | 16px | 400 |
type-code-display | 32px | 36px | 400 |
type-stat-xl | 48px | 52px | 400 |
type-stat-lg | 40px | 44px | 400 |
type-stat | 32px | 36px | 400 |
type-state-word | 14px | 16px | 400 |
Numbers
| Setting | Sample |
|---|---|
| Default | 10,011 / 0.01 / Il1 / 11:10 |
data |
Tokens
23 tokens
--type-display-xl- 400 80px/80px var(--font-sans)
--type-display-lg- 400 60px/66px var(--font-sans)
--type-display- 400 40px/44px var(--font-sans)
--type-heading-lg- 400 32px/36px var(--font-sans)
--type-heading- 400 24px/28px var(--font-sans)
--type-heading-sm- 400 20px/24px var(--font-sans)
--type-heading-xs- 400 16px/20px var(--font-sans)
--type-body-lg- 340 16px/22px var(--font-sans)
--type-body- 340 14px/20px var(--font-sans)
--type-body-sm- 380 13px/18px var(--font-sans)
--type-button- 400 16px/20px var(--font-sans)
--type-label- 400 14px/16px var(--font-sans)
--type-label-sm- 400 12px/16px var(--font-sans)
--type-code- 400 13px/20px var(--font-mono)
--type-code-sm- 400 12px/16px var(--font-mono)
--type-stat- 400 32px/36px var(--font-sans)
--type-state-word- 400 14px/16px var(--font-sans)
--font-sans- "Quartz Sans", ui-sans-serif, system-ui, sans-serif
--font-mono- "Quartz Mono", ui-monospace, "SF Mono", Menlo, monospace
--weight-body- 340
--weight-medium- 400
--features-data- "tnum", "zero", "ss04"
--tracking-display- -0.025em