Realfact Management Design GuidelinesLegacy format

งานออกแบบควรให้ความรู้สึก:

• น่าเชื่อถือ เป็นมืออาชีพ และมีโครงสร้าง

• ทันสมัย กระชับ และเข้าใจง่าย

• เป็นมิตรโดยใช้สีส้มและสีเขียวเป็นจุดเน้น

• มีพื้นที่ว่างเพียงพอ ไม่ใช้สีหรือองค์ประกอบตกแต่งมากเกินไป

หลักการภาพรวม: น้ำเงินสร้างความน่าเชื่อถือ สีขาวสร้างความชัดเจน และสีส้มใช้เพื่อดึงความสนใจเฉพาะจุด

### สีหลัก — ยืนยันจาก Brand Book

| Token | Hex | การใช้งาน |

|---|---:|---|

| brand-navy | #13365B | โลโก้ หัวข้อ แถบนำทาง พื้นหลังเข้ม และปุ่มหลัก |

| brand-orange | #F15B2C | CTA จุดเน้น ลิงก์ที่ต้องการเน้น และข้อมูลสำคัญ |

ข้อกำหนด: ใช้สีส้มประมาณ 10–15% ของพื้นที่ทั้งหมด ในหนึ่งหน้า ไม่ควรใช้เป็นพื้นหลังขนาดใหญ่หรือใช้กับทุก CTA พร้อมกัน

### สีรอง — ยืนยันจาก Brand Book

| Token | Hex | การใช้งาน |

|---|---:|---|

| brand-blue | #4979BD | กราฟ ข้อมูลรอง ไอคอน และส่วนประกอบเชิงข้อมูล |

| brand-pale-blue | #EBF3FB | พื้นหลัง section หรือสถานะข้อมูลแบบอ่อน |

| white | #FFFFFF | พื้นหลังหลักและข้อความบนพื้นน้ำเงิน |

| surface-muted | #F3F6F9 | พื้นหลังรอง การ์ด และพื้นที่แบ่งเนื้อหา |

| brand-teal | #1EA699 | สถานะสำเร็จ ค่าบวก หรือข้อมูลที่กำลังทำงาน |

| ink | #2B2F33 | ข้อความเนื้อหาและข้อมูลที่ต้องอ่านต่อเนื่อง |

### Gradient — ยืนยันจาก Brand Book

ใช้ gradient จาก #4979BD ไป #13365B สำหรับกราฟ พื้นหลังตกแต่ง หรือ hero accent เท่านั้น

```css

linear-gradient(90deg, #4979BD 0%, #13365B 100%)

```

ไม่ควรวางข้อความยาวบน gradient หากควบคุม contrast ตลอดแนวไม่ได้

### ตัวแปร CSS มาตรฐาน

โปรเจกต์ปัจจุบันมีตัวแปรเหล่านี้ใน app/globals.css แล้ว ให้ใช้ตัวแปรแทนการเขียนค่าสีซ้ำในแต่ละคอมโพเนนต์

```css

:root {

--navy: #13365b;

--orange: #f15b2c;

--blue: #4979bd;

--pale: #ebf3fb;

--mint: #1ea699;

--ink: #2b2f33;

--off: #f3f6f9;

--line: rgba(19, 54, 91, 0.14);

}

```

• ข้อความทั่วไปบนพื้นขาวใช้ #2B2F33 หรือ #13365B

• ข้อความบนพื้น #13365B ใช้สีขาว

• สีส้ม สีฟ้า และสีเขียวใช้เป็นสีเน้น ไม่ใช้เป็นข้อความขนาดเล็กบนพื้นขาวโดยไม่มีการตรวจ contrast

• ข้อมูลสำคัญต้องไม่สื่อความหมายด้วยสีเพียงอย่างเดียว ให้มีข้อความ ไอคอน หรือรูปแบบเสริมเสมอ

• เป้าหมายขั้นต่ำตาม WCAG: contrast 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่หรือองค์ประกอบ UI

• Focus state ของปุ่มและลิงก์ต้องมองเห็นได้ชัด และใช้งานด้วยคีย์บอร์ดได้

ภาพอ้างอิงแสดงโลโก้ 3 รูปแบบ:

1. ตราสัญลักษณ์พร้อมชื่อเรียงแนวตั้ง

2. ตราสัญลักษณ์พร้อมชื่อเรียงแนวนอน

3. ตราสัญลักษณ์เดี่ยว

แนวทางใช้งานชั่วคราว:

• Header และ footer ใช้โลโก้แนวนอน

• Avatar, favicon หรือพื้นที่สี่เหลี่ยมใช้ตราสัญลักษณ์เดี่ยว

• งานประชาสัมพันธ์ที่มีพื้นที่แนวตั้งใช้โลโก้แนวตั้ง

