Tailwind UI Pattern Registry for humans and agents

Font Recommendations

A curated catalog of 25 high-quality fonts with semantic metadata for tone, domain, and role fitness. Each font includes npm packages for self-hosting, predefined pairings, and Tailwind theme configuration.

25 Fonts 15 Pairings Self-Hosted Tailwind Ready

Sans-Serif

Inter

@fontsource/inter

'Inter', ui-sans-serif, system-ui, sans-serif

neutralcleantechnical
moderntechnicalfriendlyapproachableapproachable professional
saasagencyeducationfinanceconsulting
heading
0.6
body
0.95
ui
0.95

DM Sans

@fontsource/dm-sans

'DM Sans', ui-sans-serif, system-ui, sans-serif

warmgeometricfriendly
modernfriendlyapproachableapproachable professional
saasagencyeducationpersonalconsulting
heading
0.8
body
0.85
ui
0.8

Plus Jakarta Sans

@fontsource/plus-jakarta-sans

'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif

modernwarmpolished
modernpremiumfriendly
saasagencyecommerceconsulting
heading
0.9
body
0.8
ui
0.75

Outfit

@fontsource/outfit

'Outfit', ui-sans-serif, system-ui, sans-serif

geometriccleanstructured
moderntechnicalpremium
saasfinanceagencyconsulting
heading
0.85
body
0.75
ui
0.7

Manrope

@fontsource/manrope

'Manrope', ui-sans-serif, system-ui, sans-serif

geometricwideconfident
moderntechnicalpremium
saasfinanceagency
heading
0.9
body
0.6
ui
0.7

Source Sans 3

@fontsource/source-sans-3

'Source Sans 3', ui-sans-serif, system-ui, sans-serif

neutralprofessionalreadable
seriousinstitutionalapproachable professional
legalhealthcareeducationfinancenonprofit
heading
0.5
body
0.9
ui
0.85

Nunito

@fontsource/nunito

'Nunito', ui-sans-serif, system-ui, sans-serif

roundedfriendlysoft
friendlyplayfulapproachablecasual
educationnonprofitgastronomypersonal
heading
0.7
body
0.8
ui
0.7

Figtree

@fontsource/figtree

'Figtree', ui-sans-serif, system-ui, sans-serif

humanistwarmorganic
friendlyapproachableapproachable professional
educationnonprofithealthcarepersonalconsulting
heading
0.6
body
0.85
ui
0.75

Geist Sans

geist

'Geist Sans', ui-sans-serif, system-ui, sans-serif

minimaldeveloperprecise
technicalmodern
saasagency
heading
0.7
body
0.85
ui
0.9

Space Grotesk

@fontsource/space-grotesk

'Space Grotesk', ui-sans-serif, system-ui, sans-serif

futuristictechbold
moderntechnical
saasagency
heading
0.9
body
0.5
ui
0.6

Syne

@fontsource/syne

'Syne', ui-sans-serif, system-ui, sans-serif

boldcreativeexpressive
playfulpremiummodern
agencypersonalgastronomy
heading
0.95
body
0.2
ui
0.15

IBM Plex Sans

@fontsource/ibm-plex-sans

'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif

corporatereliablestructured
seriousinstitutionalapproachable professional
financelegalhealthcareconsulting
heading
0.6
body
0.9
ui
0.9

Work Sans

@fontsource/work-sans

'Work Sans', ui-sans-serif, system-ui, sans-serif

versatilebalancedworkhorse
modernfriendlyapproachable professional
saasecommerceeducationnonprofit
heading
0.7
body
0.85
ui
0.8

Serif

DM Serif Display

@fontsource/dm-serif-display

'DM Serif Display', ui-serif, Georgia, serif

classicwarmauthoritative
seriouseditorialpremiumapproachable professional
legalfinanceagencyconsulting
heading
0.95
body
0.2
ui
0.1

Playfair Display

@fontsource/playfair-display

'Playfair Display', ui-serif, Georgia, serif

elegantluxuriouseditorial
premiumeditorial
agencygastronomyrealestatepersonal
heading
0.95
body
0.15
ui
0.05

Lora

@fontsource/lora

'Lora', ui-serif, Georgia, serif

timelessreadableliterary
editorialseriousapproachable professional
educationlegalnonprofitpersonal
heading
0.8
body
0.85
ui
0.2

Fraunces

@fontsource/fraunces

'Fraunces', ui-serif, Georgia, serif

artisansoftdistinctive
friendlyeditorialpremium
gastronomyagencypersonalnonprofit
heading
0.9
body
0.4
ui
0.1

Libre Baskerville

@fontsource/libre-baskerville

'Libre Baskerville', ui-serif, Georgia, serif

classicbookishformal
seriousinstitutionaleditorial
legaleducationfinance
heading
0.7
body
0.8
ui
0.1

Noto Serif

