# HUSH brand-kit handoff

สถานะทั้งหมด: **academic proposal / pending owner review**

## Source-to-output matrix

| Output area | Source IDs | สิ่งที่ใช้ได้ | สิ่งที่ห้ามสรุปเกินหลักฐาน | เจ้าของที่ต้องตัดสินใจ |
| --- | --- | --- | --- | --- |
| Hero | S1, S3, S4 | ชื่อ HUSH ONE, palette ปัจจุบัน, ภาพหูฟังสมมติ, editorial direction | ภาพคือสินค้าจริงหรือสี/วัสดุพร้อมขาย | Brand + Product + Rights |
| Headline | S1 | แนวคิด copy เรื่องพื้นที่และการฟัง | เป็น approved promise หรือผ่าน audience test | Brand + Business |
| CTA | S1, S3 | ลิงก์ “สำรวจรุ่น” ไปยัง prototype | เป็นการซื้อ, checkout, order หรือ stock commitment | Product + Legal |
| Specifications | S1, S3 | 40 มม. และ 30 ชั่วโมงเมื่อมี label ว่าสมมติ | verified performance, comparison claim หรือผลทดสอบ | Product + Legal |
| Catalog | S1, S2 | mapping HUSH ONE → `headphones` / Studio One; ราคา fixture ทั้งสามรายการ | ราคา production, availability หรือ commercial offer | Product + Commerce |
| Quote demo | S1, S3 | flow ขอใบเสนอราคาสาธิต ไม่มี payment | ใบสั่งซื้อ, ใบเสนอราคาทางกฎหมาย หรือ confirmation จริง | Product + Legal + Engineering |
| Palette/type | S1, S3 | สีและฟอนต์ที่หน้า HUSH ใช้อยู่; semantic aliases สำหรับ surface/text/action/focus | corporate palette, brand font หรือ dark-mode contract ที่อนุมัติแล้ว | Brand + Accessibility |
| Interface icons | S1, S3 | 4 SVG ใหม่ในระบบ stroke เดียวกัน | logo, brand mark, favicon หรือ approved icon set | Brand + Product Design |
| Raster provenance | S4 | prompt เดิม, fictional label และข้อจำกัด | สิทธิ์เชิงพาณิชย์หรือ product accuracy | Rights + Legal |

## Developer matrix

| Section/component | Purpose | Evidence IDs | Copy | Semantic token | Asset | Interaction/state | Test |
| --- | --- | --- | --- | --- | --- | --- | --- |
| Hero | ระบุสินค้าและเปิด product story | E01, E02, E03, E05, E10 | HUSH ONE + proposed headline + fictional label | `surface`, `text-primary` | `headphones.webp` (A01) | CTA เลื่อนไป catalog; image alt อ่านได้ | heading/alt/CTA target; 320/390/1440 crop |
| Primary CTA | นำไปสำรวจรุ่น | E07 | “สำรวจรุ่นและราคา” | `action-bg`, `action-text`, `focus` | ไม่มี | anchor เท่านั้น ไม่ใช่ checkout | keyboard focus, target exists, no purchase claim |
| Specs | อธิบาย mapping และตัวเลขสมมติ | E01, E06, E14 | Studio One / 40 มม. / 30 ชั่วโมง + label | `text-primary`, `text-secondary` | headphones icon A02 | details อ่านได้เมื่อ JS ปิด | label อยู่ใกล้ claim; no unsupported wording |
| Catalog state | แสดงข้อมูลจาก server authority | E04, E07 | loading/empty/error copy จาก `brief.md` | `surface`, `text-secondary`, `focus` | speaker A03 | loading → results/empty/error | mock ทั้ง 4 paths; no invented price |
| Quote summary | ทบทวนรายการก่อนส่ง demo | E04, E07 | ชื่อ จำนวน ยอดประมาณการ | `surface`, `text-primary` | bag A05 | empty/cart populated; quantity validation | keyboard order, quantity boundary, server repricing |
| Quote specimen | สื่อ contract ของฟอร์ม | E07 | ชื่อ/อีเมลตัวอย่าง/consent/“ขอใบเสนอราคาทดลอง” | `action-bg`, `action-text`, `focus` | bag A05 | static ใน kit; interactive เฉพาะเว็บตัวอย่าง | kit ไม่มี form submit; production-like demo handles error/success |
| Error message | บอกว่าคำขอไม่สำเร็จ | E07 | “ส่งคำขอสาธิตไม่สำเร็จ ข้อมูลของคุณยังอยู่” | `text-primary`, `focus` | ไม่มี | focus/announcement เมื่อเป็น live implementation | ไม่ล้าง input/cart; ไม่แสดง success |
| Success message | ยืนยันเฉพาะ quote demo | E07 | reference + “ไม่ใช่คำสั่งซื้อหรือการชำระเงิน” | `text-primary` | ไม่มี | แสดงหลัง server 201 เท่านั้น | status copy, duplicate request, no order language |
| Icon set | สนับสนุน navigation/state โดยไม่แทน logo | E11, E12 | accessible name ตาม context | `text-primary`, `focus` | A02–A05 | 24/48 px; decorative copy hidden | visible size, nonduplicate name, currentColor |

