Typography

Manrope, used everywhere. Numerals are tabular by default. These are the sizes and weights the real apps actually reach for—anything else is out of scope.

Family

The quick brown fox jumps over the lazy dog.

Manrope · var(--font-primary) · 300 – 800

Sizes

text-3xl

The quick brown fox.

Page Title (Desktop)

text-2xl

The quick brown fox.

Page Title (Mobile)

text-xl

The quick brown fox.

Lead / Hero Copy

text-lg

The quick brown fox.

Section Heading

text-base

The quick brown fox.

Body (Default)

text-sm

The quick brown fox.

Secondary Body

text-xs

The quick brown fox.

Caption / Metadata

Weights

medium

Manrope at medium.

Labels, List Items, Page Headers

semibold

Manrope at semibold.

Occasional Emphasis

bold

Manrope at bold.

Section Headings, Hero Name

In Context

A Real Page Title.

Body copy sits comfortably at 16px. The hierarchy comes from size and weight, not from color or decoration.

A Section Heading

Secondary text at text-sm for metadata and supporting copy.