◈ theme · movement-themes
Ten Calibrated Movements
OKLCH token sets for Midnight Editorial, Glass Garden, Warm Minimal, Cybernetic Terminal, Swiss Brutalism, Kyoto Urushi, Scriptorium Vellum, Apollo Avionics, Song Celadon, and Risograph Atelier — each calibrated in both light and dark substrates.
Ten systems. One specimen.
Compare two systems on the same content. Tab reaches real controls; Enter activates the save action. Manual steps keep the sequence available without motion.
A place for your findings
On why the modern eye hungers for the deliberate compression of visual noise, and how Venetian intaglio masters created timeless sovereign gravitas.
Ready
A place for your findings
On the deliberate physics of oak gall ink, calfskin vellum, and the spacious margins that protected sacred texts from cognitive erosion.
Ready
Inspect differences and export
| Property | A | B |
|---|---|---|
| Accent | #8a6520 | #8b261e |
| Radius | 0px | 2px |
| Heading | Playfair Display (Didone Modern) | Playfair Display (Chancery Book Serif) |
| Stiffness | 220 | 140 |
Current interface kinetics: k 170, c 26, m 1. The pressed-state CSS transition is an approximation.
A · Midnight Editorial CSS tokens
[data-movement="midnight-editorial"][data-mode="light"] {
--ds-bg-primary: oklch(0.97 0.01 80);
--ds-bg-secondary: oklch(1.0 0 0);
--ds-fg-primary: oklch(0.18 0.01 50);
--ds-fg-muted: oklch(0.48 0.012 65);
--ds-accent: oklch(0.52 0.11 78);
--ds-radius-md: 0px;
}B · Scriptorium Vellum CSS tokens
[data-movement="scriptorium-vellum"][data-mode="light"] {
--ds-bg-primary: oklch(0.955 0.018 85);
--ds-bg-secondary: oklch(1.0 0 0);
--ds-fg-primary: oklch(0.20 0.02 45);
--ds-fg-muted: oklch(0.48 0.02 60);
--ds-accent: oklch(0.46 0.17 32);
--ds-radius-md: 2px;
}/* Load the selected system's CSS variables in your scoped root. */
const root = document.querySelector('[data-specimen]');
root.style.setProperty('--ds-accent', '#8a6520');Copies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
Source
styles/movement-themes.css
Registry item: /r/movement-themes.json