Brand & design system · v0.3

กฎไหม ทำให้กฎหมาย เข้าใจง่าย

คู่มือนี้คือของจริงที่เว็บใช้ ทุกสี ทุกตัวอักษร และทุกคอมโพเนนต์ในหน้านี้ ดึงมาจากโค้ดเดียวกับหน้าเว็บ

  1. อ่านง่ายก่อนสวยตัวหนังสือมีหัว ขนาดใหญ่ สีเข้มบนขาว ทุกคู่สีผ่าน WCAG AA
  2. ทุกคำตอบมีที่มาเลขอ้างอิงสีทองชี้ไปที่ตัวบทจริง ไม่มีคำตอบลอยๆ
  3. กริดและเส้นแทนกล่องไม่มีมุมมน ไม่มีเงา แบ่งส่วนด้วยเส้น 1px บนกริด 12 คอลัมน์
02

สี

ทองเป็นสีหลัก หมึกน้ำเงินเข้มเป็นตัวหนังสือ บนพื้นขาว ส่วนน้ำเงินกับแดงมีความหมายเสมอ คือใช้อยู่กับยกเลิกแล้ว กดที่สีเพื่อคัดลอก

สัดส่วนบนหนึ่งหน้าจอ

  • ขาว 68%
  • หมึก 16%
  • ทอง 10%
  • น้ำเงิน 4%
  • แดง 2%
03

ตัวอักษร

ตัวมีหัวทั้งระบบ เพราะคนไทยทุกวัยอ่านได้ง่ายกว่า แต่เลือกแบบที่เส้นเรียบและทันสมัย ลองพิมพ์และลากปรับน้ำหนักดูได้

  1. Displayกฎหมายเข้าใจง่าย
  2. H1ถามเรื่องกฎหมาย
  3. H2กฎหมายเปลี่ยนล่าสุด
  4. H3พ.ร.บ.คุ้มครองแรงงาน พ.ศ. 2541
  5. Bodyพิมพ์ถามเป็นภาษาคน แล้วอ่านคำตอบที่เข้าใจง่าย
  6. Smallตอบจากตัวบท ณ วันที่ 31 ต.ค. 2569
04

กริดและเส้น

หน้ากว้างสุด 1280px มีเส้นซ้ายขวาวิ่งเต็มความสูง ทุกช่องคั่นด้วยเส้น 1px ไม่มีกรอบลอย ไม่มีมุมมน ไม่มีเงา

กฎไหม
05

คอมโพเนนต์

shadcn สไตล์ sera แบบไม่มีกรอบ ใช้พื้นสีแยกส่วนแทนเส้นรอบกล่อง ทุกชิ้นด้านล่างคือของจริงที่หน้าเว็บใช้

ปุ่ม
ป้ายสถานะ
ออกใหม่แก้ไขใช้อยู่ยกเลิกแล้ว
ช่องถาม
ณ วันที่ 31 ต.ค. 2569
การ์ดที่มา1มาตรา 118 · พ.ร.บ.คุ้มครองแรงงาน พ.ศ. 2541ฉบับ ณ 31 ต.ค. 2569 · ใช้อยู่“ให้นายจ้างจ่ายค่าชดเชยให้แก่ลูกจ้างซึ่งเลิกจ้างดังต่อไปนี้…”
มาตราที่เปลี่ยน
  • แก้ไขมาตรา 118 (5)
  • เพิ่มมาตรา 118 (6)
  • ยกเลิกมาตรา 75

+55 บรรทัด−29 บรรทัด

ไฮไลต์ในคำตอบ

ทำงานครบ 20 ปีขึ้นไป ได้ค่าชดเชย 400 วัน1

06

การเคลื่อนไหว

เคลื่อนเพื่อบอกว่าอะไรเปลี่ยน ไม่ใช่เพื่อประดับ เร็วและนุ่ม และหยุดทั้งหมดถ้าเครื่องตั้งค่าลดการเคลื่อนไหวไว้

ตัวอย่างการเคลื่อนไหว
เข้า
ปากกาเน้น
ค่าชดเชย 400 วัน
สลับ
ตัวเลข
3,968
  • เข้า600 ms · cubic-bezier(0.22, 1, 0.36, 1)ส่วนต่างๆ ลอยขึ้นตอนเลื่อนมาถึง
  • ปากกาเน้น700 ms · ease-in-outไฮไลต์ลากจากซ้ายไปขวา
  • สลับspring 380 / 34แถบที่เลือกเลื่อนตามเมนู
  • ตัวเลข1.2 s · นับจาก 0สถิติตอนเห็นครั้งแรก