Simal UI

Typography

Four type families, each with one job, self-hosted in the package.

Four families, each with one job. They are self-hosted in the package — @simal/ui/fonts.css — so nothing here reaches a third-party font host at render time.

Families

FamilyVariableRole
Inter--font-sansEverything by default
Instrument Serif--font-serifEditorial display — page and section titles
JetBrains Mono--font-monoMicro-labels, token names, IDs, numerics
Noto Serif Devanagari--font-devaBikram Sambat dates

Inter needs no opt-in: Tailwind preflight applies --font-sans as the document default, so it is the baseline everywhere.

Instrument Serif is loaded natively as "InstrumentSerif" — uniwind requires the React Native font name to match the useFonts() key exactly.

Noto Serif Devanagari carries the Devanagari face for BS calendar output. Latin text should never fall through to it.

Scale

StepClasses
Displayfont-serif text-5xl
Titlefont-serif text-3xl
Headingtext-xl font-medium
Bodytext-base
Smalltext-sm
Microfont-mono text-xs uppercase tracking-wider

See the Text component for the runtime equivalents — its variant prop maps onto this scale, and it is what you should reach for inside a React Native tree rather than the classes directly.

On this page