Jinnga design system

Typography

Text roles carry family, size, weight, line height and letter spacing together. Line heights are generous because Spanish, Portuguese and French carry accents and run longer than English. Switch the sample language in the header.

Families

RoleStack
sansInter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif
monoJetBrains Mono, SFMono-Regular, Menlo, Consolas, monospace

Roles

display · 48px / 1.2 / 700
No students yet. Add the first one or import a list.
heading1 · 30px / 1.2 / 700
No students yet. Add the first one or import a list.
heading2 · 24px / 1.35 / 600
No students yet. Add the first one or import a list.
heading3 · 20px / 1.35 / 600
No students yet. Add the first one or import a list.
title · 18px / 1.35 / 600
No students yet. Add the first one or import a list.
body · 16px / 1.5 / 400
No students yet. Add the first one or import a list.
bodyStrong · 16px / 1.5 / 600
No students yet. Add the first one or import a list.
bodySmall · 14px / 1.5 / 400
No students yet. Add the first one or import a list.
label · 14px / 1.35 / 500
No students yet. Add the first one or import a list.
caption · 12px / 1.5 / 400
No students yet. Add the first one or import a list.
code · 14px / 1.5 / 400
const locale = profile.locale ?? detect(request);