# Brand System (#2)

> English edition of [`README.md`](README.md) (the Korean original is kept unchanged). The Black Bag work (#17) reuses the colors and typefaces here; the name and logos below are from the earlier Pocket Room stage.

The visual language of PRD #1 "Moving Day Kit". The kit design (#3), storyboard (#4), 3D web (#6) and pitch deck (#7) use this folder as-is.

> **Working name: Pocket Room** — the final name is chosen by the user in the PR.
> **Sub-issues (#3, #4, #6, #7) reference only `logo/primary-*`.** When the name is decided, reorder `CANDIDATES` in `src/build.py`, rebuild, then clean up the “working name” wording (this line, and the title and naming table in `brand-guide.html`). The reference paths do not change. Colors, pictograms and illustrations do not depend on the name.

One-page summary: [`brand-guide.png`](brand-guide.png) (source `brand-guide.html`)

## Principles

1. **No stigma (stealth)** — it looks like something anyone would want, not only a child in a shelter. **No logo, wording or organization name on the outside of the bag.** The brand appears only on the inside label, the back of cards, the web and the deck.
2. **No faces** — no real children’s faces, photos or real cases. If a person is truly needed, draw only hands or a back view.
3. **The child completes it** — we draw the lines; the child fills in the color and the content.
4. **No pity** — no deficit imagery such as rain, tears, a broken home, piles of boxes or moving trucks.

## Naming candidates

| Candidate | One-line rationale | Verdict |
|---|---|---|
| **Pocket Room** | Describes the product structure directly: folded in a bag, it unfolds into a “room”. Sounds like a toy or stationery, so anyone would want it | Recommended (working name) |
| My Spot | “My spot” in a child’s voice gives the most direct sense of ownership and control. But it is a common phrase, so search and trademark distinctiveness are weak | Alternative 1 |
| Here Kit | “This is my place right now” matches the ritual (hang → place → draw). But “kit” can sound like relief supplies | Alternative 2 |
| Home Base | A positive association with the safe zone in tag. But “home” may remind a child without a home of what they lack | On hold |
| Carry Place | Most faithful to the concept sentence, “a place you carry”, but awkward in English and less memorable | On hold |

No trademark search was done. Because this is a hackathon design stage, a USPTO search is needed before real use.

## Logo — `logo/`

| File | Use |
|---|---|
| `primary-{color,mono,reverse,inside-label}.svg/.png` | **Aliases of the current working name (first candidate). Sub-issues use only these** |
| `<name>-color.svg/.png` | Web and deck default (paper background) |
| `<name>-mono.svg/.png` | One-color print, back of cards |
| `<name>-reverse.svg/.png` | On an ink background |
| `<name>-inside-label.svg/.png` | **Woven label inside the bag.** The only logo form used on the product |

`<name>` is one of `pocket-room`, `my-spot` or `here-kit`. The symbols are:
- pocket-room: a small light inside a folded tote
- my-spot: a round spot
- here-kit: a marker pointing at the floor

All text is converted to outline paths. It works as-is in Keynote, Slides, Figma and `<img>` without fonts.

## Color tokens

On the web and in the deck, import `tokens.css`. The source values are in `tokens.json`.

```css
:root {
  --color-ink: #23253A;        /* line art, body text, logo */
  --color-paper: #FBF5EA;      /* default background */
  --color-oat: #EFE3CC;        /* surfaces, cards, cloth texture */
  --color-persimmon: #C04522;  /* main accent: action, current step */
  --color-sun: #F4B53F;        /* light, light on, done (surface only) */
  --color-teal: #22706B;       /* path, moving, school connection */
  --color-dusk: #5462B8;       /* night, my wall, privacy */
  --color-sky: #A9D3DF;        /* outside the window, margin surface (surface only) */
  --font-display: 'Bricolage Grotesque', 'Noto Sans KR', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', 'Noto Sans KR', system-ui, sans-serif;
}
```

### Contrast ratios (WCAG 2.x, calculated)

| Text / background | Contrast | Verdict |
|---|---|---|
| ink / paper | 13.85 | AAA |
| ink / oat | 11.83 | AAA |
| ink / sun | 8.25 | AAA |
| ink / sky | 9.35 | AAA |
| persimmon / paper | 4.70 | AA |
| teal / paper | 5.38 | AA |
| dusk / paper | 5.07 | AA |
| paper / ink | 13.85 | AAA |
| persimmon / oat | 4.02 | ❌ fails AA — not used |

Don’t use `sun` or `sky` as text color on paper (not enough contrast). Use them only as surface colors, with ink text on top.

**Never put persimmon text on an oat background** (contrast 4.02, below AA 4.5). Use ink for emphasized text on oat cards, and use persimmon only for icons and surfaces.

**Tone intent:** pastels and grays easily read as a “pitiable child” tone. So we use vivid colors a child might pick (persimmon, sun, teal, dusk) and balance them with a warm off-white background.

## Typography

| Role | Typeface | Setting |
|---|---|---|
| Titles, wordmark | Bricolage Grotesque (OFL) | 800, `font-variation-settings: "wdth" 88` |
| Body, cards | Atkinson Hyperlegible Next (OFL) | 400/700. A high-legibility typeface designed for low-vision readers, suited to readers aged 8–12 |
| Korean | Noto Sans KR | Fallback for the two typefaces above |

Child cards (#3) use only pictograms with no text where possible. When text is needed, use the body typeface at 18pt or larger.

## Pictograms — `pictograms/`

`hang` · `place` · `draw` · `light` · `move`

- 48×48 grid, `stroke-width 3`, round cap/join, no text
- `stroke="currentColor"` — recolor with CSS `color` (for example persimmon for the current step, teal for done). Insert as inline SVG or a CSS mask. Inserted with `<img>` they stay black.
- Minimum size 24px
- `move` does not draw a house being left or a truck. It draws a path that continues, tote in hand (the PRD’s principle of avoiding re-traumatization).

## Half-finished illustrations — `illustration/`

| Sample | Empty line art | Filled example | Connects to |
|---|---|---|---|
| ① Hang | `sample-hang.svg` | `sample-hang-filled.svg` | Panel at the head of the bed, ritual card 1 (#3), web hang step (#6) |
| ② My 3 items | `sample-place.svg` | `sample-place-filled.svg` | Ritual card 2, web place step |
| ③ Outside the window | `sample-window.svg` | `sample-window-filled.svg` | Ritual card 3, web draw step |

Style rules:
- Lines are one color, ink, on a white background. Every area to be colored is drawn as a **closed shape**.
- The canvas is 800×800 = 200mm in print. Main line 9 (about 2.3mm), secondary line 5 (about 1.3mm). Thick enough that crayon coloring doesn’t spill over.
- The “your turn” areas for the child are marked only by a **dotted line** (`4 14`) and no content is drawn.
- The smallest area to color is 12mm or larger.
- Lines are drawn as slightly wobbly hand drawing (`Hand` in `src/build.py`, reproducible with a fixed seed). The team may replace them with lines drawn by hand as long as the rules above are kept.
- Do not draw faces.

## Regenerate

```bash
python3 -m venv .venv && .venv/bin/pip install fonttools uharfbuzz playwright==1.58.0
.venv/bin/python design/brand/src/build.py    # generate SVGs (fonts cached in src/.fonts/, excluded from git)
.venv/bin/python design/brand/src/render.py   # check SVGs + PNG + brand-guide.png (measured in Chromium and WebKit)
```