Styleguide
Every shared component, in both colour modes and both author colours. This page is the reference when we disagree about the design system, and it is noindexed. Toggle the theme in the header — nothing here should change except the palette.
Colour
--paperpage background--paper-raisedcards, code, comment bodies--rulehairlines, 1px only--inkbody text, headings--graphitemetadata, captions, timestamps--draftlinks, focus rings, active states--markerSIGNATURE ONLY — reading marker--author-aTrevor — byline mark only--author-bRuth — byline mark only
Contrast is asserted in CI, not eyeballed here — npm run check:contrast parses this palette out of tokens.css and fails the build below AA in either mode.
Typography
Bricolage Grotesque — display, 600–800
Literata — body prose at 18/19px, line-height 1.65, measure capped at 68ch. This is the face that carries an entire article, so it is the one worth reading a paragraph of before deciding it works.
JetBrains Mono — utility · dates · stack tags · bylines
12One of us builds the systems14One of us builds the systems16One of us builds the systems18One of us builds the systems21One of us builds the systems27One of us builds the systems36One of us builds the systems48One of us builds the systems64One of us builds the systems
Author identity — both colours
Software Developer · 8 yrs · --author-b
Product Manager · 5 yrs · --author-a
The mark is at 14px, and it is always paired with the name in text — §10 forbids conveying author identity by colour alone. On --paper-raised as well as --paper, because comment bodies and cards use the raised surface.
Buttons
Compact chips render at the design's 32px, and grow to a 44px target under pointer: coarse — §10's touch-target floor and the design's density are both satisfiable, they just aren't the same number. Tab through these: every one takes a visible --draft focus ring.
Tags
Metadata strip
Byline leads. The REV line renders only when a revision exists. The third is a co-authored piece — both marks, both names.
Space and radius
4812162432486496128
4px base. Radius is 2px on everything — avatars are the only circles.
The marker — signature element
Reading progress, in the left margin, aligned to the text column — as if someone highlighted the passage they've read. The only place --marker appears sitewide, which is what makes it a signature rather than decoration. Wired to scroll in Phase 2; below 900px it degrades to a 2px rule at the top of the viewport.