# Elsewhere

A terminal, and three worlds behind it. Here is the shell. Rain is language falling. Eden is a beach that keeps your clock. `cd` between them and the picture changes. The pictures are drawn. There is no photograph.

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

## What you get

Unzip `elsewhere.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.

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#fx`, `#out`, `#form`, `#ps` and `#in`. `elsewhere-fx.js` has to load before `elsewhere.js`. The world switcher can be left out. The shell still answers `cd`. The demo is the terminal and the canvas, with no switcher.

IBM Plex Mono is in `assets/fonts/`. The banner's block glyph is outside that subset, so the banner uses the system mono. No other face is loaded.

## Files

| Path | What it is |
|---|---|
| `index.html` | The study page, rewired to this folder. |
| `styles.css` | The study's stylesheet. |
| `elsewhere.css` | The same styles, for the demo and the component previews. |
| `elsewhere-fx.js` | The painting. Byte for byte with the study. Loads first. |
| `elsewhere.js` | The shell. 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 `elsewhere.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 Elsewhere 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 three worlds live in `W`, inside `elsewhere.js`. Change a line there and the prompt, the boot and the commands follow. The painting lives in `elsewhere-fx.js`. Rain's words, the beach's sky and the three grounds are constants in that file.

The painters do not read `tokens.css`. Editing the token file does not change a world. Rain and Eden replace the eleven custom properties on the page. Here is the opening set, and it is the contract.

`ElsewhereFX.rain.setDensity` and `ElsewhereFX.eden.setHour` settle in the same turn. `ElsewhereFX.apply` sets the painter and `data-world` in the same turn. The shell's `cd` waits out the transition. Do not read the tide, a drip, or the boot after a wait.

There is no photograph to replace. The page has no heading, so the studio's title plate uses its own default.