# Second Set — a day of classes in one matching set

A drop-in page from [Funeral Thirsty](https://www.funeralthirsty.com/studies/secondset.html). An invented activewear brand, shown as one day: six scenes, a clock, a set tray, and a line sheet that prints. Tap a piece and it joins the set. The tray says when a set is complete.

The garments, the prices, the classes and the people in the photographs are fictional. The photographs were generated for the page.

No build step, no dependencies, no framework. Two scripts, 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 `secondset` 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
<html lang="en" data-dir="your-photos/">
<body>
  <div id="scenes"></div>
  <script src="secondset-data.js"></script>
  <script src="secondset.js"></script>
</body>
</html>
```

The folder holds the eleven photographs named in the data file: `run`, `hiit`, `coffee`, `strength`, `pilates`, `evening`, `flat-matcha`, `flat-cherry`, `flat-cocoa`, `flat-unitard`, `flat-layers`, each a `.jpg`. The page draws the scenes.

Leave `data-dir` off and the script loads `../assets/studies/secondset/`, 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.

`#clock-time`, `#clock-scene`, `#tray` and the nodes inside it, `#sets` and `#scrollhint` are optional. Leave them out and the day still builds, `SecondSet.add` still fills the set, and nothing is printed. The styles are in `secondset.css`, and in `styles.css` as the site uses them.

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

## What is in this folder

| Path | What it is |
|---|---|
| `index.html` | The site: the Second Set page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css`, `secondset-data.js` and `secondset.js`. |
| `secondset-data.js` | The brand: colours, pieces, scenes, flats. `window.SecondSetData`. |
| `secondset.js` | The page. It builds the day, moves the clock, keeps the tray, and exposes `window.SecondSet`. |
| `secondset.css` | The layout, and the few styles the palette and type previews use. |
| `demo/index.html` | The day, and nothing else. No clock, no tray, no line sheet, no scroll hint. |
| `OPTIONS.md` | The DOM the engine expects, the attribute it reads, and the JavaScript interface. |
| `components/` | Preview pages for design tools: the day, 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/` | Eleven photographs, 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 `secondset.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 Second Set 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 a scene in `secondset-data.js` and the page rebuilds: the hour, the copy, the pieces, the photograph, the palette. `arrive` copies that scene's paper, ink and accent onto `--paper`, `--ink` and `--accent`, which is why the type matches the photograph. The engine does not read `tokens.css`. Editing the token file does not change the day; edit the record.

The prices, the verdict, the HIIT interval (45 seconds of work, 15 of rest), the reading line (0.55 of the viewport) and the tempos live in `secondset.js`. The token file records the reading line and the interval. Editing the token does not change them; edit the script.

Point `data-dir` at another folder of the same eleven file names to change the pictures. Keep the names, or edit the record.

Printing the study page prints a line sheet. It sends nothing.