PREDICT uses two typefaces and one size scale. Good type does most of the work in a health interface: it makes the result, the range, and what to do next easy to find.

Typefaces

Neue Montreal is the brand typeface, used for everything from headlines to buttons. Geist Mono is for codes, IDs, tokens, and numbers that need to line up.

• Neue Montreal is loaded in four weights only. font-semibold (600) has no file, so it renders as Bold. Use font-medium or font-bold so you get what you see in code.
• font-sans is set on html, so you rarely need to write it.

Type scale

Ten sizes, from 72px down to 14px. Type in the box to try your own text.

The tokens are defined in packages/ui/src/styles/typo.css and work like any Tailwind size: text-heading-32, md:text-heading-48.

The tokens set the font size only. Line height is inherited (1.5 by default), which is too loose for large headings. Add leading-tight (1.25) or leading-none to headings of 32px and up.

For interface text below 14px, use Tailwind's sizes: text-xs (12px) for captions and labels, and text-sm (14px) for compact body text in cards and tables.

Semantic defaults

typo.css styles plain HTML elements, so content looks right without classes.

• Every p is 16px and muted. Inside components, set the size and colour you need, such as text-sm text-foreground. Classes win over the defaults.
• These defaults are in @layer base, so any utility class overrides them.
• In docs pages, the MDX components add spacing on top, such as a top margin on headings.

Hierarchy

A report header built from the scale. One clear title, a muted line of context, and the result as the largest thing in its section.

Text styles

The combinations used across PREDICT. Reuse them instead of inventing new ones.

Details

Weight

• Medium (500) for headings, labels, and buttons.
• Regular (400) for body text.
• Light (300) only for very large display text.
• Bold (700) for rare emphasis, such as one key number. Never for whole paragraphs.

Letter spacing

• Add tracking-tight to headings of 24px and up. Large type looks loose at the default spacing.
• Leave body text at the default.
• Uppercase overlines need extra space: tracking-[0.18em].

Line length

Keep paragraphs to about 65 characters a line with max-w-2xl. Long lines are hard to follow, especially in dense medical text.

Numbers

Use tabular-nums wherever numbers sit in columns or update live, so digits line up and don't shift.

• Write units with a middle dot and superscript minus: mg·dL⁻¹, mL·min⁻¹·1.73 m⁻². Put a space between the number and the unit.
• Use an en dash for ranges, with no spaces: 0.2–3.0.
• Use a real minus sign (−) for negative Z-scores in display text.

Case and punctuation

• Use sentence case for headings, buttons, and labels: "Book a test", not "Book A Test".
• Use uppercase only for short overlines.
• Avoid exclamation marks. Results can be worrying; keep the tone calm.

Implementation

To add a size, add it to the @theme block in typo.css:

Then use it as text-heading-28. Each app that uses @workspace/ui must load Neue Montreal and set --font-montreal itself, as apps/design does.