Typography

Typefaces

Family	Utility	Use
Inter (variable)	font-sans, the default	Every piece of interface text.
JetBrains Mono (variable)	font-mono	Identifiers, hashes, IP addresses, code, values the user may copy.

Both load from @zenoxai/ui/fonts.css, imported from the app’s JavaScript entry (see Installation). Inter renders with the cv11 (single-storey a) and ss01 (open digits) features.

Type scale

The scale overrides the Tailwind defaults. The platform is dense: running text is text-sm (12.5px), not text-base. Sizes and line heights are set in rem, so they follow the user’s font size setting together with spacing and control heights; the pixels below are at the browser’s default 16px. Every line height is a whole pixel. The reasoning is in docs/decisions/0006-type-scale-and-density.md in the repository.

Utility	Use
text-xs	Captions, badges, keyboard hints, chart axes. The floor: never a sentence or help text.
text-sm	Body copy, buttons, table cells, form labels, help text, descriptions.
text-md	Compact titles: a Popover title, a small Card title, a table group, a side panel group.
text-base	Container titles (Card, Dialog, Sheet, Drawer, empty states); inputs below md.
text-lg	Section headings.
text-xl	The page title, the single <h1> of a page.
text-2xl	KPI figures in a Stat Tile, semibold.
text-3xl and up	Marketing surfaces only.

text-dense-xs is a deprecated alias of text-xs.

Title levels

A title’s weight follows its role. Page and section headings organize the page and are semibold. Container titles name the object in a card or an overlay; they repeat many times on a screen and are medium, so they stay below the section heading above them. The compact step is semibold because at 14px a medium title would not stand apart from the 12.5px medium labels and buttons around it.

Level	Size / line	Weight	Components
Page	22 / 30	semibold	Page Header
Section	18 / 26	semibold	Section Heading
Container	16 / 24	medium	Card, Dialog, Alert Dialog, Sheet, Drawer, Empty
Compact	14 / 20	semibold	Popover title, size="sm" Card title, table and panel groups
Body	12.5 / 18	normal	Text, cells, descriptions
Label	12.5 / 18	medium	Labels, buttons, links, emphasis; table headers are semibold
Caption	11 / 16	medium	Badges, captions, keyboard hints; uppercase captions are semibold

No title uses leading-none: Portuguese and Spanish titles wrap more often than English ones, and a wrapped title needs its line height.

Weights

Utility	Use
font-normal	Body text.
font-medium	Labels, buttons, links, container titles, badges.
font-semibold	Page, section and compact titles; table headers; uppercase captions.
font-bold	Not used: KPI figures are semibold, so a row of them is not heavy.

Rules

• Sentence case for every title, label and button: “Save changes”, not “Save Changes”.
• Uppercase is for short captions only (text-xs font-semibold uppercase tracking-widest), such as sidebar group labels. Never for headings or buttons.
• Numbers that line up in columns use tabular-nums.
• Truncate with truncate and give the full value a tooltip or a detail view; never let a cell wrap an identifier mid-way.
• Values a user may copy (hashes, IPs, keys) use font-mono and offer a Copy Button.