# 🎨 UI/UX Design System — GOFLOW Enterprise AI OS Portal

**UI/UX Design System Document**
เวอร์ชัน 1.0 · Confidential – GOFLOW Enterprise · อัปเดตล่าสุด: 2026-08-07

---

## 1. หลักการออกแบบ (Design Principles)

1. **Enterprise** — ดูเป็นระบบสำหรับองค์กร มั่นใจได้ ไม่อาร์ตเกินไป
2. **Professional** — เรียบ หรู น่าเชื่อถือ เหมาะกับงานนำเสนอและการเจรจาธุรกิจ
3. **AI-Native** — สื่อถึงความฉลาดของระบบ ผ่านแสง เรืองแสง และข้อมูลไหลเวียน (flow)
4. **3-Click Rule** — ข้อมูลใด ๆ เข้าถึงได้ภายใน 3 คลิก
5. **Mobile First** — ออกแบบจากมือถือขึ้นไปยังเดสก์ท็อป
6. **Loading Skeleton** — แสดงโครงหน้าไว้ระหว่างโหลด ไม่ใช่หน้าว่าง

---

## 2. ธีมและสี (Theme & Colors)

### Enterprise Dark Theme

| บทบาท | ชื่อสี | ค่า Hex | ใช้กับ |
|---|---|---|---|
| Background | Deep Void | `#05070D` | พื้นหลังหลัก |
| Background Surface | Deep Navy | `#0D1524` | การ์ด, panel |
| Background Elevated | Navy Light | `#111A2E` | dropdown, modal |
| Primary | **Royal Gold** | `#D4AF37` | ปุ่มหลัก, ตัวเลขสำคัญ, CTA |
| Secondary | **Deep Navy** | `#0B1B3F` | พื้นที่รอง, header, footer |
| Accent | **Electric Blue** | `#22D3EE` | ลิงก์, เน้นข้อมูล, AI elements |
| Success | Emerald | `#34D399` | สถานะสำเร็จ |
| Warning | Amber | `#FBBF24` | สถานะเตือน |
| Danger | Rose | `#F87171` | สถานะผิดพลาด |
| Text Primary | Ice White | `#E8EEF8` | ตัวอักษรหลัก |
| Text Secondary | Mist Blue | `#C2CFE0` | ตัวอักษรรอง |
| Text Muted | Steel Blue | `#8BA0BA` | คำอธิบาย, placeholder |
| Border | Line | `rgba(148,163,184,.14)` | เส้นขอบ |

> ⚠️ หมายเหตุ: Theme ทางการของเว็บไซต์คือ **Royal Gold + Deep Navy + Electric Blue** ตาม Developer Execution Kit — Static Site ปัจจุบันใช้ Electric Blue เป็นหลัก ต้องปรับ Gold เป็น Primary ตามแผน Design Sprint

### Gradient (ใช้เฉพาะจุดสำคัญ)

```
--grad-primary: linear-gradient(135deg, #D4AF37, #F5E08A)  /* Gold */
--grad-ai:      linear-gradient(135deg, #22D3EE, #6366F1)  /* AI Accent */
```

### Glass Effect

- พื้นหลังโปร่งแสง + blur: `background: rgba(5,7,13,.82); backdrop-filter: blur(14px)`
- ใช้กับ: Navbar (sticky), Modal, Card บนภาพ Hero

---

## 3. ตัวอักษร (Typography)

| ระดับ | ฟอนต์ | ขนาด (Desktop) | น้ำหนัก | ใช้กับ |
|---|---|---|---|---|
| Display | Sans | 56–64px | 900 | Hero H1 |
| Heading 1 | Sans | 40–48px | 900 | หัวข้อหน้า |
| Heading 2 | Sans | 28–32px | 800 | หัวข้อ section |
| Heading 3 | Sans | 20–22px | 800 | หัวข้อการ์ด |
| Body | Sans | 16px | 400 | เนื้อหา |
| Caption | Sans | 13–14px | 600 | คำอธิบาย, badge |
| Mono | Mono | 13–14px | 400 | โค้ด, endpoint, API |

- ฟอนต์หลัก: `"Segoe UI", "Noto Sans Thai", "IBM Plex Sans Thai", Tahoma, sans-serif` (รองรับภาษาไทย)
- ฟอนต์ Mono: `"Cascadia Code", "JetBrains Mono", Consolas, monospace`
- ขนาดตัวอักษรปรับตาม breakpoint (fluid typography ใช้ `clamp()`)

---

## 4. Spacing และ Layout

