Typography
Three families, one job each. Instrument Serif for shape, Geist for legibility, JetBrains Mono for proof. These are the styles you've been reading the whole time.
Three families = three jobs, no overlap. Display carries personality on hero lines; UI carries information density; mono signals 'this is a value, a name, an artifact.'
<em> swaps to Instrument Serif italic everywhere — used to mark a term mid-sentence, not for flavor.
Tailwind text classes work today; named roles survive a future rebrand or family swap. The class names that produce them today don't.
SectionLabelEach treatment is shown in the kind of sentence where it belongs.
Component names like TokenStrip and browser APIs like getComputedStyle stay distinct within documentation prose.
Use emphasis to introduce a term worth carrying forward; italic adds meaning, not decoration.
An internal path such as /contact gives a reader a direct next step without interrupting the sentence.
Each preview combines roles in the kind of hierarchy where they work together.
Display type names the subject; mono communicates its status; body copy provides the context.
A section label establishes the structure; body copy carries the explanation that follows.
L is the blurb under a page H1; M is everything inside an article.
If it's a number, version, token, or filename — mono. If it's prose — sans.
Hero per page; the rest is structure.
<em> marks a term mid-sentence; don't decorate.
Display headlines carry tracking-tight; mono carries tracking-widest; UI body is default.
Inline pills vs. block snippets are not interchangeable.