+234 Design System

Prose

The article body. Serif at 18px, capped at 66 characters, with quotes and links that behave.

When to use it

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