Typography
Apollo Vertex uses three font families, each mapped to a CSS custom property and a Tailwind font utility.
Font Families
Sans (Inter)
--font-sansInter, ui-sans-serif, sans-serif, system-uiThe quick brown fox jumps over the lazy dog.
Mono (IBM Plex Mono)
--font-monoIBM Plex Mono, ui-monospace, monospaceconst theme = "apollo-vertex";
Heading Scale
The quick brown fox jumps over the lazy dog.
text-5xl font-bold tracking-tighttag <h1>size 3rem / 48px
The quick brown fox jumps over the lazy dog.
text-4xl font-bold tracking-tighttag <h2>size 2.25rem / 36px
The quick brown fox jumps over the lazy dog.
text-3xl font-semibold tracking-tighttag <h3>size 1.875rem / 30px
The quick brown fox jumps over the lazy dog.
text-2xl font-semiboldtag <h4>size 1.5rem / 24px
The quick brown fox jumps over the lazy dog.
text-xl font-semiboldtag <h5>size 1.25rem / 20px
The quick brown fox jumps over the lazy dog.
text-base font-semiboldtag <h6>size 1rem / 16px
Body Scale
Use for lead paragraphs and feature callouts where text needs more visual weight.
text-xltag <p>size 1.25rem / 20px
Use for introductory text or longer-form reading contexts.
text-lgtag <p>size 1.125rem / 18px
The default body size. Used for most paragraph and UI copy.
text-basetag <p>size 1rem / 16px
Labels, captions, helper text, and secondary information.
text-smtag <p>size 0.875rem / 14px
Timestamps, metadata, and legal/fine-print text.
text-xstag <p>size 0.75rem / 12px
Mono / Code
const theme = { primary: 'oklch(0.64 0.115 208)', radius: '0.625rem' };
text-smtag <p>size 0.875rem / 14px