Why this layout
Documentation rewards persistent context. A reader scanning a long article needs three things on hand at once: where they are in the larger structure, what's on the current page, and the prose itself. This layout gives them all three without forcing tab-switching or scroll-jumping.
It applies anywhere Marbl is publishing content-heavy material: study microsites like Thou Art That, future knowledge hubs, repository doc pages, internal handbooks. One canonical pattern means one mental model for readers across the ecosystem.
Anatomy
Three columns inside <main class="kh-shell">:
- Left sidebar (260px sticky): Search heading, line-input search, Contents heading, and a grouped tree-nav with collapsible tiers (1st, 2nd, 3rd level). Active route is marked with
aria-current="page". - Article column (max 800px, centred): Optional featured image, eyebrow, H1 title, lead paragraph, optional inline waveform player, then the body. H2 sections separated by horizontal rules. Pagination at the foot.
- Right TOC (240px sticky): "On this page" with anchor links to every H2. Scroll-spy highlights the current section, smooth-scroll on click.
Readable line length
The article column caps at --kh-article-max: 800px. This holds the body text near 65–75 characters per line — the sweet spot for sustained reading. Wider columns force the eye to track too far between line breaks; narrower starts to feel cramped.
Line length is the most underrated typographic decision in web design. Get it right and everything else is easier.
Rich media
Pages can embed video and audio inline. Both elements respect the article max-width and stay token-driven.
Video
YouTube embeds use the .kh-video wrapper — a 16:9 responsive container with a 1px Marbl border and the canonical radius. Drop any iframe inside.
Audio
Audio uses the marbl-waveform player (shown above the body). Same token system, same border treatment.
Brand tokens
Every value traces to brand-kit.md. No hardcoded hex, no invented spacing scale.
.kh-article__title {
font-family: var(--font-heading);
font-size: clamp(36px, 1.5rem + 2.5vw, 56px);
color: var(--marbl-white);
}Responsive behaviour
Below 1024px the right TOC drops out — there isn't enough room and most readers on tablets scroll rather than scan-jump. Below 768px the sidebar collapses into a "Contents" drawer that slides open to reveal the same tiered tree.
What's next
This is a draft sitting in the canonical component library. The first consumer will be Thou Art That — currently using a similar but separate study-shell pattern that pre-dates this canonical. Once Richard signs off, TAT migrates onto kh-* classes and the study-* prefix retires.