Typography
Font families, text scale, and font weights for dashboard and landing page contexts.
Font Families
Montserrat
font-sansPrimary font for all UI text, headings, and body copy.
Aa Bb Cc
The quick brown fox jumps over the lazy dog.
0123456789
JetBrains Mono
font-monoMonospace font for code, API keys, and technical content.
Aa Bb Cc
const api = new Cencori();
0123456789
css
// CSS Variables (set in layout.tsx)
--font-sans: Montserrat
--font-mono: JetBrains Mono
// Tailwind usage
className="font-sans" // Default, usually not needed
className="font-mono" // For code blocks and technical textDashboard Scale
Dense typography for information-rich interfaces.
ClassUsageExample
text-[10px]Labels, metadata, timestampsLast updated 2 hours agotext-xsBody text, feature lists, descriptionsThis is body text content.text-smSection labels, form labelsSection Labeltext-baseRarely used in dashboardRarely usedtext-lgPage titles (h1)Page Titletext-xlHero titles onlyHero TitleLanding Page Scale
Expressive typography for marketing contexts.
ClassUsageExample
text-xsBadges, small labelsBETAtext-smBody copy, subtitlesSubtitle texttext-baseDescriptionsDescription paragraphtext-xlSection titlesSection Titletext-2xlHero subheadingsSubheadingtext-3xlHero headlinesHeadlineFont Weights
Use weight sparingly for emphasis.
font-mediumLabels, navigationfont-semiboldHeadings, emphasisfont-boldHero headlines onlyUsage Example
tsx
// Page header
<h1 className="text-xl font-semibold">Page Title</h1>
<p className="text-sm text-muted-foreground">Description</p>
// Labels
<span className="text-[10px] text-muted-foreground">Metadata</span>
// Body content
<p className="text-xs">Feature description text</p>