STYLE 5

ดาร์กเอ็กเซ็กคิวทีฟ

ดีไซน์โทนมืดระดับผู้บริหาร เน้นความหรูหรา พื้นผิวเข้ม สีเขียว Emerald เรืองแสง สร้างบรรยากาศเปรียบเสมือนห้องประชุมระดับสูง

แนวคิดการออกแบบ

หลักการและปรัชญาของดีไซน์สไตล์นี้

🌒

ความหรูหราแบบมืด (Dark Luxury)

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

เรืองแสง (Glow Effect)

ใช้แสง Emerald เรืองรองเป็นจุดเน้น สร้างเอฟเฟกต์ Glow บนปุ่ม ไอคอน และ Badge ให้รู้สึกล้ำสมัยและมีชีวิตชีวา

📎

พื้นผิวยกระดับ (Elevated Surfaces)

แบ่งชั้นพื้นผิว 3 ระดับ (Base, Surface, Elevated) ด้วยความเข้มที่ต่างกัน แทนที่เงาแบบ Light Theme ด้วย Border ละเอียด

👁

สบายตายามค่ำ (Eye Comfort)

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

ชุดสี (Color Palette)

สีหลักและสีรองที่ใช้ในระบบ

Base
พื้นฐาน (Base)
#0a0a0f
พื้นหลังหลัก ชั้นลึกสุด
Surface
พื้นผิว (Surface)
#12121a
การ์ด, Section, ตาราง
Elevated
ยกระดับ (Elevated)
#1a1a2e
Input, Dropdown, Hover state
Accent
สีเน้น (Accent)
#10b981
ปุ่มหลัก, Active state, Glow
Accent Light
สีเน้นอ่อน (Accent Light)
#34d399
ข้อความ Active, ไฮไลท์
Red
แดง (Red)
#ef4444
ข้อผิดพลาด, การลบ, ปฏิเสธ
Amber
อำพัน (Amber)
#f59e0b
รอดำเนินการ, แจ้งเตือน
Blue
น้ำเงิน (Blue)
#3b82f6
ข้อมูล, ลิงก์, กำลังดำเนินการ
Purple
ม่วง (Purple)
#8b5cf6
หมวดหมู่พิเศษ, ไอคอนรอง
Text Primary
ตัวอักษรหลัก (Text Primary)
#f0f0f5
หัวข้อ, ข้อความสำคัญ
Text Secondary
ตัวอักษรรอง (Text Secondary)
#9ca3af
คำอธิบาย, ข้อมูลเสริม
Text Muted
ตัวอักษรจาง (Text Muted)
#6b7280
Label, Placeholder, เวลา

ตัวอักษร (Typography)

ฟอนต์และขนาดตัวอักษรที่ใช้ในระบบ

Font Family
IBM Plex Sans Thai
Google Fonts - รองรับภาษาไทยและอังกฤษ / ฟอนต์สำรอง: Prompt
หัวข้อหลัก (H1)
แดชบอร์ดบริหารทรัพยากรบุคคล
28px / Bold (700) / Letter-spacing: -0.5px
หัวข้อรอง (H2)
รายการบุคลากรล่าสุด
20px / Semi-bold (600)
หัวข้อย่อย (H3)
ข้อมูลทั่วไป
16px / Semi-bold (600)
ข้อความปกติ (Body)
ยินดีต้อนรับกลับมา! นี่คือภาพรวมข้อมูลทรัพยากรบุคคลของมหาวิทยาลัย
14px / Regular (400) / Line-height: 1.6
ข้อความรอง (Secondary)
แสดง 10 รายการจากทั้งหมด 156 รายการ
14px / Regular (400) / Color: #9ca3af
ข้อความเล็ก (Small)
อัปเดตล่าสุด: 5 นาทีที่แล้ว
12px / Regular (400) / Color: #6b7280

ปุ่ม (Buttons)

รูปแบบปุ่มต่างๆ ที่ใช้ในระบบ

ปุ่มหลัก (Primary Buttons)
ปุ่มรอง (Secondary Buttons)

สถานะ (Status Badges)

ป้ายแสดงสถานะต่างๆ พร้อม Glow effect บนพื้นมืด

อนุมัติแล้ว รอดำเนินการ ปฏิเสธ กำลังดำเนินการ

ฟอร์ม (Form Elements)

องค์ประกอบฟอร์มบนพื้นหลังมืด

การ์ด (Cards)

รูปแบบการ์ดที่ใช้แสดงข้อมูล พร้อมพื้นผิวยกระดับ

👥
8,547
บุคลากรทั้งหมด
รายการล่าสุด ดูทั้งหมด →

เนื้อหาของการ์ดจะแสดงที่นี่ การ์ดมี hover effect ที่ยกขึ้นพร้อม Emerald glow border

ระยะห่าง (Spacing)

ระบบระยะห่างที่ใช้ในการออกแบบ

8px
12px
16px
24px
32px
48px

มุมโค้ง (Border Radius)

ระดับความโค้งมนของมุม

4px
Badge เล็ก
10px
ปุ่ม, Input
12px
ไอคอน, Logo
16px
การ์ด, Stat
20px
Badge สถานะ

เงา (Shadows)

ระดับเงาที่ใช้สร้างความลึกบนพื้นมืด (ผสม Emerald glow)

Small
เงาเบา
Medium
เงา + Glow
Large
เงา Hover + Glow

ข้อดี-ข้อควรพิจารณา

สรุปจุดเด่นและข้อควรพิจารณาของสไตล์นี้

✔ จุดเด่น

  • ดูหรูหรา ทันสมัย เหมาะกับผู้บริหารระดับสูง
  • ลดความล้าสายตาเมื่อใช้งานเป็นเวลานาน
  • สร้างความโดดเด่นและแตกต่างจากระบบทั่วไป
  • Emerald glow effect ให้ความรู้สึกล้ำสมัย
  • พื้นผิวหลายระดับสร้าง Visual hierarchy ที่ดี
  • เหมาะสำหรับทำงานในห้องที่แสงน้อย

⚠ ข้อควรพิจารณา

  • อาจดูไม่เป็นทางการสำหรับหน่วยงานราชการ
  • ไม่เหมาะกับการใช้งานในที่ที่มีแสงจ้า
  • ผู้ใช้บางกลุ่มอาจไม่คุ้นเคยกับ Dark theme
  • การพิมพ์เอกสารจาก Dark theme ใช้หมึกมาก
  • ต้องออกแบบสีอย่างระมัดระวังเพื่อ Accessibility

เหมาะสำหรับ