Pattern
Modes and fallbacks
The same page in light, dark, higher contrast, forced colours, print, reduced motion, and without JavaScript.
01
Modes
- Light and dark
- Follow the system setting (
prefers-color-scheme); no switch on the site. Neutrals swap, links turn lavender, photos dim to 88%, bands stay indigo.theme-colorfollows:#F5F3EFand#121212. - Higher contrast
prefers-contrast: more: secondary ink and hairlines become full ink.- Forced colours
- Rules use
CanvasText; the rail marker and pressed filters useHighlight; buttons and figure parts get borders. - Agent figures print every step; their buttons hide (see Agent figure playback for the ledger exception).
- Reduced motion
- Every transition and animation off; page transitions become plain loads; figures show their end state.
- Without JavaScript
- Every page reads and works: no rail marker, no scroll-up block, only the 200ms crossfade between pages, the full Bookshelf list, and figures at their end state.
02
Testing
Check a change in light and dark, at 390, 768, and 1440, with reduced motion on, with JavaScript off, and in Windows high contrast or an emulation of forced colours. The catalogue shows components in light and dark; template specimens follow the reader’s system setting.