Primary Blue
#0ea5e9
ปุ่มหลัก ลิงก์ เมนู active
Document / Plan Card
ใช้กับแผนงาน จัดซื้อจัดจ้าง ระเบียบกฎหมาย PDPA และระบบสารสนเทศ
ดูตัวอย่าง Banthi Hospital Design System
มาตรฐาน UI ของเว็บโรงพยาบาลบ้านธิ
หน้านี้เป็น reference กลางที่ดึงจากโมดูลจริงของระบบ ใช้สี class และรูปแบบเดียวกับหน้าหลัก เพื่อให้การออกแบบหน้าใหม่ไม่หลุดจากระบบ
Foundation
ใช้ token จาก `css/style.css` เป็นฐานหลัก ไม่สร้างสีหรือ hero pattern ใหม่ถ้าไม่มีในระบบ
อัปเดต 2 มิถุนายน 2569: หน้า Design System เวอร์ชันนี้ยึด reference จากหน้า `services.html`, `about.html`, `index.php`, และโมดูล dynamic ใน `/about/`
Clinical Teal
#14b8a6
ผู้ป่วย เอกสาร ระบบบริการ
Success Green
#10b981
สถานะเปิดใช้งาน ผ่าน พร้อมบริการ
Amber
#f59e0b
นโยบาย หมายเหตุ ปีงบประมาณ
Rose
#f43f5e
ฉุกเฉิน แจ้งเตือน ความเสี่ยง
Ink
#0f172a
หัวข้อและข้อความสำคัญ
Canonical Components
ตัวอย่างนี้ใช้ class จริงของระบบ เช่น `plan-page-hero`, `feature-item`, `service-link-card`, `quick-link-card`, `plan-card`
ตรวจโรคทั่วไป
ใช้สีประจำบริการ ไอคอนชัด และ action เดียวตาม reference ของหน้า PLAN & PROJECT
ดูรายละเอียดทันตกรรม
ใช้สีประจำบริการ ไอคอนชัด และ action เดียวตาม reference ของหน้า PLAN & PROJECT
ดูรายละเอียดอุบัติเหตุ-ฉุกเฉิน
ใช้สีประจำบริการ ไอคอนชัด และ action เดียวตาม reference ของหน้า PLAN & PROJECT
ดูรายละเอียดคลินิกเด็กดี
ใช้สีประจำบริการ ไอคอนชัด และ action เดียวตาม reference ของหน้า PLAN & PROJECT
ดูรายละเอียดเภสัชกรรม
ใช้สีประจำบริการ ไอคอนชัด และ action เดียวตาม reference ของหน้า PLAN & PROJECT
ดูรายละเอียดกายภาพบำบัด
ใช้สีประจำบริการ ไอคอนชัด และ action เดียวตาม reference ของหน้า PLAN & PROJECT
ดูรายละเอียดPublic Module Inventory
รายการหน้าที่ต้องคุมให้อยู่ในระบบเดียวกัน ทุกหน้าควรใช้ header, hero, card, spacing, และสีจาก reference นี้
Service Color System
บริการทุกตัวใช้ class สีจาก `service-card-*` ของระบบจริง เพื่อให้การ์ดและหน้า detail ไม่กลายเป็นสีน้ำเงินเหมือนกันหมด
ตรวจโรคทั่วไป
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดทันตกรรม
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดอุบัติเหตุ-ฉุกเฉิน
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดคลินิกเด็กดี
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดเภสัชกรรม
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดกายภาพบำบัด
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดห้องปฏิบัติการ LAB
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดX-Ray
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดห้องคลอด
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดผู้ป่วยใน (IPD)
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดจิตเวช
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดยาเสพติด
สีและ icon นี้เป็น canonical reference สำหรับการ์ดบริการและ related services
ดูรายละเอียดAdmin / CMS Inventory
หลังบ้านต้องเน้นงานจริงมากกว่าการตกแต่ง: form ชัด preview เห็นก่อนบันทึก และสถานะการแสดงผลต้องเด่น
Rules Before Designing New Modules
กฎนี้ใช้ตรวจทุกครั้งก่อนเอา Design System ไปเป็น reference เพื่อทำโมดูลใหม่
ใช้ Pattern ที่มีอยู่ก่อน
ถ้าหน้าเป็นเอกสารให้เริ่มจาก procurement/pdpa ถ้าเป็นบริการให้เริ่มจาก service card ถ้าเป็นข่าวให้เริ่มจาก news card
- Hero ใช้ `plan-page-hero` หรือ `static-premium-hero` ตามกลุ่มหน้า
- การ์ดบริการใช้ `feature-item service-link-card service-card-*`
- เอกสารใช้ `plan-card` หรือ document-card pattern ของ procurement
- หัวข้อ section ใช้ `section-header` และไม่บีบ badge กับ title ให้อยู่บรรทัดเดียวถ้ามันแน่น
สิ่งที่ห้ามทำให้เพี้ยน
ข้อห้ามนี้มาจากปัญหาที่เคยเกิดกับหลายหน้าในโปรเจกต์
- อย่าสร้าง hero custom ที่ไม่เหมือนระบบถ้าไม่มีเหตุผล
- อย่าใช้สีน้ำเงินกับทุก service card
- อย่าวาง badge ภาษาอังกฤษกับหัวข้อไทยในบรรทัดเดียวจนชนกัน
- อย่าเพิ่ม animation หรือ gradient ที่ไม่ช่วยอ่านข้อมูล