Layout sample: how an article reads

This page is a design sample, not research. It shows how body text, headings, lists and other elements look at desktop, tablet and phone widths. Line length stays near 68 characters so long reads remain comfortable.

Headings and lists

Second-level headings carry the structure. Third-level headings break sections further.

• Body text uses a serif face for long reading.
• Interface elements use the system sans-serif.
• Colours switch automatically in dark mode.

Quotes and callouts

Quotes get an accent rule on the left and softer text.

Callouts highlight a key finding or caveat.

Tables

Code

.prose { max-width: 68ch; }

Wide tables and code scroll sideways inside their own box, so the page itself never scrolls horizontally.