Brand
One idea runs through all of this: knowledge has a stable base and a moving edge. The mark says it, the palette stays out of the way, and the typography does the talking.
The mark
Three strata. The base is whole and heavy — the durable explanations of how a system works, the part that is safe to rely on. Above it the rows narrow, and the top row is broken: the dated, unsettled edge where things are still moving.
That is the actual structure of the product, not a decoration. Anything that closes the gap in the top row breaks the idea.
Primary — monochrome
Two-tone — display sizes only
Reversed
Clear space
Keep free space on all sides equal to the height of the base bar — one sixth of the mark. Nothing sits inside it.
Minimum size
16px for the mark on screen, 6mm in print. Below that the break in the top row stops reading, so use the solid favicon tile instead.
Lockup
Mark and wordmark, aligned on the optical centre, separated by one third of the mark’s width. The wordmark is Instrument Serif at its regular weight — never bold, never letterspaced.
My Context Provider
My Context Provider
Palette
A single warm olive scale, and nothing else. There is no brand accent colour on purpose — the content carries the interest, and a second hue would compete with it. The one place colour means something is the provisional accent in the two-tone mark.
| Swatch | Token | Hex | Used for |
|---|---|---|---|
| olive-50 | #fbfbf9 | Reversed type on dark | |
| olive-100 | #f4f4f0 | Page background | |
| olive-200 | #e8e8e3 | Hover fills | |
| olive-300 | #d8d8d0 | Hairlines | |
| olive-400 | #abab9c | Provisional accent, list markers | |
| olive-500 | #7c7c67 | Numerals, tertiary text | |
| olive-600 | #5b5b4b | Fine print | |
| olive-700 | #474739 | Body text | |
| olive-800 | #2b2b22 | Reserved | |
| olive-900 | #1d1d16 | Reserved | |
| olive-950 | #0c0c09 | Headings, the mark, dark surfaces |
Typography
Display — Instrument Serif
Aa Bb Cc
Headings, the wordmark, pull quotes
Regular weight only. Tightened tracking at large sizes. Used for anything that should be read as a voice rather than an interface.
Text — Inter
Aa Bb Cc
Body, labels, metadata
Regular and medium. Body sits at 16–18px on a generous leading; metadata drops to 14px in olive-600 and never smaller.
Voice
Specific, unhurried, and honest about what is not known. Say the number. Name the source. Where a platform and its practitioners disagree, give both positions rather than resolving them. Never manufacture urgency — the reader came here to understand something, not to be sold the understanding.
Sentences end. Adjectives are rationed. If a paragraph could have been produced by any competitor, it should not ship.
Do not
- Recolour the mark outside the olive scale.
- Stretch, rotate, outline or add effects to it.
- Rebuild the top row as a solid bar — the break is the meaning.
- Set the wordmark in anything other than Instrument Serif.
- Place the mark on a busy image without a solid panel behind it.