• ห้ามบิด ยืด หมุน เปลี่ยนสี ใส่เงา หรือแยกองค์ประกอบภายในโลโก้

• วางโลโก้บนพื้นเรียบที่มี contrast ชัดเจน

• เว้นพื้นที่ปลอดภัยรอบโลโก้อย่างน้อยเท่ากับความหนาหลักของตราสัญลักษณ์ จนกว่าจะได้รับข้อกำหนดอย่างเป็นทางการ

> ต้องขอไฟล์โลโก้ต้นฉบับ SVG/AI และข้อกำหนด clear space จากเจ้าของแบรนด์ก่อนผลิตงานพิมพ์หรือส่งมอบงานขั้นสุดท้าย

• เลือกภาพที่ดูจริง เป็นมืออาชีพ และสื่อถึงการบริหาร การวิเคราะห์ หรือทีมงาน

• ใช้โทนเย็นหรือ neutral เป็นหลัก และให้สีส้มปรากฏเป็นจุดเล็ก ๆ

• หลีกเลี่ยงภาพ stock ที่จัดฉากเกินไปหรือมีสีหลายโทนจนแข่งกับแบรนด์

• ไอคอนควรเป็นชุดเดียวกัน มีน้ำหนักเส้นสม่ำเสมอ

• Hover และ micro-interaction: 150–250ms

• การเปิด panel หรือเปลี่ยน section: 250–400ms

• ใช้ motion เพื่ออธิบายลำดับหรือ feedback ไม่ใช้เพื่อการตกแต่งอย่างเดียว

• รองรับ prefers-reduced-motion และปิด animation ที่ไม่จำเป็นเมื่อผู้ใช้ร้องขอ

• ขาวและพื้นสีอ่อน: 60–70%

• น้ำเงินกรมท่า: 20–30%

• สีรองอื่น ๆ: 5–10%

• สีส้ม: ไม่เกิน 10–15%

ตัวเลขนี้เป็นแนวทาง ไม่ใช่สูตรตายตัว แต่สีส้มต้องคงบทบาทเป็น accent

• [ ] ใช้สีจาก token ไม่เขียนสีใหม่โดยไม่มีเหตุผล

• [ ] สีส้มไม่เกินบทบาทของ accent และใช้กับสิ่งที่ควรเด่นจริง ๆ

• [ ] โลโก้ไม่ถูกบิด เปลี่ยนสี หรือวางบนพื้นอ่านยาก

• [ ] หนึ่งบริบทมี Primary CTA ที่ชัดเจนเพียงหนึ่งรายการ

• [ ] หัวข้อและเนื้อหามีลำดับชั้นสม่ำเสมอ

• [ ] ตรวจหน้าจอ mobile, tablet และ desktop

• [ ] ตรวจ contrast ตาม WCAG 2.2

• [ ] ใช้งานเมนู ลิงก์ ปุ่ม และฟอร์มด้วยคีย์บอร์ดได้

• [ ] รูปภาพมี alt text และกราฟไม่สื่อความหมายด้วยสีเพียงอย่างเดียว

• [ ] รองรับ reduced motion

• [ ] รัน npm run lint, npm run build และ npm test ก่อนส่งงาน

1. ไฟล์โลโก้ต้นฉบับ SVG/AI ทุกเวอร์ชัน

2. ฟอนต์อย่างเป็นทางการและสิทธิ์การใช้งาน

3. กฎ clear space และขนาดโลโก้ขั้นต่ำ

4. ตัวอย่างการใช้โลโก้และสีที่ไม่อนุญาต

5. แนวทางภาพถ่าย ภาพประกอบ และไอคอน

6. สีสำหรับ error, warning และ information ที่ได้รับอนุมัติ

7. ตัวอย่างสื่อเดิมที่แบรนด์ยอมรับ

• [Material Design 3](https://m3.material.io/) — ใช้อ้างอิงเรื่อง color system, typography, layout และ component states

• [WCAG 2.2](https://www.w3.org/TR/WCAG22/) — ใช้ตรวจ accessibility, contrast, keyboard และ focus

• [Storybook](https://storybook.js.org/docs/writing-docs) — ใช้สร้างเอกสารคอมโพเนนต์ที่ดูและทดสอบสถานะจริงได้

• [Automattic Design System Foundations](https://system.automattic.design/foundations/) — ตัวอย่างการจัดหมวด tokens, spacing, typography และ foundations

---

สถานะเอกสาร: Draft v1

ข้อมูลที่ยืนยันแล้ว: ชุดสี สัดส่วนการใช้สีส้ม และรูปแบบโลโก้ที่มองเห็นจากภาพ Brand Book

ข้อมูลที่เป็นข้อเสนอแนะ: typography, spacing, grid, components, motion และรายละเอียดการใช้งานโลโก้