← Design system

Highlights

Selection, scroll-to-text-fragment target, browser find-in-page, and the .no-select utility. Tokens live in styles/typography.css; themes override them. 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.