Typography
The front door to Eluan's fluid typeset. Every variant applies a step's font size, line height, and letter spacing together, so type stays optically correct at any viewport.
Variants
Eight variants cover the usual hierarchy. Each one picks a typeset step, a font family, and a default element — so the markup is semantic without you spelling it out.
| Variant | Step | Family | Element |
|---|---|---|---|
display | 5 | heading | h1 |
title | 4 | heading | h2 |
heading | 3 | heading | h3 |
subheading | 2 | heading | h4 |
lead | 1 | body | p |
body | 0 | body | p |
label | neg1 | body | span |
caption | neg2 | body | span |
The four heading variants sit on steps 2–5, where the typeset applies negative tracking automatically — from -0.01em at step 2 to -0.025em at step 5. You never set letter spacing by hand; it arrives with the step.
Display
Title
Heading
Subheading
Lead paragraph copy.
Body copy.
LabelCaptionStep override
step re-sizes any variant to any of the ten rungs without disturbing its family. Because all three tokens move together, a borrowed step brings its matching line height and tracking with it.
Quiet heading
Family
family overrides the variant's font, reading --font-heading, --font-body, or --font-mono. All three are theme tokens, so a custom theme redirects them everywhere at once. Mono is Paper Mono.
Heading family
Body family
Mono family — Paper Mono
Tone
Three foreground tokens: default reads --container-fg, muted reads --container-fg-alt, and inverse reads --container-fg-inverse — which expects an inverted surface behind it.
Default
Muted
Inverse
Alignment
align maps to logical values (start / center / end), so it follows the writing direction rather than hard-coding left and right.
Start
Center
End
Truncate
truncate clips overflowing text to a single line with an ellipsis.
A single line that keeps going well past the width of its container.
As / As Child
Use as when the visual level and the heading level disagree — a page whose first heading should look like display but be marked up as an h2. Use asChild to hand the styles to a child element, such as a router link, instead of rendering an extra node.
Display, marked up as h2
DocumentationInstallation
Props
Extends standard HTMLElement props, except className and style (styling is token-driven and closed).
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "display" | "title" | "heading" | "subheading" | "lead" | "body" | "label" | "caption" | "body" | Picks a typeset step, a family, a weight, and a default element. |
step | "6" | "5" | "4" | "3" | "2" | "1" | "0" | "neg1" | "neg2" | "neg3" | — | Overrides the variant's typeset step, keeping its family and weight. Swaps size, line height, and letter spacing together. |
as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "blockquote" | "figcaption" | — | Element override. Defaults per variant. |
asChild | boolean | false | Delegates all props to the immediate child element via Radix Slot. |
family | "heading" | "body" | "mono" | — | Font family override. Each variant already picks a sensible one. |
tone | "default" | "muted" | "inverse" | "default" | Foreground token: --container-fg, --container-fg-alt, or --container-fg-inverse. |
align | "start" | "center" | "end" | — | Text alignment. |
truncate | boolean | false | Clips to a single line with an ellipsis. |