# ux-proposals/design-kit/

The Tromml design kit's drawn screens: mockups of Headframe, the Minecart mobile app, the Chrome extension and the
marketing site as they look today, plus the proposed shared Tromml style and its three redrawn screens. Open
[`index.html`](./index.html) (https://pages.tromml.com/ux-proposals/design-kit/).

Made for the design-kit roadmap, item R7 (tromml-dev-records, `features/design-kit-r7/`). The source is the kit in
tromml-dev-records (`design/kit/`), which is private. Product screens show fictional data only. The marketing-site
screens copy the live site's own content.

Built from: kit and R6 redraws at tromml-dev-records `5e53f47`, dev-team plugin `f5c3058`, published `2026-10-16`.

## What is here

- `<screen>/index.html`: one self-contained page per drawn kit screen, made by `design-kit bundle`. Styles, scripts and
  icons are inline; only Google Fonts load from outside. The bar at the top switches states and theme.
- `<screen>--option-a/index.html`: R6's redraws in the proposed style, copied from
  `tromml-dev-records/features/design-kit-r6/design/` and rebuilt with `design-kit refresh`.
- Not here: the kit's stubs (screens listed but not drawn) and the bundles' manifest files.

Don't edit these pages by hand: change the kit, then refresh.

## Refresh it

You need the Tromml workspace at `~/Code/github/Tromml` (with `dev-team.json`, `tromml-dev-records`, `dbt-poc`,
`Tromml-Marketing-Site` and `tromml-static-pages`), the dev-team plugin at `~/code/github/dev-team` at `a877c27`
or later, node 18+ and python3. Work on a branch of tromml-static-pages (AGENTS.md).

1. Set the paths (one shell for every step):
   ```bash
   cd ~/Code/github/Tromml
   B=~/code/github/dev-team/plugins/dev-team/bin
   PAGES=~/Code/github/Tromml/tromml-static-pages
   G="$PAGES/ux-proposals/design-kit"
   ```
2. Check the kit. The last line must say `0 error(s)`. If it doesn't, fix the kit first; don't publish:
   ```bash
   "$B/design-kit" check | tail -1
   ```
3. Bundle every drawn screen and remove the manifest copies:
   ```bash
   for s in headframe-login headframe-planner headframe-accounts-list headframe-account-detail headframe-contact-detail headframe-notes-tracker headframe-review-queue headframe-schedule-overview headframe-studio-home mobile-login mobile-today mobile-accounts mobile-account-detail mobile-contact-detail mobile-note-taking mobile-note-transcription mobile-activity-detail mobile-settings extension-loading extension-login extension-no-account extension-search extension-account extension-options site-home site-platform site-solutions-sales site-integrations site-integration site-blog site-blog-post site-contact tromml-style; do "$B/design-kit" bundle "$s" "$G/$s" && rm "${G:?}/${s:?}/${s:?}.manifest.json"; done
   ```
4. Copy R6's redraws and rebuild their styles:
   ```bash
   for o in headframe-account-detail--option-a mobile-contact-detail--option-a extension-account--option-a; do mkdir -p "$G/$o" && cp "tromml-dev-records/features/design-kit-r6/design/$o/index.html" "$G/$o/index.html" && "$B/design-kit" refresh "$G/$o/index.html"; done
   ```
5. See what changed, and check for whitespace errors. `--intent-to-add` makes new files visible to the check, and the
   check must print nothing:
   ```bash
   git -C "$PAGES" add --intent-to-add ux-proposals/design-kit && git -C "$PAGES" status --short -- ux-proposals/design-kit && git -C "$PAGES" diff --check
   ```
6. If the kit's list of drawn screens has changed, list it:
   ```bash
   python3 -c "import json,glob; [print(m['slug']) for m in (json.load(open(f)) for f in sorted(glob.glob('tromml-dev-records/design/kit/screens/*/*.manifest.json'))) if m.get('kind') != 'stub']"
   ```
   - A new screen: add its slug to step 3 in this README. Add an `.item` to `index.html` under its app: the link text
     is the manifest's `screen`, and the `.meta` is `<code>route</code> · N states`, where N is the manifest's
     number of `states`.
   - A screen that left the kit: keep its folder (published URLs stay), and remove its `.item` and its slug here.
7. Update the `Built from` line above. The kit sha is
   `git -C tromml-dev-records log -1 --format=%h -- design/kit features/design-kit-r6/design`, and the plugin sha is
   `git -C ~/code/github/dev-team log -1 --format=%h`. Commit as AGENTS.md says:
   `ux-proposals: refresh design-kit gallery`.