Typography
The text primitives. Text is the atom — Heading, Paragraph, and the rest are Text with a semantic tag and a set of typographic defaults baked in.
The pieces
| Component | Use it for |
|---|---|
| Text | The text atom. Renders a <span>; every other primitive composes from it. |
| Heading | Semantic h1–h6. The level prop drives the tag and the size. |
| Paragraph | Semantic <p> with a readable line-height default. |
| Blockquote | Quoted text with an accent border and an optional citation. |
| Code | Inline <code> — monospace, subtle background tint. |
| Kbd | <kbd> for keyboard-shortcut labels. |
One atom, semantic wrappers
Text is the base. It renders a <span> and exposes the whole style-prop catalogue — fontSize,
fontWeight, color, lineHeight, letterSpacing. The named primitives layer two things on top:
a semantic tag (Heading renders h1–h6, Paragraph renders <p>) and a default style bag.
The defaults are always overridable. A Heading sets fontWeight: '$bold' — pass fontWeight
yourself and yours wins. The named primitive saves you from re-typing the common case, not from
reaching the uncommon one.
Type reads through tokens
Every typographic value resolves through the theme. fontSize="$lg" is a token reference, not a
pixel count — switch the theme and the scale switches with it. The size scale ($sm, $md, $lg,
$xl, $2xl, $3xl) is a fontSizes token group; weights, line-heights, and families read the
same way.