Content

Reading text

Everything you read: intro, say line, paragraphs, quotes, lists. Newsreader, 640px wide, 700px in articles from 1024.

01

Examples

Article summary and a section with a quoteOpen “Article summary and a section with a quote” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Say line and list (Management README)Open “Say line and list (Management README)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Pair of lists (Management README)Open “Pair of lists (Management README)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Pull quote (Unresolved)Open “Pull quote (Unresolved)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

02

When to use it

Inside .read. One idea per paragraph. One quote per section at most.

Live: Every page.

03

Anatomy

Intro
p.intro under the band; the line an Index tile shows (data-tile).
Say
p.say: the section’s point, set larger.
Paragraph
Plain p in a section, or .p elsewhere: 18/30, 20/32, 21/34.
H3
Instrument Sans 500 inside a section.
Quote
blockquote.quote > p: Newsreader italic 24/34, 34/44 desktop, no marks beside it.
Pull
blockquote.pull: a larger standalone quote, 24/34, 32/44 desktop.
Lists
ul.bul (en dash), ol.nlist (numbers), ol.olist (01, 02 in a ruled list), ul.list (ruled Newsreader list, 17/27 to 19/30).
Pair
.pair: two lists side by side from 1024, with .pair-note under each heading.
Way back
p.back-to at the end of an article: “All Thoughts”.
04

States

Links
Indigo, 1px underline 4px below, ink on hover, 150ms.
05

Behaviour

Phone, tablet, desktop
Sizes step at 768 and 1024; measure 640, articles 700 from 1024.
Motion
None.
06

Accessibility

Ink on canvas 16.6:1. text-wrap: pretty avoids widows. Lists are real lists.

07

Words

British spelling, full forms, serial comma, no em dashes in own text. Quotations word for word, in curly quotes.

08

Code

Classes: .intro .say .p .pull .quote .bul .nlist .olist .list .pair .pair-note .back-to .article. Styles in site/assets/css/site.css.

<article class="read read-util article">
<section aria-labelledby="summary-h" class="sec sec-util" id="summary">
<div class="sec-rule"></div>
<div class="sec-n">01</div>
<h2 id="summary-h">Summary</h2>
<p>Andy Grove called meetings the medium of managerial work. Bad meetings are a design failure, and the fix is better design. Give every meeting an output, keep the regular cadence strong so that special meetings stay rare, move status updates into writing, and open every invite with IDOARRT. Then have the courage to cancel any meeting that has nothing to produce.</p>
</section>
<section aria-labelledby="why-we-hate-what-we-need-most-h" class="sec sec-util" id="why-we-hate-what-we-need-most">
<div class="sec-rule"></div>
<div class="sec-n">02</div>
<h2 id="why-we-hate-what-we-need-most-h">Why we hate what we need most</h2>
<p>Ask any manager what clogs their calendar and the answer comes fast. Meetings. They are the punchline of office jokes and the thing people apologise for when they send another invite.</p>
<p>Take them away and the organisation falls apart. Projects drift. People lose context. Without meetings there is no shared reality, only isolated effort.</p>
<p>We need meetings, and we do not know how to run them. Andy Grove, who led Intel, put it more sharply in <em>High Output Management</em>:</p>
<blockquote class="quote"><p>“Meetings are the medium of managerial work.”</p></blockquote>
<p>He meant it literally. A painter works with colour and a coder with code. A manager works with meetings. They are not a break from the real work. They are the work.</p>
<p>A manager’s output is the output of the team. The way a manager shapes it, by aligning priorities, transferring knowledge, solving problems, and motivating people, is structured conversation. So the task is to take meetings back.</p>
</section>
<p class="back-to"><a href="/thoughts/">All Thoughts</a></p>
</article>