# Darkroom

A site you develop. Under the safelight you rock a tray until a print is ready, then fix it, and the lights come on. Four prints hang on a line. One of them is a photogram the page draws itself. There is no photograph.

The code is MIT. The names are not licensed. See `LICENSE.md`.

## What you get

Unzip `darkroom.zip`. `index.html` is at the top of the archive, and it is the study, running. Open it in a browser. Nothing else has to be installed, and nothing is fetched except the two webfonts.

The same folder is the design system. A person unzips it and has the site. A design tool reads the same files and has the tokens, the guideline and the component previews.

## Minimum install

The page needs `canvas#tray`, and `darkroom-fx.js` has to load before `darkroom.js`. The timer, the buttons, the drying line, the print and the contact sheet can be left out. The demo is the tray alone.

The picture is drawn. There is no image file to host. IBM Plex Mono is in `assets/fonts/`. Onest and Poiret One are loaded from Google Fonts and are not in the zip.

## Files

| Path | What it is |
|---|---|
| `index.html` | The study page, rewired to this folder. |
| `styles.css` | The study's stylesheet. |
| `darkroom.css` | The same styles, for the demo and the component previews. |
| `darkroom-fx.js` | The tray. Byte for byte with the study. |
| `darkroom.js` | The prints and the two rooms. Byte for byte with the study. Loads second. |
| `tokens/tokens.json` | The kit's colours, type and sizes in the W3C Design Tokens format (2025.10). |
| `tokens/tokens.css` | The same values as CSS custom properties. |
| `DESIGN.md` | The guideline: colour, type, spacing, layout, components, motion, voice, brand, anti-patterns. |
| `design-system-spec.json` | The manifest Claude Design reads. |
| `manifest.json`, `tokens.css`, `design-tokens.json`, `components.html`, `USAGE.md`, `preview/` | The Open Design layer: its manifest, its token contract, its token JSON, a component fixture, a usage guide and preview pages (the site, colors, typography, spacing). |
| `assets/fonts/` | IBM Plex Mono, under the SIL Open Font License, with the license text. |
| `LICENSE.md` | MIT for the code, and what is not licensed. |

## Loading it into a design tool

The kit carries two layers, one for each tool, describing the same system.

**Open Design.** Import `darkroom.zip` and it opens on `index.html`, the site, with every other page listed alongside it. Read as a design system, the same archive supplies `manifest.json`, `DESIGN.md`, `tokens.css`, `components.html`, `USAGE.md` and the pages under `preview/`, and Darkroom becomes a system other work can be rendered in.

**Claude Design.** Reads `design-system-spec.json`, the component previews under `components/` with their first-line `@dsCard` markers, and `tokens/tokens.json` in the W3C Design Tokens format.

## Making it yours

The four prints live in `PRINTS`, inside `darkroom.js`. Change a title there and the line, the print and the contact sheet all follow. The photogram is drawn in `darkroom-fx.js` from a seed. A new sheet is a new seed.

The tray does not read `tokens.css`. Its room, its paper and its safelight are constants in the drawing script. Editing the token file does not change the picture.

The day of a print is a number from 0 to 1.6. Ready is 0.75. Ruined is 1.6. Those numbers live in the script. The token file records them. Editing the token does not change them.

Fixing a print brings the lights on and sends nothing. There is no photograph to replace.