Type
Voices name the role a piece of text plays — not its appearance. The same voice can render any number of ways: pick a scale below and watch every voice re-tune. Markup, voice names, and intent stay the same. Use these classes; do not write bare font-size, font-weight, or font-family.
Type scale
The active scale tunes how loud each voice is. Try a few and notice that nothing in the markup changes — just the ratio between voices.
The voices
Smallest to loudest. Each is a class name — apply to <p>, <span>, <h2>, anything.
quiet-voice
data-voice
calm-voice
strong-voice
attention-voice
loud-voice
Blockquote & thinking
Default <blockquote> for pulled-out passages quoted from somewhere. For asides and inner monologue, use <p class='thinking'><i>...</i></p> — the class is the visual hook, the <i> is the semantic mood shift screen readers pick up on.
The browser is doing more for you than you realize — the job is to learn what it's already handling before reaching for a library.
The browser is doing more for you than you realize — the job is to learn what it's already handling before reaching for a library.
Okay — the brief says "make it feel like the student is mid-thought." So the tone needs to land somewhere between a margin note and an inner monologue.
But if I lean too far into "monologue," it starts to read like prose and loses the aside quality. The bubble shape is doing some of that work for me already.
Maybe the rhythm is: short, short, slightly longer — like the thought is forming as it goes. That's how people actually think on the page.
Yeah. Ship it and see how it reads in a real workshop.