ชื่อ semantic token ในตารางย่อจาก `--hush-*` ใน `tokens.css`

### Responsive rules

- 320/390 px: section และ state cards เรียงคอลัมน์เดียว, copy มาก่อนภาพ, CTA สูงอย่างน้อย 44 px และไม่มี horizontal overflow
- ≤760 px: icon grid เหลือสองคอลัมน์; ≤350 px เหลือหนึ่งคอลัมน์; 24/48 px ต้องยังเห็นเป็นสองขนาดจริง
- 1440 px: hero/key visual ใช้สองคอลัมน์และรักษาพื้นที่ว่างของภาพโดยไม่ยืดสัดส่วน (`height:auto`)
- ตารางข้อมูลยาวต้องอยู่ใน region ที่เลื่อนได้และมีชื่อกำกับ ห้ามบีบตัวอักษรต่ำกว่า 16 px สำหรับ body ยาว
- เนื้อหา/CTA อยู่ใน natural flow และอ่านได้เมื่อ reduced motion หรือ JavaScript ปิด
- เมื่อเป็น interactive implementation ให้ error/success ประกาศผ่าน live region หลัง action; static kit ไม่ใช้ live regionเพื่อไม่ประกาศผลลวงตอนเปิดหน้า

## Missing data register

| Gap ID | Evidence link | ข้อมูลที่ขาด | ทำไมต้องมี | หลักฐานปิด gap |
| --- | --- | --- | --- | --- |
| G01 | E13 | business goal และ KPI | ใช้ตัดสินใจ hierarchy และ CTA | brief ที่ business owner ลงชื่อ/บันทึก version |
| G02 | E13 | audience research | ป้องกันการแต่ง persona จากหน้าตาเว็บ | interview notes, survey หรือ analytics ที่ระบุที่มา |
| G03 | E15 | positioning, promise, voice ที่เจ้าของอนุมัติ | เปลี่ยน proposal ให้เป็น brand decision | messaging document พร้อม approver/date |
| G04 | E12 | official logo/trademark | แยก wordmark treatment ออกจาก identity จริง | master asset, ownership/usage note และ logo rules |
| G05 | E14 | product evidence | รองรับ 40 มม., 30 ชั่วโมง, วัสดุ และ comfort | test report, product specification และ claim owner |
| G06 | E15 | rights and usage scope | ตัดสินใจว่าจะเผยแพร่ที่ใดได้ | license/consent record สำหรับชื่อ ภาพ font และ copy |
| G07 | E15 | approval owners | ป้องกันคำว่า approved โดยไม่มี authority | รายชื่อผู้ตรวจ brand/product/legal/accessibility และวันที่ |

## Package contents

- `inputs.md` — source boundary และ supplied facts
- `evidence.csv` — classification แบบเครื่องอ่านได้
- `brief.md` — creative brief ที่คง proposals/gaps ไว้
- `brandbook.md` — mini guideline ฉบับร่าง
- `tokens.css` — current-site-derived primitive และ semantic tokens ใต้ `.hush-kit`; light-only concept
- `icons/*.svg` — original course UI icons, newly authored and unapproved
- `keyvisual-prompt.md` — reproduction-only prompt; ไม่ใช่หลักฐานว่าสร้างภาพใหม่
- `index.html` + `style.css` — concept board ที่ใช้ raster เดิมและ live HTML
- `assets.csv` — manifest ระบุ source/status ของทุก asset

## Review record template

| Review | Owner | Date | Version | Status / notes |
| --- | --- | --- | --- | --- |
| Business goal + audience | `[TODO]` | `[TODO]` | 0.1 | Pending |
| Brand + visual identity | `[TODO]` | `[TODO]` | 0.1 | Pending |
| Product data + claims | `[TODO]` | `[TODO]` | 0.1 | Pending |
| Legal + asset rights | `[TODO]` | `[TODO]` | 0.1 | Pending |
| Accessibility + technical QA | `[TODO]` | `[TODO]` | 0.1 | Pending |

ห้ามเปลี่ยน status เป็น approved จนมีชื่อผู้มีอำนาจตัดสินใจ วันที่ ขอบเขต และ version ของสิ่งที่ตรวจครบ