Foundations
Typography
Two self-hosted variable fonts, a Tailwind-default type scale, and a small set of weights. For most UI text reach for the Heading and Text primitives — the raw classes documented here are what those components compose underneath.
Font families
Both fonts are self-hosted in /public/fonts/ — no CDN dependency, no Google Fonts call. Required for air-gap deployments.
--font-sansUI, headings, and body text
The quick brown fox
font-sans--font-monoCode, keyboard shortcuts, token names
cn('text-fg-muted')
font-monoWhy these fonts
Both fonts share design DNA — humanist sans roots, geometric construction, deliberate clarity at small sizes — so they sit together as a system rather than as two unrelated families.
Inter for UI and body
Inter was designed by Rasmus Andersson explicitly for on-screen interfaces. The tall x-height keeps small text readable at the densities C3 operators and Enterprise data tables both need; open apertures stop adjacent letters from blurring together on long shifts. Crucially, it disambiguates the characters that matter most for operator UIs — I from l from 1, 0 from O — so tactical readouts and form inputs stay unambiguous under glance or stress.
It ships as a variable font, meaning every weight from 100 to 900 comes from a single file — smaller payload, simpler air-gap bundle. Tabular numeral support is excellent, which the C3 App Shell already relies on for its LOCAL / UTC / EX clocks and KPI counters. SIL Open Font License, so we self-host without licence concerns.
JetBrains Mono for code and tabular data
JetBrains Mono was built for code editors — the same disambiguation work Inter does for prose, JetBrains Mono does for source. Brackets, braces, and parentheses are visually distinct; 0 / O and 1 / l / I never collapse into each other. PRIZM uses it for code blocks, keyboard shortcut chips (Kbd), token names in foundation tables, and any place where tabular alignment matters more than pretty curves.
Also a variable font, also SIL Open Font License, also self-hosted alongside Inter in the same vendored bundle.
A note on minimalism. One sans and one mono is intentional. Adding more families increases cognitive load, bundle size, and the surface for inconsistency — none of which earn their keep in either product family.
Type scale
PRIZM uses Tailwind's default type scale unmodified. Sizes pair with sensible line-heights so most components don't need to set leading-* explicitly.
text-5xl48px / 1The display headlinetext-4xl36px / 40pxPage titletext-3xl30px / 36pxSection headingtext-2xl24px / 32pxSubsection headingtext-xl20px / 28pxCard titletext-lg18px / 28pxLead paragraphtext-base16px / 24pxBody text — the default reading size for PRIZM. Optimised for long-form prose and dense UI alike.text-sm14px / 20pxSecondary text — captions, descriptions, table cells.text-xs12px / 16pxMetadata, badges, keyboard hints, code annotations.Weights
Inter ships as a variable font (100–900) — every weight is available without an extra file. In practice PRIZM uses four: regular, medium, semibold, bold. Stick to these unless there's a clear reason not to.
font-normal400RegularBody text default.font-medium500MediumButtons, form labels, badges.font-semibold600SemiboldHeadings, emphasised UI labels.font-bold700BoldReserved for highest emphasis.Use the primitives, not the raw classes
Day-to-day, prefer the Heading and Text components — they encode the right defaults and keep visual treatment consistent across pages.
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
export function Example() {
return (
<section>
<Heading as="h1" size="4xl">Page title</Heading>
<Text variant="muted" size="lg">A short subtitle for context.</Text>
<Text>Standard body copy paragraph. Inherits text-base by default.</Text>
<Text size="sm" variant="subtle">Caption / metadata line.</Text>
</section>
);
}For long-form HTML content (MDX, CMS output), wrap it in Prose — it applies the type scale and spacing to nested headings, paragraphs, lists, and code blocks.