Polarfuchs

The design system's own CDN, served from this origin. See fox-usage.md for the consumer contract.

Accessibility

Every one of these is a property of the reader, not of this page: which theme, which face, how much movement, how much spacing. They drive data-theme, data-font, data-font-heading, data-motion and the reading-metric custom properties through fox.js, and persist in localStorage - reload and they hold. There is no gallery-only CSS here, so copying the markup gets you this; see fox-usage.md.

Watch this while you drag

This block is set at the reading measure, so it is the one to watch. Every alternate face is self-hosted on this CDN and switched with a single attribute; the metrics are custom properties you can re-pin per subtree. None of it is the default, because no default is right for every reader.

The gap above this paragraph is --paragraph-spacing, and .fox-prose is the only thing in fox.css that reads it - the global reset zeroes every margin, so applying it more widely would retypeset page content the design system does not own. WCAG 2.1 SC 1.4.12 asks that a reader be able to reach 2em.

Dialog

Native <dialog>-backed. Declarative markup plus PolarfuchsDialog.confirm()/.alert() for the no-markup case. See fox-usage.md.

This markup lives in web/index.html - no JS call beyond loading fox-dialog.js and calling PolarfuchsDialog.init(), which runs automatically on load.

Marks

paw
sleepingFox
foxHead
sittingFox
scissors

Icons (55)

Click an icon to copy its name.

Palette

ink
inkSoft
snow
dusk
hairline
ice
moss
dawn
birch
slate
aurora
focusRing