Prose
The article body. Serif at 18px, capped at 66 characters, with quotes and links that behave.
When to use it
- Around any block of running editorial text: an article body, a guide, a brief.
- Let it cap its own width. The measure is the component's job, not the page's.
- Do not use it for interface copy. That is
.p234-ui, in sans. - Do not override the measure to fill a wide column. A full-width line of 18px serif is unreadable, and that is most of what "it looks like a dashboard" means.
Body, quote and links
Official NBS data puts the Lagos pump price at a figure four months old. Semantic search across the archive returns live prices from reporting this week. Both are accurate, and the distance between them is what a reader came for.
The figures do not describe the same month, which is the point.
The lag is structural rather than a gap in our ingest, so the pairing is the story: an official figure next to what drivers actually pay.
HTML
<div class="p234-prose">
<p>Official NBS data puts the Lagos pump price at a figure four months old. Semantic search across the archive returns live prices from reporting this week. Both are accurate, and the distance between them is what a reader came for.</p>
<blockquote>The figures do not describe the same month, which is the point.</blockquote>
<p>The lag is structural rather than a gap in our ingest, so the pairing is the story: an <a href="#">official figure</a> next to <a href="#">what drivers actually pay</a>.</p>
</div>Spacing
Children are spaced with an owl selector, so every block gets the same rhythm and nothing needs a margin of its own. Add an element and it spaces correctly without touching the stylesheet.
Links inside copy
Links are brand green with an underline offset, and visited links change colour. On an archive this size that is genuinely useful: a reader working through forty visa articles should be able to see which ones they have read.
Quotes
A pull quote uses the quote role with a heavy brand rule down the left. One per article at most. A page of pull quotes has no pull left.
Type floor
Body is 18px and body-sm is 16px, which is the floor for running text anywhere on the site. The old frontend was mostly 12 to 14px.
Tokens this component reads
--p234-color-ink--p234-color-link--p234-color-link-visited--p234-color-brand--p234-type-body-*--p234-type-quote-*--p234-space-5--p234-measure-text--p234-border-heavy