# HUSH — Mini brand book ฉบับร่าง

สถานะ: **course concept / unapproved**  
เวอร์ชัน: 0.1 · อ้างอิง S1–S4 ใน [inputs.md](./inputs.md)

## Brand core

| หัวข้อ | ข้อความ | สถานะ |
| --- | --- | --- |
| Role | แบรนด์เครื่องเสียงสมมติสำหรับสอน product storytelling | FACT จากบริบทหลักสูตร |
| Promise | เว้นที่ให้เสียงที่คุณเลือก | PROPOSAL |
| Audience | นักศึกษาและคนทำงานสร้างสรรค์ช่วงเริ่มต้น | PROPOSAL |
| Personality | สงบ ชัดเจน ใส่ใจรายละเอียด | INFERENCE จากหน้าเว็บปัจจุบัน |
| Proof | ยังไม่มีผลทดสอบผลิตภัณฑ์หรือ user research | GAP |

## Voice

**PROPOSAL:** ใช้ประโยคสั้น สงบ และชวนสำรวจ อธิบายประโยชน์ก่อนศัพท์เทคนิค ระบุ “แนวคิด”, “เป้าหมาย” หรือ “สมมติ” ใกล้ตัวเลขที่ยังไม่ผ่านการทดสอบ

ควรเขียน: “เป้าหมายการฟัง 30 ชั่วโมง — สเปกสมมติสำหรับการเรียน”  
ไม่ควรเขียน: “ฟังได้ยาวนานที่สุด 30 ชั่วโมงที่พิสูจน์แล้ว”

## สีที่หน้า HUSH ใช้อยู่

| Token | Hex | บทบาทปัจจุบัน |
| --- | --- | --- |
| Cloud | `#F5F5F7` | พื้นหลังหลัก |
| Ink | `#22202B` | ข้อความและพื้นผิวเข้ม |
| Lilac | `#DCD5FF` | hero/card surface |
| Iris | `#6551B7` | accent, focus, active state |
| Muted | `#686471` | ข้อความรองบนพื้นอ่อน |
| White | `#FFFFFF` | card และข้อความบนพื้นเข้ม |

สีเหล่านี้เป็น current-site evidence ไม่ใช่หลักฐานว่าเจ้าของได้อนุมัติเป็น corporate palette แล้ว ก่อนใช้งานจริงต้องทดสอบ contrast ตามขนาดข้อความและ state

### Semantic aliases สำหรับ handoff

| Semantic token | อ้างถึง primitive | หน้าที่ |
| --- | --- | --- |
| `--hush-surface` | `--hush-cloud` | canvas หลัก |
| `--hush-text-primary` | `--hush-ink` | heading และ body |
| `--hush-text-secondary` | `--hush-muted` | คำอธิบายรองบนพื้นอ่อน |
| `--hush-action-bg` | `--hush-ink` | พื้น CTA หลัก |
| `--hush-action-text` | `--hush-white` | ข้อความ CTA หลัก |
| `--hush-focus` | `--hush-iris` | focus indicator |

alias เหล่านี้แยก “หน้าที่” ออกจากชื่อสีเพื่อให้เปลี่ยน primitive ภายหลังได้โดยไม่แก้ทุก component ระบบตัวอย่างนี้เป็น **light-only HUSH concept** และไม่ได้เพิ่ม dark-mode contract ให้แบรนด์สมมติ

## Typography

- IBM Plex Sans Thai Regular/Semibold: heading และ body ภาษาไทย
- Inter Bold: wordmark แบบตัวอักษรและตัวเลข display
- fallback: system sans-serif
- body ขั้นต่ำ 16 px, line-height ประมาณ 1.65 เพื่อให้อ่านภาษาไทยง่าย

ไฟล์ font ใน kit อ้างถึงไฟล์ local ของหลักสูตร ไม่มีการดึง font จากภายนอก

## Wordmark, logo และ interface icon

คำว่า `HUSH` ที่จัดด้วย Inter Bold ใน style board เป็น **wordmark treatment สำหรับ concept** ไม่ใช่ไฟล์โลโก้ที่อนุมัติ ห้ามสร้างกฎ clear space, trademark claim หรือ master-logo package จนกว่าเจ้าของจะส่ง logo source และการอนุมัติ

ไอคอน `headphones`, `speaker`, `battery`, `bag` เป็น **interface icons** ใช้ช่วยนำทางและอธิบายหมวดสินค้า ไอคอนไม่ใช่ logo, brand mark หรือ favicon และไม่ควรถูกใช้แทนตัวตนแบรนด์โดยอัตโนมัติ

## Icon proposal

- canvas 24 × 24, `fill="none"`, stroke `currentColor`
- stroke width 2, round cap และ round join
- ทดสอบที่ 24 px และ 48 px
- ต้องมี accessible name เมื่อสื่อความหมาย; ถ้าใช้ตกแต่งให้ caller ซ่อนจาก assistive technology
- สถานะทั้งหมด: newly authored course concept / unapproved

## Imagery และ key visual

reuse `public/images/headphones.webp` ตาม provenance S4 วางบนพื้น Lilac และใช้พื้นที่ว่างสำหรับ copy ข้อความทั้งหมดเป็น HTML เพื่อให้เลือกอ่าน ปรับ responsive และแก้ไขได้ ไม่สร้างข้อความลงใน raster

Concept line ที่เสนอ: “A quieter space for every detail.” ต้องตรวจ tone และภาษากับเจ้าของก่อน publish นอกหลักสูตร ห้ามใช้ภาพนี้ยืนยันวัสดุ สีสินค้าจริง หรือ performance

## UI behavior

- CTA หลักสี Ink บนพื้นอ่อน พร้อม focus ring Iris
- ลิงก์ต้องบอกปลายทาง ไม่ใช้คำว่า “ซื้อเลย” ใน quote demo
- ไม่พึ่งสีอย่างเดียวในการสื่อ status
- layout ต้องไม่เกิด horizontal overflow ที่ 320 และ 390 px
- หากเพิ่ม motion ภายหลัง ต้องคงเนื้อหาใน natural flow และรองรับ `prefers-reduced-motion`
- ใช้ semantic aliases จาก `tokens.css` กับ canvas, ข้อความ, CTA และ focus state; scope ทั้งหมดอยู่ใต้ `.hush-kit`

## Approval gate

ก่อนนำออกจาก Lab ให้บันทึก approver และวันที่แยกอย่างน้อยห้าด้าน: business goal/audience, visual identity, product claims, legal/rights และ accessibility/technical QA สถานะปัจจุบันของทุกด้านคือ **pending / no owner supplied**