# Black Bag Kit and Sticker Bag Designs (#17)

> English edition of [`README.md`](README.md) (the Korean original is kept unchanged).

Product and brand designs for PRD #15 "Black Bag". The pitch deck (#19) and the demo web (#18) use them as-is. These are designs for demos and presentations, not production drawings.
Colors and typefaces reuse `design/brand/` (#2), and that folder was not modified. The Pocket Room logo is retired; only the new Black Bag logo was created.

> **The sponsor names (STRIDE, PENCIL POST, BRIGHT MART, SEASIDE RIDE, MOVIE NIGHT) and marks are all fictional.** No real brand logos are used.
> The gift card amount, real sponsors and trademarks are not decided.

## Deliverables

| File | Contents | Use |
|---|---|---|
| `bag/sticker-bag.svg/.png` | **Sticker bag design** (rolling school bag + 11 stickers) | Deck cover, web main |
| `bag/sticker-system.png` | Sponsor slots, decorations, my-sticker slots + 6 usage rules | Deck (sponsorship explainer) |
| `bag/bag-body.svg`, `bag/stickers.svg` | Body / sticker library (transparent background, separated) | Sticker placement on the web |
| `kit/kit-contents.png` | The 8 kit items + marks for what varies by option | Deck, web kit intro |
| `kit/kit-flatlay.svg/.png` | Item layout (bag + 7 items) | Deck |
| `kit/items/*.svg` | 8 item icons (160×160, transparent background) | Web kit selection page |
| `kit/options-compare.png` | **The 4 options on one sheet** (8 item rows × 4 option columns) | Deck, web |
| `options.json` | Data for the 4 options (id, name, grades, palette, contents) | Read as-is by the web kit selection page |
| `web/web-ui-direction.png` | Web UI direction: adult screen vs child screen, two tones | Web (#18) |
| `logo/blackbag-{color,mono,reverse}.svg/.png` | Black Bag logo | Web, deck, back of the card |
| `logo/blackbag-inside-label.svg/.png` | Bag inside label (the only logo form used on the product) | Product |
| `tokens.css` | Imports `design/brand/tokens.css` + bag and two-tone web values | Web |

## Concept and rules

- **Sticker bag**: the body is always black (ink). Color comes from the stickers. Sponsor stickers mix in at the same size and with the same white edge as the kid stickers and decorations, so they read as decorating. (The earlier #2 principle 1, "no logo on the outside", is retired under PRD #15.)
- Sponsor stickers are **half or fewer** of the stickers on one side (5 of 11), and are never clustered; they are placed at an angle, overlapping. An **empty slot** (dashed +) is always left so the child can stick their own sticker.
- Sponsors use color on stickers only. A sponsor never changes the bag body, zipper or wheels.
- No shelter or organization name, and no wording that announces “a child being helped”, on the outside of the bag. The Black Bag logo goes only on the inside label, the web and the deck.
- No real children’s faces, photos or cases (everything is shape illustration). No deficit imagery (rain, tears, piles of boxes).
- Options: 3 grade bands (1–2, 3–5, 6–8) + 1 interest option (Maker & Art, 3–8). Only item 06, the blank postcard, is the same in every box.

## Tokens

The 8 colors and the typefaces are the same as in `design/brand/`. Never put persimmon text on oat (contrast 4.02). `sun` and `sky` are surface-only, and text on them is ink.

| Token | Value | Use |
|---|---|---|
| `--bag-body` | `#23253A` | Bag body (ink) |
| `--bag-body-2` / `-3` | `#2F3252` / `#41456B` | Pocket / handle and stitching |
| `--kid-bg` | sun | Child screen background |
| `--tap-adult` / `--tap-kid` | 48px / 96px | Touch targets |

Option palettes (sticker packs): Little Explorer sun·persimmon·sky·dusk / Everyday Starter teal·sun·persimmon·dusk / Maker & Art dusk·sky·sun·persimmon / Move-Up persimmon·dusk·teal·sun.

## Regenerate

```bash
python3 -m venv .venv && .venv/bin/pip install fonttools uharfbuzz playwright==1.58.0
.venv/bin/python design/blackbag/src/build.py
```

This rebuilds all SVGs and PNGs such as `bag/sticker-bag`, and `options.json`. All text is path outlines (usable as `<img>` without fonts). The PNG sheets are captured with Chromium, and font loading and overflow are measured in both Chromium and WebKit. Typefaces come from Google Fonts (network required); the Bricolage originals are downloaded to `src/.fonts/` (gitignored).