PatternsWriting patternsBody copy
Body copy
The paragraphs that make the case. The bulk of the work on the site.
Anatomy
Body copy is set in DM Sans, 1.0625 rem, line-height 1.65, in--foreground at 82% opacity. The column is 42 rem on desktop, 100% on mobile. Paragraphs are separated by 1 rem of vertical space; there is no first-line indent.
Rules of thumb
- Sentences are short. Most are 12-20 words. None are over 30.
- Paragraphs are 2-5 sentences. If a paragraph is 7 sentences, it's two paragraphs.
- One idea per paragraph. Two ideas means a H2.
- Active voice. "The system uses 8 tokens" — not "8 tokens are used by the system".
- Present tense for the page; past tense for the case study.
- No exclamation marks. The exclamation is a font choice, not a punctuation choice.
- No emoji. They are not part of this system.
- No em-dash overuse. One per paragraph maximum; often fewer.
Do and don't
Do
The system uses 8 color tokens. The choice was deliberate: a small palette is easier to defend in PRs and easier to live with for three years.
Active voice. Two sentences. One idea. A specific argument.
Don't
It is important to note that there are a number of different color tokens that have been carefully chosen to form a palette that we believe will serve the project well into the future.
Passive voice. One sentence. No idea. Forty-three words to say what should take twelve.