Discover The Pigmentarium: An Digital Museum of Ancient Colors
Imagine a digital vault that mimics the hush and weight of a centuries-old museum storage room, dedicated to the world’s most historic pigments. This site, crafted entirely by AI, transforms interactive scrolling into a tactile experience, revealing six rare substances—lapis lazuli, vermilion, orpiment, mummy brown, Tyrian purple, and YInMn blue—each accompanied by provenance, cost, and risk. Its signature feature? A physical-inspired drawer mechanism that seamlessly transitions the visitor from browsing to engaging with the materials, making history feel tangible and alive.
The Design Foundations: Material and Interaction
The site’s visual language draws from museum archives—brass hardware, sealed samples, and labels—crafted with a dark, architectural shell that whispers of antiquity. Its palette relies on rich, material-driven hues, each pigment represented as a dominant event rather than mere decoration, emphasizing their significance. The core interaction revolves around a set of drawers that slide open smoothly, guided by a sophisticated JS system that translates scroll and pointer inputs into continuous, physical-like movements. These movements are rendered with CSS variables that mimic brass and oak travel, creating an immersive, tactile feel. Complementing this are a powder field and a safety lock mechanism—metaphors for extraction and security—that engage users in a layered experience of discovery and permission, transforming permission into an integral part of the journey.
The Technical Approach: Building a Material-Driven Archive
Constructed through a three-stage pipeline, the site begins with a detailed build phase that defines the hardware-inspired mechanisms—drawer movements, pigment residue extraction, and interactive tools. It is then subjected to a rigorous critique focusing on material authenticity, interaction fluidity, and accessibility features like reduced motion. Finally, an art director certifies the coherence of the experience, ensuring that the museum-like atmosphere and tactile metaphors resonate authentically. The entire process is guided by a comprehensive material and interaction guide, ensuring each element—such as the mineral slabs or safety locks—is meticulously realized and responsive across devices.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 56 of 175, “pigmentarium”):
THE PIGMENTARIUM — a vault of historical colors. Aesthetic: museum vault drawers + pure color fields. Palette: near-black vault #16130f, brass drawer pulls, then EACH PIGMENT owns its section’s field (lapis ultramarine, vermilion, orpiment, mummy brown, Tyrian purple, YInMn blue). Fonts: gloock (display), archivo (labels). SIGNATURE: pigment drawers that SLIDE OPEN on scroll to flood the viewport with the color itself (full-bleed, subtly granular like ground powder — canvas grain), each with origin story, price-per-gram history, toxicity seal, and a muller-and-slab GRINDING interaction (drag circles to grind chunks into smooth paste, the swatch refining as you work). Forbidden-colors section (arsenic greens) behind a warning tape toggle. Unforgettable: color as substance, not value.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/pigmentarium/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
undefined
The full build notes live in the room’s design guide.
Explore The Pigmentarium in Action
Experience this AI-crafted digital vault firsthand by visiting the live site. Dive into the full spectrum of historical pigments, explore their origins, costs, and risks, and see how a virtual storage machine can bring centuries-old materials into a contemporary digital space. Interested in more? Browse all 175 rooms in this AI-designed exhibition hub, each exploring different facets of heritage, craft, and history preserved through innovative web design.
Visit the live room → · Browse all 175 rooms
Previously in Wing III
- Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
- Room 52: The Royal Mews — Falconry House, Est. 1487
- Room 53: Core Facility 53 — 120,000 Years Under Pressure
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
ancient color pigment collection
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
