# Brand Identity & Theme Specification — Kittisak.com

เอกสารกำหนดอัตลักษณ์ของแบรนด์ โทนสี ธีม ดีไซน์ และการตั้งค่า SEO Metadata สำหรับ `kittisak.com`

---

## 1. ข้อมูลแบรนด์และสโลแกน (Brand Profile)

- **ชื่อแบรนด์ (Brand Name):** Kittisak Official Store
- **สโลแกน / Positioning:** Premium Quality Products & Modern Shopping Experience
- **ภาษาที่รองรับ (Languages):**
  - ภาษาไทย (`th`) — ภาษาหลัก
  - ภาษาอังกฤษ (`en`)
  - ภาษาญี่ปุ่น (`ja`), ภาษาจีน (`zh`), ภาษาเวียดนาม (`vi`), ภาษาเกาหลี (`ko`)

---

## 2. โทนสีและการตั้งค่าธีม (Theme Tokens & Color Palette)

ระบบรองรับการปรับแต่งธีมสีผ่าน Admin Panel (CMS Theme Settings) โดยใช้ตัวแปร CSS Tokens:

| Token Name | ค่าแนะนำเริ่มต้น (Default) | ตัวอย่างการใช้งาน (Usage) |
|---|---|---|
| `--color-primary` | `#0f172a` (Slate 900) | สีหลักของแบรนด์, Navigation Bar, Header, Main Buttons |
| `--color-secondary` | `#475569` (Slate 600) | สีข้อความรอง, Subtitles, Borders, Icons |
| `--color-accent` | `#d97706` (Amber 600) | สีเน้นจุดเด่น, Badges, Promotion Tag, Call-to-Action |
| `--color-background` | `#ffffff` (Light) / `#090d16` (Dark) | พื้นหลังหลักของหน้าเว็บ |
| `--color-surface` | `#f8fafc` | พื้นหลังของ Card, Modal, Dropdown |

---

## 3. รูปภาพและสื่ออัตลักษณ์ (Brand Assets)

- **Logo:**
  - Desktop Logo: แนะนำสัดส่วน `4:1` หรือ `3:1` (เช่น `240x60px` หรือ SVG)
  - Mobile / LIFF Header: แนะนำสัดส่วน `1:1` หรือ `2:1` (เช่น `120x60px`)
- **Favicon:** `favicon.ico` / `favicon.png` (`32x32px`, `192x192px`)
- **Open Graph Banner (Social Share):** ขนาด `1200x630px` สำหรับแสดงพรีวิวเมื่อแชร์ลิงก์ใน LINE / Facebook

---

## 4. มาตรฐาน SEO & Meta Tags

- **Default Page Title:** `Kittisak | ร้านค้าออนไลน์และสินค้าคุณภาพระดับพรีเมียม`
- **Default Meta Description:** `เลือกซื้อสินค้าคุณภาพระดับพรีเมียมจาก Kittisak Official พร้อมโปรโมชั่นพิเศษ สั่งซื้อง่ายและปลอดภัย จัดส่งรวดเร็วทั่วประเทศ`
- **Canonical URL:** `https://kittisak.com/th`
- **Robots.txt & Sitemap:**
  - Sitemap: `https://kittisak.com/sitemap.xml`
  - Robots: Allow all search engine bots for public routes (`/th/*`, `/en/*`)