Design System และ Tokens
โทนภาพ: สงบ อ่านง่าย เน้นเนื้อหา เหมาะกับการอ่านนาน ๆ ในห้องเรียน ทุกสีถูกนิยามเป็น token ใน src/styles.css และใช้งานผ่านคลาส semantic เท่านั้น
ชุดสี
ทุกคู่สีผ่านเกณฑ์ความคมชัด WCAG AA ทั้งสองโหมด
primary
การกระทำหลัก ลิงก์ สถานะเลือกอยู่
secondary
พื้นผิวรอง ปุ่มรอง
success
สำเร็จ ผ่านเกณฑ์ ส่งงานแล้ว
warning
ใกล้ครบกำหนด ต้องตรวจสอบ
destructive
ลบ ผิดพลาด เลยกำหนด
muted
พื้นหลังรอง เส้นคั่น ข้อความรอง
ตัวอักษร
IBM Plex Sans Thai เป็นหลัก เพราะรองรับสระบน-ล่างของภาษาไทยได้ดีและอ่านสบายบนจอ
การเรียนรู้ที่ตรวจสอบได้ Aa 0123
Display — หัวเรื่องหน้า
การเรียนรู้ที่ตรวจสอบได้ Aa 0123
Heading — หัวข้อส่วน
การเรียนรู้ที่ตรวจสอบได้ Aa 0123
Subhead — หัวข้อย่อยในการ์ด
การเรียนรู้ที่ตรวจสอบได้ Aa 0123
Body — เนื้อหาอ่านยาว บรรทัดสูง 1.75 สำหรับภาษาไทย
การเรียนรู้ที่ตรวจสอบได้ Aa 0123
Caption — คำอธิบายประกอบ ที่มาข้อมูล
ระยะห่างและมุมโค้ง
ใช้สเกล 4px เป็นฐาน: 4 / 8 / 12 / 16 / 24 / 32 / 48 เพื่อจังหวะสายตาที่สม่ำเสมอ
ตัวอย่างคอมโพเนนต์
สถานะที่ต้องออกแบบครบทุกหน้า
กำลังโหลด
Skeleton ตามรูปทรงเนื้อหาจริง ไม่ใช่วงกลมหมุนกลางจอ
ว่างเปล่า
อธิบายว่าคืออะไร ทำไมยังว่าง และปุ่มลงมือทำหนึ่งปุ่ม
ผิดพลาด
บอกสาเหตุด้วยภาษาคน + ปุ่มลองใหม่ ไม่แสดงรหัสดิบ
AI กำลังคิด
แสดงขั้นตอนที่กำลังทำ และยกเลิกได้
ไม่มีข้อมูลพอ
AI บอกตรง ๆ พร้อมเสนอทางเลือกถัดไป
ออฟไลน์
เก็บงานไว้ในเครื่องและซิงก์ให้อัตโนมัติเมื่อกลับมา
การเข้าถึง (Accessibility)
- ความคมชัดข้อความอย่างน้อย 4.5:1 ทั้งโหมดสว่างและมืด
- พื้นที่แตะอย่างน้อย 44×44px ผ่านคลาส tap-target
- ห้ามสื่อความหมายด้วยสีเพียงอย่างเดียว ต้องมีข้อความหรือไอคอนกำกับ
- โฟกัสคีย์บอร์ดต้องมองเห็นชัดเจนทุกองค์ประกอบที่โต้ตอบได้
- รองรับตัวอักษรใหญ่ขึ้น 200% โดยเลย์เอาต์ไม่พัง
- เคารพ prefers-reduced-motion ลดการเคลื่อนไหวทั้งหมด