# The Standard — a recruiting page whose scroll is a measure

A drop-in page from [Funeral Thirsty](https://www.funeralthirsty.com/studies/standard.html). Three invented athletes from Elsewhere High. A ruler drawn to true scale sits pinned on the left, and the record on the right is what moves it. A switcher changes the athlete, the unit and the colours.

Theo Marsh, Malik Rowe, June Castellanos, their coaches and their school are invented. The photographs were generated for the page and show no one's face.

No build step, no dependencies, no framework. Three 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 `standard` 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>
  <main class="layout">
    <aside class="stage" id="stage">
      <canvas id="ruler"></canvas>
    </aside>
    <div class="sections" id="sections"></div>
  </main>
  <script src="standard-data.js"></script>
  <script src="standard-draw.js"></script>
  <script src="standard.js"></script>
</body>
</html>
```

The folder holds `vault.jpg`, `kick.jpg` and `sprint.jpg`. The record names those files. The page draws the rest.

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

`#athletes`, `#legend` and `#sheet` are optional. Leave them out and `Standard.select` still swaps the athlete, the ruler still follows the scroll, and nothing prints. The styles are in `standard.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 Standard page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css`, `standard-data.js`, `standard-draw.js` and `standard.js`. |
| `standard-data.js` | The three records: names, marks, colours, units, and the photograph names. `window.StandardData`. |
| `standard-draw.js` | The ruler, the figure, the field and the track. `window.StandardDraw`. |
| `standard.js` | The page. It builds the sections, pins the camera to the scroll, and exposes `window.Standard`. |
| `standard.css` | The layout, and the few styles the demo and previews use. |
| `demo/index.html` | The ruler and the record, and nothing else. No switcher, no legend, no stat sheet. |
| `OPTIONS.md` | The DOM the engine expects, the attribute it reads, and the JavaScript interface. |
| `components/` | Preview pages for design tools: the ruler, 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/` | Three 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 `standard.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 Standard 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 record in `standard-data.js` and the page rebuilds: the marks, the units, the colours, the photograph. `select` copies that record's colours onto `--bg`, `--bg2`, `--accent`, `--ink` and `--soft`, which is why the type matches the ruler. The engine does not read `tokens.css`. Editing the token file does not change the page; edit the record.

The camera (0.16 of the gap each frame), the reading line (halfway down, or 0.68 on a phone), the 900px break and the narrow-stage cutoff (420px) live in `standard.js`. The token file records those numbers. Editing the token does not change the ruler; edit the script.

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