DGA Design System

ระบบออกแบบสำหรับเว็บไซต์สำนักงานพัฒนารัฐบาลดิจิทัล — TOR DGA-69-0177 · ตอบเกณฑ์ข้อ 2.1 (Design System: สี, Typography, Iconography, UI Components) · สอดคล้องกับ CSS Framework (styles.css) นำไปพัฒนาต่อได้ทันที

1. สี (Color Palette)

พร้อมอัตราส่วนคอนทราสต์บนพื้นขาว ตามมาตรฐาน WCAG 2.2 AA (ข้อความปกติ ≥ 4.5:1)

Brand Colors

Navy (หลัก)#1C164B
15.2:1 ✓ AAA
Orange (Accent)#F05123
4.8:1 ✓ AA
Blue (รอง)#1073B8
4.6:1 ✓ AA
Orange Light#FF9933
2.8:1 ⚠ UI Highlights
Blue Light#E6F1F8
พื้นหลังอ่อน

Neutral Colors

Text (Body)#2D2D2D
13.5:1 ✓ AAA
Text Muted#595959
7.0:1 ✓ AA
Text Faint#707070
4.9:1 ✓ AA
Border#E5E7EB
Surface#F5F5F5

2. ตัวอักษร (Typography)

ฟอนต์หลัก Prompt (รองรับไทย+อังกฤษ) · ตัวเลข/อังกฤษ Roboto · Scale แบบ responsive (clamp)

Display · 700รัฐบาลดิจิทัล
H1 · 700หัวเรื่องหลัก Heading 1
H2 · 600หัวข้อรอง Heading 2
H3 · 600หัวการ์ด Heading 3
Body · 400 · 16pxข้อความเนื้อหาปกติ The quick brown fox 0123456789
Small · 400 · 14pxคำอธิบาย/เมตา caption text
Light 300Regular 400Medium 500Semibold 600Bold 700

3. ไอคอน (Iconography)

ชุดไอคอนเส้น (line, 1.8px) สไตล์เดียวกัน สีปรับตาม currentColor · ส่งมอบเป็น SVG sprite

home
search
user
business
security
document
download
calendar
notify
chat
language
ask-ai

4. ปุ่ม (Buttons)

5. ฟอร์ม (Form Inputs)

รูปแบบอีเมลไม่ถูกต้อง
Toggle

6. Badge / Tag

ข่าวสารบทความกิจกรรม

7. การ์ด (Cards)

บทความ

การ์ดข่าว/บทความ News Card

2569 · 1,330

Service Card

8. Alert / Notice

ข้อมูลทั่วไป — ระบบรองรับการแจ้งเตือนแบบ Info
สำเร็จ — บันทึกข้อมูลเรียบร้อยแล้ว
คำเตือน — กรุณาตรวจสอบข้อมูลก่อนดำเนินการต่อ
ข้อผิดพลาด — ไม่สามารถดำเนินการได้ กรุณาลองใหม่

9. Spacing · Radius · Shadow

Spacing (8pt)

4 · 0.25rem8 · 0.5rem12 · 0.75rem16 · 1rem24 · 1.5rem32 · 2rem48 · 3rem64 · 4rem

Radius

sm 8
md 14
lg 22
pill

Shadow / Elevation

sm
md
lg

Breakpoints

Mobile < 640pxTablet 640–1024pxDesktop > 1024px

10. ภาษาออกแบบ “Connected Grid”

ภาษาออกแบบเฉพาะของ DGA ที่ถอดจากอัตลักษณ์จริง — เส้นวงจร (circuit trace) และจุดเชื่อม (node) จากโลโก้ “D”, ลายเชฟรอนของตราสัญลักษณ์ และแนวคิด “สร้าง · เชื่อม · เปิด / Smart Connector”. หลักการ: ทุกองค์ประกอบเสริมความรู้สึก เชื่อมโยง · ลื่นไหล · น่าเชื่อถือ · ชัดเจน — ส้ม = พลัง/การกระทำ, กรมท่า = โครงสร้าง/อำนาจ, ฟ้า = ระบบ/การเชื่อมต่อ. ทุกตัวอย่างด้านล่างเป็นโค้ดจริงจาก enhancements.css + enhance.js.

ส่วนประกอบของภาษา (Expressions)

Circuit-trace kicker

หัวข้อย่อย (.kicker) ทุกจุดได้เส้นวงจรสีส้มนำหน้าอัตโนมัติ — เหมือนรอยวงจรที่แตกออกจากตัว “D”.

ตัวอย่าง KICKER

หัวข้อพร้อมเส้นวงจร

Node & pulse motif

จุดเชื่อม (node) คือโมทีฟย่อยที่กลับมาซ้ำทั่วทั้งระบบ — ใช้เป็นตัวคั่น, ปุ่มกลับขึ้นบน, และ accent.

.circuit-divider

Soft elevation

เงาหลายชั้นโทนกรมท่า (--sh-soft → --sh-soft-2) ให้ความลึกที่นุ่มนวล ไม่แข็งกระด้าง.

soft
soft-2 (hover)
orange glow

Scroll reveal & motion

บล็อกเนื้อหาค่อย ๆ ปรากฏขณะเลื่อน (.reveal) แบบไล่ลำดับ — เนื้อหาไม่เคยถูกซ่อนหากไม่มี JS และเคารพ prefers-reduced-motion.

200–600msระยะเวลา ease-outcubic-bezier(.22,1,.36,1) staggeredไล่ทีละ 70ms

Count-up (trust stats)

ตัวเลขความเชื่อมั่นนับขึ้นเมื่อเข้าสู่จอภาพ (.stats .num) ด้วยตัวเลขแบบ tabular เพื่อไม่ให้สั่น.

7,800ตัวอย่าง count-up
100% เลื่อนมาดู

Connectivity rails

เส้นรางบาง ๆ ใต้ header และ accent บนการ์ด สื่อถึง “สาย” ที่เชื่อมส่วนต่าง ๆ ของระบบเข้าด้วยกัน — ใช้สีแบรนด์ทั้งหมด.

หลักการใช้สี (Semantic colour roles)

Orange · การกระทำ / พลังงาน / การไหล Navy · โครงสร้าง / อำนาจ / ความน่าเชื่อถือ Blue · ระบบ / การเชื่อมต่อ / ลิงก์

หลักความยับยั้งชั่งใจ (restraint): “special moment” เพียง 1–2 จุดต่อหน้า — ความน่าเชื่อถือและการเข้าถึงมาก่อน ความน่าตื่นตาเป็นรอง.

ส่งมอบเป็น: CSS Framework (styles.css + design-tokens.css + enhancements.css) + SVG icon sprite — แปลงเป็น Figma Library ได้โดยตรง · Max Solutions สำหรับ TOR DGA-69-0177