Content

Rows

A definition list with an ink rule on top and hairlines between: a term and what it means.

01

Examples

Rows (Management README)Open “Rows (Management README)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

02

When to use it

Principles, facts, terms, status, and “Built with” lines. Not for prose that runs on.

Live: Management README, Agents, Hirsla, Advisory.

03

Anatomy

Group
dl.rows, 1px ink rule on top.
Row
div > dt + dd; hairline between rows.
Term
Instrument Sans 500.
Definition
Newsreader.
04

Behaviour

Phone, tablet, desktop
Stacked on phone and tablet; term and definition side by side from 1024 (19/30).
Motion
None.
05

Accessibility

Real dl. Terms are not headings.

06

Words

Terms short, sentence case, no full stop. Definitions are sentences.

07

Code

Classes: .rows .rows-gap. Styles in site/assets/css/site.css.

<dl class="rows">
<div><dt>Strategic clarity</dt><dd>I look for patterns early, zoom out, and simplify complexity into something navigable and actionable.</dd></div>
<div><dt>Curiosity and experimentation</dt><dd>I test, explore, and iterate. Progress comes from learning loops, not perfect plans.</dd></div>
<div><dt>Aesthetic and systems sense</dt><dd>I care about how things feel, flow, and connect. Good design and structure help people think better and work better.</dd></div>
</dl>