Typography

Font families, type scale, weights, and usage guidance for building consistent product UIs.

Font Families

Fonts are loaded via @font-face declarations in assets/css/tokens.css, sourced from https://assets.wlth.com/fonts/. Both families use font-display: swap.

SuisseIntl

--font-sans: 'SuisseIntl', system-ui, -apple-system, sans-serif

Primary UI font. Use via Tailwind's font-sans or the default body — all text renders in SuisseIntl unless explicitly overridden.

100Thin The quick brown fox jumps over the lazy dog
200Light The quick brown fox jumps over the lazy dog
300Book The quick brown fox jumps over the lazy dog
400Regular The quick brown fox jumps over the lazy dog
500Medium The quick brown fox jumps over the lazy dog
600SemiBold The quick brown fox jumps over the lazy dog
700Bold The quick brown fox jumps over the lazy dog
900Black The quick brown fox jumps over the lazy dog

SuisseIntlMono

--font-mono: 'SuisseIntlMono', ui-monospace, monospace

Monospace font. Use via Tailwind's font-mono for code, tokens, hex values, and technical data. Available at weight 400 only.

The quick brown fox jumps over the lazy dog

Type Scale

Tailwind v4 default scale. Use these classes directly — no custom font-size tokens are defined.

ClassrempxLine heightUse case
Aa — text-xs
text-xs0.75rem12px1remTimestamps, labels, helper text, badges
Aa — text-sm
text-sm0.875rem14px1.25remBody text, table cells, form labels, nav items
Aa — text-base
text-base1rem16px1.5remDefault body, descriptions, card content
Aa — text-lg
text-lg1.125rem18px1.75remPanel titles, slideover headings, modal titles
Aa — text-xl
text-xl1.25rem20px1.75remSection headings, page sub-titles
Aa — text-2xl
text-2xl1.5rem24px2remPage titles, docs headings
Aa — text-3xl
text-3xl1.875rem30px2.25remHero headings, marketing headlines
Aa — text-4xl
text-4xl2.25rem36px2.5remDisplay headings, large hero text

Font Weights

The four weights used in product UI. SuisseIntl ships all eight weights but only these are in active use.

ClassValueNameUse case
font-normal400RegularLong-form body text, descriptions
font-medium500MediumEmphasised body, active nav items, subtle labels
font-semibold600SemiBoldHeadings, titles, table headers, badges — the primary weight for UI
font-bold700BoldStrong emphasis only — use sparingly

Semantic Text Colour Tokens

Use these tokens to set text colour — never use raw palette classes like text-lightgrey-900 directly. Full token values are documented on the Tokens page.

ClassUse case
text-defaultPrimary readable text — headings, body copy, strong labels
text-tonedSecondary text — descriptions, supporting copy, timestamps
text-mutedTertiary text — placeholders, hint text, disabled labels
text-dimmedLowest emphasis — watermarks, decorative labels
text-highlightedBrand accent — active states, links, icon labels (royalblue-500)
text-inverted
Text on dark backgrounds only