Simultaneous Contrast
Both inner squares below are the exact same pigment (#d4a74a). Observe how surrounding luminance radically alters perceived brightness.
A single card component viewed through two different movements. Drag the handle to compare.
A single card component viewed through two different movements. Drag the handle to compare.
Material Substrates & Chromatic Memory
#0a0a0foklch(0.12 0.01 265)Lamp Black 84% · Prussian Iron 12% · Bone 4%
5-SWATCH HARMONY MAP#14120f#e8e4dc#949088#c9a55a#dbb978Deep Prussian Charcoal
CURATOR NOTESDeep light-absorbing ink canvas grounded by oxidized Venetian gold and bone typography.
#f7f5f0oklch(0.96 0.01 85)French Chalk 78% · Bleached Linen 18% · Raw Ochre 4%
5-SWATCH HARMONY MAP#ffffff#0a0a0f#5a5854#8a6520#a67c2eAged Warm Rag Paper
CURATOR NOTESCrisp, authoritative editorial page with heavy ink serif hierarchy and antique bronze accents.
#f0f7f4oklch(0.97 0.015 165)Zinc White 90% · Terra Verte 7% · Titanium Oxide 3%
5-SWATCH HARMONY MAP#ffffff#1a2e1a#4e634e#4a9e6e#6ab88aPale Willow & Quartz
CURATOR NOTESGreenhouse aesthetic with frosted glass layers, deep botanical emeralds, and dewy mint highlights.
#0a1510oklch(0.18 0.04 155)Phthalo Green 60% · Carbon Black 30% · Sap Lake 10%
5-SWATCH HARMONY MAP#1e3723#d4ede0#7fa38d#5cb87e#7ecf9aNocturnal Canopy
CURATOR NOTESBioluminescent conservatory with rich chlorophyll undertones and vivid emerald accents.
#faf8f5oklch(0.98 0.008 80)Calcium Carbonate 75% · French Kaolin 20% · Yellow Ochre 5%
5-SWATCH HARMONY MAP#ffffff#2d2926#756d66#b8704a#cf8c66Warm Limestone & Linen
CURATOR NOTESA tactile, approachable earth palette with roasted coffee typography and kiln-fired terracotta.
--ds-accent: #d4a74a; --ds-bg-primary: #faf8f5; --ds-fg-primary: #14120f; --ds-fg-muted: #756f66;
“Bespoke formulation created live by the visitor. Ready to be clipped onto your personal Swatch Ring or exported as production design tokens.”
Before an interface is formed, it begins with pigment and light. This chamber displays six formulated architectural paint chips. Inspect physical finish sheens (Velvet Matte, Eggshell, High Gloss Lacquer), flip each chip to explore its recipe formula, and clip your favorite samples to your personal swatch ring.
“The interesting problems live in the gap between what is designed and what is actually felt.”
“Design systems are not decorative formulas — they are cognitive instruments that alter how the human mind computes trust, urgency, and spatial orientation.”
Both inner squares below are the exact same pigment (#d4a74a). Observe how surrounding luminance radically alters perceived brightness.
How does corner curvature change the perceived decisiveness of an action? Click the actuator below to record dwell latency.
Visual density translates to sonic timbre. Listen to the harmonic frequency profile synthesized for the active movement.
“I think in systems, not deliverables. The things I build are designed to amplify human judgment rather than replace it.”
“When primitives assemble into a functioning spatial environment, design tokens cease being variables — they become the atmosphere of human thought.”
“Knowledge only creates value when it reaches the people who need it.”
On the nature of the archive and invisible systems.
I find the invisible architecture underneath messy human problems—then I build the system that should have existed around them.
The Chromologium is an interactive design archive organized as a collection of Visual Movements — self-contained aesthetic systems that transform the same UI components through different color palettes, typographic hierarchies, border treatments, and shadow systems. Each Visual Movement demonstrates how design tokens function as a complete aesthetic language, not merely a list of variables.
Three movements are on display: Midnight Editorial (dark, typographic, editorial), Glass Garden (light, organic, airy), and Warm Minimal (clean, approachable, neutral). Every component specimen — button, card, form, type scale — is rendered identically across each movement, making the transformation visible and direct.
It exists to demonstrate that design systems are not constraints — they are instruments designed to amplify human judgment rather than replace it. The same instrument, played differently, produces entirely different music.
Designed and engineered as part of Temporal Architecture.
An open specimen archive and laboratory exploring color science, design systems, and experience architecture.
Take the token system into your own projects or inspect the open-source implementation.