← Design system

Highlights

Selection, scroll-to-text-fragment target, browser find-in-page, and the .no-select utility. Reading highlights draw from the --highlighter / --highlighter-ink pair in styles/themes/theme-setup.css — a scope that repaints one repaints both, never just one. The find-in-page tokens live in styles/typography.css. Nothing falls through to system colors (Mark, HighlightText) — those resolve differently per browser build and OS. For author-controlled highlighting via <mark>, see inlines.

::selection

Drag to select. The background and ink come from --selection-background / --selection-color.

The fox is the protagonist of countless typography demos because it touches every letter on the way over the dog. Drag across this paragraph to see the selection treatment for the active theme.

::target-text

Scroll-to-text-fragment URLs (#:~:text=word) highlight the matched span on arrival. Click this link to highlight the word below.

The cat sat on the marmalade jar like it had been waiting all morning for the moment.

::search-text

Press Cmd+F and search for typography. Every match takes --search-text-background; the active match takes --search-text-current-background / --search-text-current-color. Chromium-only as of 2026.

Good typography is invisible. Bad typography is everywhere. The difference between competent typography and beautiful typography is mostly time and care.

.no-select

Blocks cursor selection. Double-click won't select a word; drag won't paint. Cmd-A then Cmd-C skips these regions, so chrome drops out of the clipboard automatically.

Site chrome — nav, wordmark, "Students" link. Try to drag-select.

Article content. Drag to select me — this part copies cleanly.

Cmd-A this whole page and paste somewhere. The chrome blocks above and below get filtered out; only this body text comes through.

Site footer — most of this is chrome and won't copy. But specific bits opt back in: hi@perpetual.education and © 2026 Perpetual Education are inside .allow-select, so they survive the Cmd-A.