Chapter 1 — Foundation · Section 04
Typography
Five typefaces, five semantic roles. Each font has a precise purpose in the hierarchy — the display font opens the space, the heading font structures it, the body font fills it, the serif font adds depth, and the label font keeps things precise.
Font Specimens
Outfit
The sanctuary of learning.
The quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
Aa
Light · 300
Aa
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Geometric, modern — the first thing the eye lands on. Never use at small sizes.
Hero sections, large marketing statements, display type at text-4xl and above
Plus Jakarta Sans
Introduction to Theology
The quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
Aa
Light · 300
Aa
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Reliable, architectural — the backbone of UI hierarchy.
Section h2/h3, card titles, navigation items, UI headers
Inter
Faithful leaders equipped for every tongue.
The quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
Aa
Light · 300
Aa
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Optimized for screen reading at 14–18px. The workhorse of the system.
Paragraphs, descriptions, any readable prose
IBM Plex Serif
"Go into all the world."
The quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
Aa
Light · 300
Aa
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
The scholarly voice. Use italic for citations and pull quotes. Min text-lg.
Course titles, theology quotes, pull quotes, editorial accents
Space Grotesk
COURSE · MODULE · LESSON
The quick brown fox jumps over the lazy dog
0 1 2 3 4 5 6 7 8 9
Aa
Light · 300
Aa
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Technical and precise. Works well all-caps with tracking-widest for eyebrows.
UI labels, chips, badges, metadata, technical callouts
Type Scale Reference
| Token | px | rem | Line height | Letter spacing | Rec. font | Usage |
|---|---|---|---|---|---|---|
text-xs | 12px | 0.75 | 1rem | normal | font-label | Metadata, captions, footnotes |
text-sm | 14px | 0.875 | 1.25rem | normal | font-body | Small body, secondary descriptions |
text-base | 16px | 1 | 1.5rem | normal | font-body | Default body text — minimum for paragraphs |
text-lg | 18px | 1.125 | 1.75rem | normal | font-heading | Card titles, form labels, strong UI text |
text-xl | 20px | 1.25 | 1.75rem | -0.01em | font-heading | Section subheadings, feature names |
text-2xl | 24px | 1.5 | 2rem | -0.015em | font-heading | Page subheadings, hero subtitles |
text-3xl | 30px | 1.875 | 2.25rem | -0.02em | font-heading | Section headings |
text-4xl | 36px | 2.25 | 2.5rem | -0.025em | font-display | Page titles — minimum for font-display |
text-5xl | 48px | 3 | 1 | -0.03em | font-display | Hero headlines |
text-6xl | 60px | 3.75 | 1 | -0.035em | font-display | Large hero, landing pages |
text-7xl | 72px | 4.5 | 1 | -0.04em | font-display | Display only — use sparingly |
Pairing Combinations
Ancient Wisdom, Modern Craft.
A platform built for the contemplative mind — where every lesson is a step deeper into understanding.
Hero / Landing
Outfit 800 + IBM Plex Serif 300 italic
Introduction to Systematic Theology
Explore the foundations of Christian doctrine across 12 in-depth modules with Dr. Martinez.
Course Card
Plus Jakarta Sans 600 + Inter 400
"Go therefore and make disciples of all nations."
— Matthew 28:19 · ESV
Pull Quote
IBM Plex Serif 400 italic + Space Grotesk 700
Chapter 3 — Soteriology
Course Curriculum
Section Header
Plus Jakarta Sans 700 + Space Grotesk 700 eyebrow
Accessibility
WCAG 1.4.3 requires 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold). All text in UI components must be verified against the component's own background — not the page. The minimum body text size is text-sm (14px). Never set prose below this. IBM Plex Serif at italic weights may render slightly lighter — increase size to text-lg minimum for serif body text.