---
title: "Hi-fi screens"
description: "Stage 4: one folder per screen with its contract, boards per state and data-binding map."
source: "design/hifi/README.md"
---

> Part of [Brand and design](/design/llms.txt). Every page: [llms.txt](/llms.txt).

# Hi-fi screens

One folder per screen, named by its ID in `../screens.json` (listed in `../lofi/screens.md`):

```
hifi/S16/
  screen.md      contract (states, flows, API calls, local state), a board per state, tokens used, strings
  bindings.md    data-binding map: every field to its endpoint or local state, and the four state lines
```

The boards are not in these folders: they are the committed HTML in `../screens/<group>/<screen>--<state>.html`
(zh-Hans) and `….en.html` (en), drawn on the example data in `../../docs/api/examples/`. `screen.md` links them. Both files are
generated from `../screens.json` by `pnpm design:index` (botgumi's `botgumi-design index`); do not edit them by hand.
`screens.json` itself is exported from the gallery by `python3 design/tools/hifi_index.py`, which reads
`../screens/manifest.json`, `../data-binding.md`, `../states.md`, `../flows.md`, `../strings.json` and `../base.css`.

A required state (`loading`, `empty`, `error`, `offline`) that has no board of its own is still a row in the Boards
table: it says so, quotes `../states.md` and links the board that covers it where one exists.

Every screen is at stage `hifi`. After its retroactive gate passes, set its `stage` in `../screens.json` to
`approved` and its `gate` to the issue (`#12`), then run `pnpm design:index`; the export keeps both. `node design/check.mjs` checks each folder.