Style guide
Rendered live from the theme's own tokens. Cool paper, navy ink, one deep teal accent at roughly one to two per cent of surface.
Palette — playbook
Monochrome plus one accent. Cool, near-newsprint. If a mock has more than a couple of teal hits, redesign it.
- Ink
- #0E1B2C
- Near-black navy. Text, marks, reversed surfaces. Never #000.
- Paper
- #F2F4F7
- Cool off-white. The canvas. Never #FFF.
- Accent
- #0B5E5A
- Deep teal. 6.9:1 on paper — safe as text. Used sparingly.
- Slate
- #4A5A6E
- 6.4:1 — meta, captions, secondary text.
- Support
- #C4CCD6
- Cool grey. Decorative only — separators, disabled.
Palette — derived
Surfaces and one control border, derived from the core five. The accent already clears AA as text on paper, so no second teal is needed — only a border value, since the hairline rule is too light for controls.
- Ink 2
- #233246
- 12.9:1 — long-form body, a touch softer than ink.
- Paper 2
- #E8ECF1
- Card surface, alternate section band.
- Paper 3
- #DDE3EA
- Hover surface.
- Rule
- #D5DCE4
- Decorative hairline. Not a border for controls.
- Outline
- #7C8798
- 3.3:1 — input and chip borders. The one derived value.
- Accent soft
- #E2EDEB
- Tinted teal surface — topic chips, callouts.
Type
Newsreader carries display and body — this is a serif-led site. Its optical-size axis does the work: opsz 72 on hero and essay titles, 56 on page heads, 36 on section heads, default on body. IBM Plex Sans handles UI, meta and eyebrows. Body copy is held at a 64-character measure.
Why most pivots fail
The pivot is the most romanticised move in startup lore — and the least understood.
In every pivot I have watched up close, the new direction was visible to the team a quarter or two before it became visible to the founder. The team had stopped believing. They were carrying the old plan through the motions, hoping the founder would catch up.
Buttons
Square corners, 44px minimum touch target, one accent button per page.
Chips and meta
Carbon budget
Measured from the files on disk, right now. Budgets are set at the start of a build — this panel exists so drift is visible before launch, not after. The serif-led design costs three font files rather than two; the image budget absorbed the difference.
This page renders from the theme’s own tokens. If a colour or a typeface changes in assets/css/tokens.css, it changes here first.