Mordant & Madder

Colophon · how the dye floor was made

Every colour, the arithmetic the plants use.

Mordant & Madder is a fictional natural-dye studio on the Fremantle salt flats, built for people who like watching a material do something honest. The page has one job: let you dip cloth into four living vats and watch indigo come up pond-green and turn blue in the air — real pigment, real oxidation, no photographs.

The palette

Six colours, each argued from the vat

Nothing here is a “tasteful default”. The neutrals are the studio — raw linen and iron floor — and every accent is a pigment you could actually lift from a plant or a root.

Raw linen
#EDE4D2
The ground the whole floor is built on — undyed cloth, warm and unbleached. Every swatch starts here and multiplies down from it.
Iron studio
#2A2C2D
The working floor: galvanised, cool, unlit. It lets the wet colour of the vats read as the only light in the room.
Indigo, aired
#33528C
The blue the air makes, not the bath. The signature colour — it only exists after oxygen has done its seven seconds of work.
Leuco green
#5E6B2E
Indigo in the vat, starved of oxygen — the pond-weed green a cloth comes up before it turns. Half the trick is showing this at all.
Madder root
#A8402C
Three years in the ground for this red. Warm, earthen, faintly orange — the colour that clothed two empires’ soldiers.
Weld gold
#C9A227
The clearest yellow in the old world, from a roadside weed. Over indigo it makes the greens the forests are named for.

The type

A signwriter’s serif, a chemist’s sans

The vat is green.
Instrument Serif
Display and voice. Its high contrast and slightly hand-cut ductus read like the painted signage over an old dye-house door — warm, a little irregular, never corporate. Set large and italic for the studio’s asides.
INDIGO · MADDER · WELD · IRON
Work Sans
The instrument’s labels: vat names, the dip ledger, hex read-outs. A neutral, legible grotesque with tabular numerals — it does the technical talking so the serif can do the poetry.

The techniques

How the cloth actually dyes

No image is a photograph. The cloth is a procedural canvas, and the colour is physics, not a palette swap.

  • Procedural cloth (Canvas 2D). A value-noise field gives the weave its slubs and unevenness; a ragged edge mask and a woven overlay are composited with multiply and destination-in so every swatch has a torn selvedge and a grain.
  • Subtractive colour, done properly. Each dip layers by the Beer–Lambert law in linear-light RGB — the cloth’s colour is multiplied by the dye’s transmittance raised to an absorbance that falls off with each successive dip (0.82ⁿ), so the third indigo bath adds less than the first, exactly like the real thing.
  • Oklab for the human steps. The green→blue oxidation cross-fade and iron’s “saddening” both interpolate in oklab, so the transitions move through colours a dyer would recognise instead of muddy sRGB midpoints.
  • Resist bindings. Itajime, arashi and mokume are generated as analytic masks over the noise field, so bound areas resist the bath and the patterns layer between dips.
  • GSAP choreography. One timeline flies the rig to the vat, lowers the cloth, clips it at the liquid line, throws a couple of drips, and lifts it back — the only motion library on the page.

The signature: indigo that airs before your eyes

Indigo never dyes blue in the bath — the pigment is only soluble in its reduced, oxygen-free “leuco” form, which is yellow-green. The blue happens in the air. On lift, the cloth is painted with the leuco transmittance (pond-green), then a 7-second eased progress drives an oklab cross-fade toward the true indigo transmittance. The refinement that makes it read as real: oxidation isn’t uniform. The cloth is rendered as twelve horizontal bands, and the front sweeps top-first — the top, lifted clear of the vat earliest, turns blue while the wet bottom edge holds its green a few seconds longer.

Leuco green to aired indigo — the path the cross-fade walks, band by band.

The record

Three passes on the floor

  • Pass 1 — Craft

    Cut a dead ternary left in the hand-staining logic, and consolidated four rules that set font-size twice (a serif override stacked on a sans value) down to a single declaration each. Confirmed body copy on linen clears 4.5:1 and the scale is deliberate, not the default 16/24/32.

  • Pass 2 — Depth

    Rebuilt the oxidation from a flat, whole-cloth cross-fade into a twelve-band front that airs top-first — the enrichment above. Probed it headless mid-air: the top pixel read blue while the bottom was still green, then both settled to a seamless uniform blue. Added a tactile press state so a vat dips under the cursor, distinct from its hover-lift.

  • Pass 3 — Hardening

    Verified the reduced-motion path settles indigo straight to its final blue with no stuck-green frame, and that dip, oxidation and reduced-motion all run with zero console errors. Applied the Chanel rule — trimmed the dip splash from three drips to two so the moment reads calmer against the new front — and re-checked the layout holds with no horizontal overflow at 375px.

Take a cloth back to the vats — the dye floor — or see the rest of the Generative Assets collection.