Space and measure
An eleven-step space scale on a 4px base, and three line lengths. Editorial spacing is mostly vertical rhythm between rules.
Space
--p234-space-0 | 0 | ||
--p234-space-1 | 0.125rem | ||
--p234-space-2 | 0.25rem | ||
--p234-space-3 | 0.5rem | ||
--p234-space-4 | 0.75rem | ||
--p234-space-5 | 1rem | ||
--p234-space-6 | 1.5rem | ||
--p234-space-7 | 2rem | ||
--p234-space-8 | 3rem | ||
--p234-space-9 | 4rem | ||
--p234-space-10 | 6rem |
Measure
A full-width line of 18px serif is unreadable, and that is most of what "it looks like a dashboard" turns out to mean. Every block of running text is capped.
--p234-measure-narrow | 46ch | Sidebar and rail copy. | |
--p234-measure-text | 66ch | Article body. The reason the article column is capped, not full width. | |
--p234-measure-wide | 78ch | Data tables and wide standfirsts. |
The article measure, capped at 66 characters
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.
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>
</div>Layout
--p234-layout-gutter | 1rem | Page side gutter on phones. | |
--p234-layout-gutter-lg | 2rem | ||
--p234-layout-column-gap | 2rem | Gap between editorial columns, wide enough for the rule to read. | |
--p234-layout-container | 1280px | ||
--p234-layout-container-text | 720px | Article shell. |
Motion
Two durations and one easing curve. Anything that moves respects prefers-reduced-motion.
--p234-motion-duration-fast | 120ms | ||
--p234-motion-duration-base | 180ms | ||
--p234-motion-easing-standard | cubic-bezier(0.2, 0, 0, 1) |