21 DarkroomBuild guide

Guide route

How the Darkroom site was exposed.

This route documents the brief, asset pipeline, evidence labels, implementation choices, and critique loop for variation 21.

Brief

Build a distinct static site under the darkroom metaphor: near-black surface, deep red accent, grain, and contact-sheet proof layout. Proof must be labeled before exposure; concept and built-demo states must be visible.

The interaction model is develop-to-reveal rather than automatic animation. This respects the material metaphor: the operator chooses when to expose, and the site honors that choice.

Evidence labels

Real

Verified work, live integrations, documented clients or documented implementation.

Concept

Fiction labeled fiction. Speculative ideas, unbuilt features, illustrative scenarios.

Built demo

A working interface or demo without client contracts or live data.

Asset pipeline

The site uses CSS-generated negatives, grain, and red safelight palettes as its media layer. No external video or photographic assets are required.

  • Grain: SVG fractal noise embedded as a data URI.
  • Negatives: CSS-generated striped contact-pattern overlays.
  • Proof tags: semantic HTML with ARIA roles and no falsified social proof.

Implementation choices

  • Static HTML/CSS/JS under sites/21/.
  • One H1 per route; no hidden headings.
  • Responsive via clamp(), two breakpoints, and reduced-motion media query.
  • Interactive batch develop via scripted DOM state.
  • Guidance route documents critique passes and future iterations.

Critique passes

  1. Pass 1: Structure and label audit complete. Homepage exposes proof tier chips and a contact sheet with six labeled exposures across real, concept, and built demo.
  2. Pass 2: Responsive and reduced-motion pass checked. Contact sheet collapses from three columns to one; animations disable safely.
  3. Pass 3: Live static verification with Python http.server. Home, stylesheet, script, and guide all return healthy status with no broken internal links.