Typography
Typography defines how text looks across the app: headings, body copy, labels, and buttons. The CTD Learns App uses Inter as its primary typeface. It reads well at every size and screen density. A type scale from h1 to caption creates hierarchy so users scan pages quickly and you don't guess font sizes. Always use MUI's Typography variants (e.g. variant="h1") instead of hardcoding font sizes. This keeps the app consistent and lets you adjust the scale globally.
Type Scale
Admin Dashboard
Page H1
30px / 700
h1Page titles
Section Heading
Page H2
24px / 600
h2Section headings
Card Title
Card / panel
20px / 600
h3Card and panel headings
Widget Title
Sub-heading
18px / 600
h4Widget titles
This is standard body copy used for descriptions and content throughout the app.
Body
16px / 400
body1Default body text
Table cell text, helper text, node descriptions
Body small
14px / 400
body2Secondary body text
Create process
Button
16px / 500
buttonSentence case. Never uppercase.
Created 4/2/2026
Caption
12px / 400
captionDates, metadata
FORM FIELDS
Eyebrow / label
12px / 500
overlinePanel section labels
Scale Tokens
Raw font size tokens. Reference these from tokens.typography.{key} when you need a custom size outside the MUI variants above.
xs0.75rem12pxEyebrow labels, captions
sm0.875rem14pxBody small, table cells, helper text
base1rem16pxBody, button
lg1.125rem18pxCard titles
xl1.25rem20pxSection headings
2xl1.5rem24pxPage subheadings
3xl1.875rem30pxPage H1
4xl2.25rem36pxHero H1
Typography Rules
Always sentence case
Write 'Create process', not 'CREATE PROCESS'. Applies to all buttons, labels, and nav items.
Heading color
All headings use navy #12284C in light mode. Never use pure black for headings.
Secondary text
Muted or helper text always uses gray500 #6B6B72. Disabled text uses gray300.
Code
// Variant maps to type scale:
<Typography variant="h1">Admin Dashboard</Typography>
<Typography variant="h2">Section Heading</Typography>
<Typography variant="body1">Body copy text</Typography>
<Typography variant="body2">Secondary text</Typography>
<Typography variant="caption">Created 4/2/2026</Typography>
<Typography variant="overline">FORM FIELDS</Typography>
// theme.js config:
typography: {
fontFamily: '"Inter", sans-serif',
h1: { fontSize: '30px', fontWeight: 700 },
h2: { fontSize: '24px', fontWeight: 600 },
}