Typography

Inter is the system typeface. All size and weight decisions are made with purpose. Use the heading scale for hierarchy, body scale for content, and mono for code or token references.

Heading scale

Display36px / 700

The edge of precision.

H130px / 700

Section heading level 1

H224px / 600

Section heading level 2

H320px / 600

Subsection heading

H418px / 600

Card or group heading

H516px / 500

Inline section label

H614px / 500

Small section or field group label

Body & utility scale

Body (p)16px / 400

Body text for paragraphs and longer-form content. Readable at comfortable line-height. Use for main content areas, descriptions, and explanatory copy.

Small (p)14px / 400

Small text used for labels, captions, metadata, and secondary information throughout the interface.

Caption12px / 400

Caption text for table headers, timestamps, helper text, and fine print.

Mono14px / 400

--primary: 0 0% 9%;

Tailwind class reference

LevelElementTailwind classesSizeWeight
Displayh1text-4xl font-bold36px700
H1h1text-3xl font-bold30px700
H2h2text-2xl font-semibold24px600
H3h3text-xl font-semibold20px600
H4h4text-lg font-semibold18px600
H5h5text-base font-medium16px500
H6h6text-sm font-medium14px500
Body (p)ptext-base font-normal16px400
Small (p)ptext-sm font-normal14px400
Captionspantext-xs font-normal12px400
Monocodetext-sm font-mono14px400