TL;DR
Use at the top of every page. Three to five bullets. Keep total copy under 80 words.
Components
Small, repeatable blocks for ADHD-friendly re-entry without turning the page into a sticker sheet.
TL;DR
- Use one callout every few scrolls.
- Keep labels fixed.
- Use visuals when they clarify a decision.
- Reset blocks are re-entry points.
Tokens
Inherited Base
The component set inherits the Chaos Console palette and font tokens: dark ground, cream text, orange action color, JetBrains Mono for metadata, and the Space Grotesk display stack for headings.
Radii stay at 8px or less. Borders do the framing. No nested cards, no decorative blobs, no separate frontend system.
Reset
Components exist to reduce cognitive load. If a component makes the page louder without making it easier, delete it.
Library
Callout Set
Key Stat
Use only when a number changes the editorial decision. Every number needs a source.
Steal This
Use for operational moves: edit patterns, script tests, production defaults, or repeatable checks.
Skip This If
Use to protect attention. It tells the reader when a section is not for their current problem.
Reset
Use every few sections as a one-line recap. It lets a distracted reader re-enter without scrolling.
Forum Note
Use for Reddit or niche-forum material. Mark it anecdotal, cite it, and never let it carry a core claim.
Library
Visual Set
Figure Shell
Use for charts, diagrams, proof boards, and workflow maps. Every figure needs an accessible label and a caption.
Workflow Map
Use on index or chapter overviews when the reader needs production order before detail.
Diagnostic Bars
Use for relative craft emphasis. Do not use for sourced numerical claims unless the underlying numbers are cited.
Proof Images
Use synthetic panels for document, map, and timeline jobs when a real image would imply unsupported evidence.
Example Figure
Document
Map
Timeline
Use visual scaffolding to help the reader skim the operating logic. Do not make fake evidence.
Usage
Examples
Steal This
Write the callout as a command or diagnostic. Avoid decorative summaries that repeat the paragraph above.
Forum Note / Reddit / Anecdotal
Use this marker when the source is useful operator chatter rather than a vetted production breakdown.
Marked addition: public forum signal.
<div class="callout steal">
<span class="callout-label">Steal This</span>
<p>Draft the cold open before the full script.</p>
</div>Do not put callouts inside cards. Do not use more than two callouts back to back. If the page needs that much rescue, the prose is the problem.