The anatomy of a text style.

A text style is more than a font size. It bundles every typographic decision that belongs together — family, weight, line height, tracking, spacing — and gives that bundle a name. Change the name's definition once and every element using it updates everywhere.

What goes inside a style.

Every text style stores nine properties. Font family decides which typeface renders — sans, serif, or mono. Font size and line height work as a pair: the size sets the em square, the line height sets the cage around it. Get that ratio wrong and paragraphs either suffocate or float apart.

Font weight is a raw number — 400 for regular, 500 for medium, 600 for semibold, 700 for bold. Letter spacing (tracking) is an em value, so it scales with the font size automatically. Negative tracking pulls characters closer; positive tracking opens them up. Display headings usually want a little tightening. Body text usually wants none.

"Typography is the detail and the presentation of a story. It should invite you into the content, not announce itself."

Paragraph spacing and flow.

Paragraph spacing is the margin after each element. It controls the rhythm of a page — the breath between ideas. Too tight and paragraphs blur together. Too loose and sections feel disconnected. Most body text lands between 0.75 rem and 1.5 rem.

Headings need more room than body.

A heading's paragraph spacing is the gap between it and the content that follows. That gap signals hierarchy: the heading belongs to the section below it, not the section above. Standard practice is to make the space below a heading smaller than the space above it.

In this system, paragraph spacing is a token reference — not a raw number. Heading 2 uses --belin-space-3 (0.75 rem) as its bottom margin. You can change that in the Styles tab and every h2 on the site updates immediately.

The role of the serif and mono slots.

Not every style uses the sans family. Blockquote uses serif by default — the contrast between a serif pull quote and a sans body signals "this is an aside, not a continuation." Mono is for anything that should read as code or data.

Code styles.

Code inline is for variable names and short references like --text-body-size inside a sentence. Code block is for multi-line examples that stand alone. Both use the mono family and share the same size and weight by default — but they stay separate so you can diverge them when you need to.

Label is the smallest named style in this set. It shares the xs size with Caption and Footnote but has a slightly heavier weight (500 vs 400) because labels sit next to interactive elements and need to hold their own at small sizes.

Links in prose.

There's a Link style for inline links inside running text. It carries color, weight, tracking, and an underline toggle, but it inherits size, family, and line height from the surrounding text — so a link in a heading stays heading-sized, and a link in body copy stays body-sized. Wrap a block of content in a belin-prose class and every <a> inside it picks the style up automatically. The links in this article use it.

Footnote style · Used for references, legal copy, and small-print text. Muted foreground color. Same xs size as Caption and Label.