07
Words
Headings in sentence case, no full stop.
Page structure
Section
The unit of every content page: a 1px ink rule, a number in the label column, a heading beside it.
01
Examples
Phone 390 · Light
Desktop 1440 · Light
Phone 390 · Dark
Desktop 1440 · Dark
02
When to use it
Each numbered part of a page. The number matches the rail. Utility pages and articles use the tighter .sec-util.
Live: Every content page.
03
Anatomy
- Rule
div.sec-rule, 1px ink.- Number
div.sec-n, tabular, secondary ink.- Heading
h2, Instrument Sans 500,idreferenced byaria-labelledby.- Body
- Reading text and components.
04
Variants
- Standard
.sec: 34/38 phone, 56/60 desktop.- Utility and article
.sec-util: 30/36, 40/46 desktop, 64px start.
05
Behaviour
- Phone, tablet, desktop
- Section start 80 phone, 72 tablet, 144 desktop. Number 15/22, 17/26, 20/28.
- Motion
- None (the rule draw was dropped on 19 October 2026).
06
Accessibility
section[aria-labelledby]. Headings in order: h2 per section, h3 inside.
08
Code
Classes: .sec .sec-rule .sec-n .sec-util .sec-first. Styles in site/assets/css/site.css.
<section aria-labelledby="r-north-h" class="sec" id="r-north"> <div class="sec-rule"></div> <div class="sec-n">01</div> <h2 id="r-north-h">My true north</h2> <p>I lead with clarity, respect, and long-term thinking. I care about people and relationships as much as I care about outcomes. I try to remove noise, create focus, and build systems that last.</p> <p>I do not optimise for speed or volume. I optimise for signal, quality, and impact over time. The decisions we make today should still feel right years from now.</p> <p>I believe in direct, honest relationships built on mutual respect and accountability. Kindness is not softness. It is the willingness to tell someone the truth when it matters, to hold people to high standards because you believe in them, and to be consistent whether the situation is easy or hard. I will always have your back. And I will always tell you what I think.</p> </section>