- Grid: 12 คอลัมน์, gutter 24px (desktop) / 16px (mobile)
- Container: `min(1180px, 92%)`
- Spacing scale (px): 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80
- Section padding: `clamp(52px, 7vw, 92px)`
- Border radius: `14px` (การ์ด), `10px` (ปุ่ม), `999px` (badge/pill)
- Shadow: `0 18px 50px rgba(0,0,0,.45)` (การ์ด), `0 8px 24px` (เล็ก)

---

## 5. Component Library

| Component | สถานะที่ต้องมี |
|---|---|
| **Navbar + Mega Menu** | sticky, scrolled state, dropdown (hover/click), mobile hamburger |
| **Hero** | badge + H1 + lead + CTA ×2 + background gradient/glow |
| **Feature Card** | default, hover (lift + border glow) |
| **Platform Card** | ไอคอน + ชื่อ + คำอธิบาย + tags |
| **Statistics** | ตัวเลขนับอนิเมชัน (counter) |
| **Timeline** | จุด + เส้นเชื่อม + ปี/เฟส |
| **Pricing** | การ์ดราคา + แผนที่แนะนำ (highlight) |
| **FAQ Accordion** | open/close animation, aria-expanded |
| **Contact Form** | default, focus, invalid, success, error, disabled |
| **Footer** | 4 คอลัมน์ + copyright bar |
| **Dashboard Preview** | mockup UI ในกรอบเบราว์เซอร์ |
| **AI Agent Card** | avatar/icon + level badge + skills tags |
| **Table** | แนวนอน scroll บนมือถือ, hover row |
| **Skeleton** | shimmer animation ขณะโหลด |

### สถานะของปุ่ม (Button States)

| สถานะ | ลักษณะ |
|---|---|
| Default | primary (gold gradient) / ghost (border) |
| Hover | ยกขึ้น 2px + shadow เข้มขึ้น |
| Active/Pressed | กดลง 1px scale .99 |
| Focus | outline 2px electric blue |
| Disabled | opacity .5, cursor not-allowed |
| Loading | แสดง spinner/ข้อความ "กำลังส่ง…" |

---

## 6. Animation (Framer Motion)

| การใช้งาน | รายละเอียด |
|---|---|
| Page transition | fade + translateY 16px, 300ms |
| Scroll reveal | IntersectionObserver → opacity 0→1 + translateY 22px |
| Counter | ตัวเลข count up 1.2s, easeOutCubic |
| Hover | transform .2s ease |
| Dropdown | opacity + translateY 8px, .18s |
| ลดการเคลื่อนไหว | เคารพ `prefers-reduced-motion` เสมอ |

---

## 7. Responsive Breakpoints

| Breakpoint | ความกว้าง | หมายเหตุ |
|---|---|---|
| Mobile | < 520px | 1 คอลัมน์, ปุ่ม full-width |
| Tablet | 520–860px | 2 คอลัมน์, hamburger menu |
| Laptop | 860–1024px | 3 คอลัมน์ |
| Desktop | > 1024px | 4 คอลัมน์, mega menu |

---

## 8. การเข้าถึง (Accessibility)

- WCAG 2.1 AA
- Semantic HTML (`header/nav/main/section/footer`, heading levels)
- Skip-link ไปยังเนื้อหาหลัก
- `aria-label` บนปุ่มไอคอน, `aria-expanded` บน dropdown/accordion
- Focus visible ชัดเจน (`:focus-visible`)
- คอนทราสต์ข้อความ ≥ 4.5:1 (Text Muted ใช้เฉพาะข้อความขนาดใหญ่/ไม่สำคัญ)
- รองรับคีย์บอร์ดครบทุกฟังก์ชัน
- `alt` text ทุกภาพ (หรือ `aria-hidden` ถ้า decorative)

---

## 9. มาตรฐาน SEO Visual

- Title: `< 60 chars`, Meta description: `120–160 chars` ทุกหน้า
- OpenGraph + Twitter Card metadata
- Structured Data: `Organization`, `WebSite`, `JobPosting` (หน้า recruitment), `Event` (หน้า book demo)
- URL: ภาษาไทย-friendly slug หรือภาษาอังกฤษแบบคงที่ (เลือกอย่างใดอย่างหนึ่งให้สม่ำเสมอ)
- Sitemap.xml + robots.txt

---

*เอกสารนี้เป็นส่วนหนึ่งของ GOFLOW Developer Kit — ใช้คู่กับไฟล์ styles.css ของ Static Site ฉบับปัจจุบันเพื่อเทียบเคียง Design Token*