MaterialGuide

01 · Thesis

The concept

The Pigmentarium treats color as traded matter before it becomes interface. Its near-black architecture borrows from a museum’s dry-material store: brass hardware, accession labels, sealed samples and controlled light. Scrolling physically displaces six cabinet fronts so lapis ultramarine, vermilion, orpiment, Mummy Brown, Tyrian purple and YInMn blue can occupy the whole field. Each record joins provenance to cost, labor and risk. That structure matters: Mummy Brown is evidence of extraction rather than gothic decoration, while arsenic green remains behind a deliberate safety lock.

02 · Mechanisms

How matter moves

1. Drawer travelupdateDrawers() in main.js converts each section’s viewport position into a smoothed 0–1 opening value. It writes --drawer-shift, --drawer-angle and --field-opacity; CSS turns those values into continuous brass-and-oak travel instead of a binary reveal.
2. Atmospheric powderdrawPowder() moves a capped particle field on #powder-field. The active accession supplies its color. The loop stops while document.hidden is true; reduced-motion users receive fully opened, static records.
3. Muller and slabgrindTo() measures pointer or keyboard travel, shrinks irregular mineral polygons, records translucent paste strokes and updates coarseness, micron size and paste state. renderSlab() redraws only after input, avoiding an unnecessary continuous loop.
4. Safety lockThe restricted toggle coordinates aria-expanded, aria-hidden and the native inert property. Its drawn shackle rotates before the arsenic reference drawer enters, making permission part of the experience rather than decorative copy.
5. Residue extractionsweepResidue() records each pointer or keyboard pass across #residue-grille, selecting pigment by horizontal band. renderResidue() redraws a perforated brass plate, powder traces and the EX–04 brush only after input; the completed spectrum receives a sealed accession number.
6. Responsive pressureAt 390 pixels, labels become tall cabinet plates, all three navigation destinations remain tappable, and both canvas instruments keep button and keyboard equivalents. At 834 and 1440, specimens and stories alternate sides to break the repeated record rhythm.

03 · Tokens

Palette & type

The architectural tokens are vault #16130f, bone paper #e9e0ce, brass #c09a4a and ink #19140f. Pigment colors are dominant events, never little decorative accents.

Self-hosted Gloock supplies sensuous, compressed display forms; Archivo supplies the bureaucratic counterpoint for labels, measurements and controls.

04 · Reproduction note

Reproduce this

Prompt an AI frontend agent with one physical metaphor, a content taxonomy and a transformation the visitor performs. Demand material specificity, responsive screenshots and accessible equivalents—not a generic gallery with color-themed cards.