@fontsource/noto-serif

'Noto Serif', ui-serif, Georgia, serif

universalneutralreliable
seriousinstitutionalapproachable professional
legalhealthcareeducationfinancenonprofit
heading
0.6
body
0.85
ui
0.2

Source Serif 4

@fontsource/source-serif-4

'Source Serif 4', ui-serif, Georgia, serif

neutralprofessionalpaired
seriouseditorialapproachable professional
legaleducationfinanceconsulting
heading
0.7
body
0.9
ui
0.15

Monospace

JetBrains Mono

@fontsource/jetbrains-mono

'JetBrains Mono', ui-monospace, 'Fira Code', monospace

developerprecisemodern
technicalmodern
saaseducation
heading
0
body
0.1
mono
0.95
ui
0.3

Fira Code

@fontsource/fira-code

'Fira Code', ui-monospace, monospace

developerestablishedreadable
technical
saaseducation
heading
0
body
0.1
mono
0.9
ui
0.2

IBM Plex Mono

@fontsource/ibm-plex-mono

'IBM Plex Mono', ui-monospace, monospace

corporatecleanstructured
technicalseriousinstitutional
saasfinancelegal
heading
0
body
0.15
mono
0.85
ui
0.3

Geist Mono

geist

'Geist Mono', ui-monospace, monospace

minimalmodernprecise
technicalmodern
saas
heading
0
body
0.1
mono
0.9
ui
0.25

Inconsolata

@fontsource/inconsolata

'Inconsolata', ui-monospace, monospace

humanistreadablelight
technicaleditorial
saaseducation
heading
0
body
0.2
mono
0.8
ui
0.2

Predefined Pairings

15 curated font pairings optimized for specific tone + domain combinations. Each pairing includes a heading, body, and monospace font with a ready-to-use install command.

serious legal
Heading DM Serif Display
Body Source Sans 3
Mono IBM Plex Mono
npm i @fontsource/dm-serif-display @fontsource/source-sans-3 @fontsource/ibm-plex-mono
serious finance
Heading DM Serif Display
Body IBM Plex Sans
Mono IBM Plex Mono
npm i @fontsource/dm-serif-display @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono
serious healthcare
Heading Noto Serif
Body Source Sans 3
Mono IBM Plex Mono
npm i @fontsource/noto-serif @fontsource/source-sans-3 @fontsource/ibm-plex-mono
premium agency
Heading Playfair Display
Body Plus Jakarta Sans
Mono JetBrains Mono
npm i @fontsource/playfair-display @fontsource/plus-jakarta-sans @fontsource/jetbrains-mono
premium realestate
Heading Playfair Display
Body Inter
Mono JetBrains Mono
npm i @fontsource/playfair-display @fontsource/inter @fontsource/jetbrains-mono
modern saas
Heading Plus Jakarta Sans
Body Inter
Mono JetBrains Mono
npm i @fontsource/plus-jakarta-sans @fontsource/inter @fontsource/jetbrains-mono
modern agency
Heading Manrope
Body DM Sans
Mono Geist Mono
npm i @fontsource/manrope @fontsource/dm-sans geist
technical saas
Heading Space Grotesk
Body Inter
Mono JetBrains Mono
npm i @fontsource/space-grotesk @fontsource/inter @fontsource/jetbrains-mono
friendly education
Heading Fraunces
Body Figtree
Mono Fira Code
npm i @fontsource/fraunces @fontsource/figtree @fontsource/fira-code
friendly nonprofit
Heading DM Sans
Body Nunito
Mono Fira Code
npm i @fontsource/dm-sans @fontsource/nunito @fontsource/fira-code
editorial personal
Heading Playfair Display
Body Lora
Mono Inconsolata
npm i @fontsource/playfair-display @fontsource/lora @fontsource/inconsolata
editorial education
Heading Fraunces
Body Source Serif 4
Mono Inconsolata
npm i @fontsource/fraunces @fontsource/source-serif-4 @fontsource/inconsolata
playful gastronomy
Heading Syne
Body Nunito
Mono Fira Code
npm i @fontsource/syne @fontsource/nunito @fontsource/fira-code
institutional legal
Heading Libre Baskerville
Body IBM Plex Sans
Mono IBM Plex Mono
npm i @fontsource/libre-baskerville @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono
approachable professional consulting
Heading DM Serif Display
Body DM Sans
Mono JetBrains Mono
npm i @fontsource/dm-serif-display @fontsource/dm-sans @fontsource/jetbrains-mono

AI Integration

The recommend_fonts MCP tool automatically selects the best font pairing for your project based on domain and tone. It returns install commands and Tailwind theme configuration. 

// MCP: recommend_fonts(domain: "saas", tone: "modern")
// Returns heading + body + mono fonts with:
//   - npm install command
//   - Tailwind @theme configuration
//   - Pairing reasoning