Typography
The shared type system for Hornet products, documentation, and brand experiences.
| Role | Family | Utility | Use |
|---|---|---|---|
| Display | Urbanist Variable | font-display | Page titles, headings, short statements, and high-level brand messages |
| Sans | Geist Variable | font-sans | Body copy, controls, navigation, labels, and product interfaces |
| Mono | Geist Mono Variable | font-mono | Code, identifiers, measurements, overlines, and compact system metadata |
Set paragraphs in Geist. Use Geist Mono only when the content is technical, not as decoration.
| Context | Scale | Default treatment |
|---|---|---|
| Public and brand | text-hornet-hero to text-hornet-h6 | Urbanist, weight 500 |
| Product interfaces | text-2xl to text-xs | Geist, compact desktop hierarchy |
| Documentation and editorial | Shared prose and Hornet display utilities | Urbanist titles with Geist reading |
The token name does not determine the HTML element. Preserve heading order and use one h1 per page.
Use the Hornet display scale for public brand pages and spacious editorial layouts.
text-hornet-hero2.8333–4rem · 1.1Built for agents
text-hornet-h12.8333–3.2917rem · 1.1Retrieval changes with its user
text-hornet-h21.8542–2rem · 1.15Clarity at every scale
text-hornet-h31.4167–1.5rem · 1.2A hierarchy with purpose
text-hornet-h41.2292rem · 1.35Structure before decoration
text-hornet-h51.1042rem · 1.4A measured supporting level
text-hornet-h61rem · 1.5The smallest display role
Use the interface scale for controls, navigation, tables, metadata, and dense product layouts.
text-2xl2.125rem · 34pxPage title
text-xl1.3125rem · 21pxSection heading
text-lg1.0625rem · 17pxLead and prominent UI
text-base0.9375rem · 15pxDefault interface text
text-sm0.8125rem · 13pxLabels and supporting metadata
text-xs0.6875rem · 11pxDense metadata only
400 for reading and 500 for headings, controls, links, and emphasis.1rem or larger on mobile. Reserve text-sm and text-xs for compact metadata.1.68.text-pretty for paragraphs, text-balance for short display headings, and tabular-nums for changing or aligned numbers.Use the shared utilities. See Implementation for framework mappings, code examples, and documented exceptions.