Layout — Typography
Each preset bundles a font-size / weight / line-height combination (caption
sets a muted color instead of a line-height). Presets are plain switches — no
@breakpoint form.
Heading — h3 preset
Body copy uses the p preset: a comfortable 1rem / 1.5 line height for running text.
A smaller p-sm line, tinted with color:muted.
CAPTION PRESET — small and muted by default.
<h2 and-text="h2 weight:bold">Title</h2><p and-text="p">Description</p>Presets
Section titled “Presets”| Preset | Font size | Weight | Line height |
|---|---|---|---|
h1 | 3.75rem (6xl) | 700 bold | 1.1 |
h2 | 3rem (5xl) | 700 bold | 1.1 |
h3 | 2.25rem (4xl) | 600 semibold | 1.2 |
h4 | 1.875rem (3xl) | 600 semibold | 1.2 |
h5 | 1.5rem (2xl) | 500 medium | 1.3 |
h6 | 1.25rem (xl) | 500 medium | 1.3 |
p | 1rem (base) | 400 normal | 1.5 |
p-sm | 0.875rem (sm) | 400 normal | 1.5 |
p-xs | 0.75rem (xs) | 400 normal | 1.5 |
caption | 0.75rem (xs) | 400 normal | — (muted color) |
Modifiers
Section titled “Modifiers”| Token | Values | CSS property |
|---|---|---|
align:* | left, center, right, justify | text-align |
weight:* | thin, light, normal, medium, semibold, bold, extrabold, black | font-weight |
color:* | primary, secondary, accent, muted, destructive, background, foreground | color |
Weight numeric values: thin 100, light 300, normal 400, medium 500,
semibold 600, bold 700, extrabold 800, black 900.
Right-aligned, bold
Tinted with color:destructive
<p and-text="align:right weight:bold">Right-aligned, bold</p>Responsive
Section titled “Responsive”align:*, weight:*, and color:* accept a @breakpoint suffix — see
Overview → Responsive for the breakpoint table.
The presets (h1…caption) do not — there’s no h1@md, so this package can’t
swap a whole type preset at a breakpoint on its own.
Next steps
Section titled “Next steps”Recipes — the media object and toolbar patterns pair
and-text presets with and-layout.