Article text

Copy inside an article. Plain HTML gets the article styles automatically; one style per role, 24px between blocks.

Discovery

Finding the right problem

Before I joined, our PM interviewed 8 admins across our customer segments. I joined the follow-up calls.

The research pointed to three needs

A central place to manage all Pages and Page groups
Bulk editing of permissions and statuses
Robust search and filters for actually finding Pages

A plain list, with accent bullets
Another item

<h2>Finding the right problem</h2>
<p>Before I joined, our PM interviewed <strong>8 admins</strong>…</p>
<h3>The research pointed to three needs</h3>
<ol class="numbers">
  <li><span><strong>A central place</strong> to manage all Pages</span></li>
  …
</ol>

Styles

Eyebrow (.type-eyebrow): small uppercase pretitle, muted, e.g. the chapter name.
H2: Bold, lh 0.96, 3%. H3: Bold 24/32, 3%. Body: Regular 18, lh 1.5, 5%; <strong> for emphasis.
Lists: bullets take the article accent.
Big numbers (ol.numbers): numbers in the H2 style, a <strong> title line, then one sentence. A list continued in another story step sets style="--list-start: 1" to begin at 2.
Links: plain <a>, styled as text links.
Single photo (figure.article-photo): the reading column's width, gallery corners (--radius-md), opens in the lightbox (data-zoom); an optional <figcaption class="type-body-note"> in the muted colour. Several photos go in a gallery.

The same styles are available as classes (.type-h2, .type-h3, .type-body) outside articles.