STYLE 7

คอร์ปอเรทอบอุ่น

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

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

หลักการและปรัชญาของดีไซน์สไตล์คอร์ปอเรทอบอุ่น

🌤

อบอุ่นแต่เป็นมืออาชีพ (Warm & Professional)

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

🤝

เข้าถึงง่าย (Approachable)

ฟอนต์ Mitr ที่อ่านง่ายและเป็นมิตร มุมโค้งนุ่มนวล และเงาโทนอุ่นที่ช่วยลดความแข็งกร้าว

รายละเอียดประณีต (Refined Details)

แถบแอมเบอร์แบบ shimmer, เอฟเฟกต์ hover ที่นุ่มนวล และ gradient อุ่นที่ช่วยเพิ่มมิติให้ดีไซน์

🎯

ใช้งานได้จริง (Practical)

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

ชุดสี (Color Palette)

สีหลักและสีรองที่ใช้ในระบบ โทนอบอุ่นเป็นเอกลักษณ์

Sidebar BG
สีเข้มหลัก (Primary Dark)
#1c1917
Sidebar, ข้อความหลัก, พื้นหลังเข้ม
Sidebar Light
น้ำตาลเข้ม (Dark Brown)
#292524
พื้นหลัง Sidebar รอง, ส่วนที่เน้น
Accent
แอมเบอร์ (Amber Accent)
#f59e0b
ปุ่มหลัก, ลิงก์, ไอคอนสำคัญ, แถบเน้น
Accent Hover
แอมเบอร์เข้ม (Dark Amber)
#d97706
สถานะ Hover, เตือน (Warning)
Success
สำเร็จ (Success)
#16a34a
สถานะอนุมัติ, การดำเนินการสำเร็จ
Danger
อันตราย (Danger)
#dc2626
ข้อผิดพลาด, การลบ, แจ้งเตือนด่วน
Background
พื้นหลังอุ่น (Warm Background)
#fefce8
พื้นหลังหน้าเว็บหลัก
Surface Warm
พื้นผิวอุ่น (Warm Surface)
#fffbeb
พื้นหลัง Input, ตาราง Header, การ์ดรอง
Border
เส้นขอบ (Border)
#e7e5e4
เส้นขอบทั่วไป, แบ่งส่วน
Text Secondary
ข้อความรอง (Text Secondary)
#57534e
คำอธิบาย, ข้อมูลเสริม
Text Muted
ข้อความจาง (Text Muted)
#a8a29e
ป้ายกำกับ, Placeholder, ข้อมูลเสริม
Deep Amber
แอมเบอร์ลึก (Deep Amber)
#b45309
สถานะกำลังดำเนินการ, Gradient

ตัวอักษร (Typography)

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

Font Family
Mitr
Google Fonts - ฟอนต์ไทยที่เป็นมิตร อ่านง่าย รองรับน้ำหนัก 200-700
หัวข้อหลัก (H1)
แดชบอร์ดบริหารทรัพยากรบุคคล
28px / Medium (500) / Letter-spacing: -0.5px
หัวข้อรอง (H2)
รายการบุคลากรล่าสุด
20px / Medium (500)
หัวข้อย่อย (H3)
ข้อมูลทั่วไป
16px / Medium (500)
ข้อความปกติ (Body)
ยินดีต้อนรับกลับมา! นี่คือภาพรวมข้อมูลทรัพยากรบุคคลของมหาวิทยาลัย
14px / Light (300) / Line-height: 1.7
ข้อความรอง (Secondary)
แสดง 10 รายการจากทั้งหมด 156 รายการ
14px / Light (300) / Color: #57534e
ข้อความเล็ก (Small)
อัปเดตล่าสุด: 5 นาทีที่แล้ว
12px / Light (300) / Color: #a8a29e

ปุ่ม (Buttons)

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

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

สถานะ (Status Badges)

ป้ายแสดงสถานะต่างๆ ใช้รูปแบบ pill rounded

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

ฟอร์ม (Form Elements)

องค์ประกอบฟอร์มต่างๆ พร้อมพื้นหลังสีอุ่น

การ์ด (Cards)

รูปแบบการ์ดที่ใช้แสดงข้อมูล พร้อมเงาโทนอุ่น

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

เนื้อหาของการ์ดจะแสดงที่นี่ การ์ดมี hover effect ที่ยกขึ้นเล็กน้อยพร้อมเงาโทนอุ่น

ระยะห่าง (Spacing)

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

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

มุมโค้ง (Border Radius)

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

4px
ปุ่มเล็ก
8px
Nav Item
10px
ปุ่ม, Input
16px
การ์ดใหญ่
20px
Badge Pill

เงา (Shadows)

ระดับเงาโทนอุ่นที่ใช้สร้างความลึก (warm-toned shadows)

Warm Small
rgba(120,80,20,0.06)
Warm Medium
rgba(120,80,20,0.08)
Warm Large
rgba(120,80,20,0.10)

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

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

✅ จุดเด่น

  • สร้างความรู้สึกอบอุ่นและเป็นมิตร ไม่เย็นชา
  • ฟอนต์ Mitr อ่านง่าย รองรับภาษาไทยได้ดีเยี่ยม
  • พื้นหลังสีครีมอุ่นสบายตา ใช้งานได้ยาวนาน
  • โทนสีแอมเบอร์สะดุดตาแต่ไม่รุนแรง
  • เงาโทนอุ่นช่วยให้ดีไซน์มีมิติอย่างเป็นธรรมชาติ
  • เหมาะกับองค์กรที่ต้องการภาพลักษณ์ที่เข้าถึงง่าย

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

  • โทนสีอุ่นอาจไม่เหมาะกับบางองค์กรที่ต้องการภาพลักษณ์เย็นสง่า
  • สีแอมเบอร์อาจมี Contrast ไม่เพียงพอบนพื้นขาว
  • พื้นหลังสีครีมอาจดูไม่ชัดเจนในบางจอแสดงผล
  • อาจต้องระวังเรื่อง Accessibility สำหรับผู้ที่มีปัญหาการมองเห็นสี

เหมาะสำหรับ