Pattern
Sidenotes
Add supporting context without collapsing everything into the main paragraph flow.
When to use
- When the page has a layout that can support peripheral context
- When secondary notes genuinely help but should not interrupt the main argument
- When the content is likely to be read on larger screens as well as small ones
Avoid when
- When mobile behavior is not considered
- When the note is essential to understanding the main text
- When the layout already contains several competing side elements
Implementation notes
- On small screens, fold sidenotes back into the normal flow cleanly
- Use lighter visual weight than the main text
- Keep spacing disciplined so notes feel attached, not random
Recommended surface: accent