# The Light Table — a photographer's proofing sheet

A drop-in sheet from [Funeral Thirsty](https://www.funeralthirsty.com/studies/lighttable.html). Twelve frames from one session. Read one with a loupe, circle a pick in grease pencil, write a note, and the ticket adds it up. Sending, in this study, sends nothing.

Northlight Studio and Bellwether Ceramics are invented. The photographs were generated for the page.

No build step, no dependencies, no framework. One script, one attribute.

## Unzipping

The zip is flat: its files land in whatever folder you unzip it into, with `index.html` at the top. Make a folder called `lighttable` first if you want them contained. Design tools that import the zip open that `index.html`, the site, as the entry.

## The minimum that installs it

```html
<main class="table">
  <div class="sheet" id="sheet" data-dir="your-frames/"></div>
</main>
<script src="lighttable.js"></script>
```

The folder holds `frame-01.jpg` through `frame-12.jpg`, and a `-thumb` of each. The sheet draws the thumbs. The loupe reads the full frame.

Leave `data-dir` off and the engine loads `../assets/studies/lighttable/`, which is the study's own folder and will 404 inside this kit. A kit page always sets the attribute. The path is resolved against the page, not against the script, and a missing slash is added.

`#loupe`, the ticket (`#pick-count`, `#total`, `#send`, and the rest), `#clear`, and the send dialog are optional. Leave them out and the sheet still circles picks and keeps notes. `LightTable.pick` and `LightTable.note` do that without the buttons. The styles are in `lighttable.css`, and in `styles.css` as the site uses them.

Serve the page over a web server if you want the frames. Any server will do, including `python3 -m http.server`.

## What is in this folder

| Path | What it is |
|---|---|
| `index.html` | The site: the Light Table study page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css` and `lighttable.js`. |
| `lighttable.js` | The sheet. Twelve frames, the loupe, the pencil, the ticket, the dialog that sends nothing, and `window.LightTable`. |
| `lighttable.css` | The table, and the few styles the demo and previews use. |
| `demo/index.html` | The sheet, and nothing else. No loupe, no ticket, no dialog. |
| `OPTIONS.md` | The DOM the engine expects, the attributes it reads, and the JavaScript interface. |
| `components/` | Preview pages for design tools: the sheet, the palette, the type. Each opens in a browser on its own. |
| `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/sample/` | Twelve frames and their thumbs, generated for the studio and released under CC0. |
| `assets/fonts/` | IBM Plex Mono, under the SIL Open Font License, with the license text. |
| `LICENSE.md` | MIT for the code, CC0 for the photographs, 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 `lighttable.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 The Light Table 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

Change `--room`, `--ink`, `--ink-soft` and `--grease` in `tokens/tokens.css` (or `tokens.css`) and the page moves with them. The circles, the notes and the focus ring are `--grease`. The engine reads none of these from the token file; the stylesheet does.

The package size (6), the extra price ($18), the loupe magnification (2.4), the note length (40) and the finger-hold (320ms) live in `lighttable.js`. The token file records those numbers. Editing the token does not change the sheet; edit the script.

Point `data-dir` at another folder of twelve frames to change the session. Keep the `frame-01.jpg` names, or edit `FRAMES`.