ภาษาการออกแบบ · HomeOffice

ระบบออกแบบ

โทนเดียวทั้งระบบ — ขาวสะอาด · เส้นบาง · แบน · ไม่ฟุ้ง ดูเป็น SaaS ที่กล้าเอาไปจัดการเงินจริง · ทุกองค์ประกอบใช้ token เดียวกัน เปลี่ยนสีแบรนด์ได้ทั้งระบบจากที่เดียว

สีตัวอักษรระยะ·มุม·เงาปุ่มการ์ดป้าย·สถานะแจ้งเตือนฟอร์มแชตตารางไอคอนMotionหลักการ

สี (Color tokens)

พื้นขาวเสมอ · accent ใช้น้อยมาก (active/ลิงก์/โฟกัส) · เก็บเป็น channel "R G B" เพื่อให้ alpha ทำงานทั่วระบบ

ink

26 32 50

ตัวอักษร/เส้นหลัก

muted

92 100 120

รอง

faint

150 156 172

ตติยภูมิ

accent

37 99 235

เน้นเส้นเดียว

surface

249 250 252

พื้นหน้า

card

255 255 255

พื้นการ์ด

สีเชิงความหมาย (semantic — ใช้กับสถานะเท่านั้น ไม่ใช่ตกแต่ง)

safe / good

เขียว · ปลอดภัย/สำเร็จ

warn / caution

เหลือง · ระวัง

bad / danger

แดง · เกินกำหนด/เสี่ยง

info / free

น้ำเงิน · ข้อมูล

ชุดโทนแบรนด์ (เปลี่ยนได้ต่อบริษัท — พื้นขาวเหมือนเดิม เปลี่ยนแค่ ink + accent)

Blue Mono Indigo Teal Slate

กดปุ่ม "เปลี่ยนโทนสี" ที่ sidebar เพื่อดูทั้งระบบเปลี่ยนสีสด ๆ

ตัวอักษร (Typography)

2 ฟอนต์ (Cadson Demak รองรับไทยเต็ม) — Bai Jamjuree หัวเรื่อง · Anuphan เนื้อหา · ตัวเลขใช้ tabular เสมอ

ออฟฟิศทั้งใบในแชทเดียวDisplay · Bai Jamjuree 700 · 34px
หัวเรื่องหลัก H1Bai Jamjuree 600 · 24px
หัวเรื่องรอง H2Bai Jamjuree 600 · 18px
EYEBROW · ป้ายกำกับBai Jamjuree 600 · 11px · tracking 0.16em
เนื้อหาปกติ อ่านสบายตา ภาษาคน เลี่ยงศัพท์เทคนิคAnuphan 400 · 16px
ข้อความรอง/คำอธิบายAnuphan 400 · 14px · muted
฿1,284,500.00ตัวเลขเงิน · tabular-nums

ระยะ · มุม · เงา

มุมโค้งนุ่ม · เงาบางมาก (ความลึกมาจาก hairline ไม่ใช่เงาหนัก) · ไม่มีขอบดำเข้ม

มุมโค้ง (radius)

.4 · .7 · 1rem · full

เงา (elevation)

shadow-sm · shadow-md

เส้น hairline

line / 0.10 · 0.18

ระยะห่าง

8·16·24·40 (4pt grid)

ปุ่ม (Buttons)

CTA หลัก สีเข้มทึบ 1 ปุ่ม/หน้า เท่านั้น (hover → accent) · ที่เหลือเป็นปุ่มเส้นบาง · ห้าม gradient/glow

chip-ink chip ปกติ

การ์ด & สถิติ

การ์ดพื้นขาว ขอบ hairline · การ์ดสถิติมีแถบสีบาง ๆ ด้านบนบอกสถานะ

เงินคงเหลือ
412,000 ฿
accent
จ่ายไหว
ไหว
safe
ใกล้กำหนด
2
warn
เกินกำหนด
1
bad

การ์ดเนื้อหา (cf-card)

hover แล้วเงาเข้มขึ้นนิด + ขอบชัดขึ้น — feedback ละมุน ไม่กระโดด

ป้าย & สถานะ

pill บอกสถานะ · tier บอกชั้นอนุมัติ · ไฟจราจรบอกสุขภาพ

zone:ปลอดภัยระวังเกินกำหนดข้อมูลปิดอยู่
tier:T0 ทำเลยT1 บันทึกT2 ส่งออกนอกT3 จ่ายเงิน
ไฟ: เขียว เหลือง แดง

กล่องแจ้งเตือน (Callouts)

ข้อมูล/บริบท — โทนกลาง ไม่ตื่นเต้น
สำเร็จ/ข้ามแผนกอัตโนมัติ — เขียว
เตือนสิ่งที่ใกล้ถึงกำหนด — เหลือง
เรื่องด่วน/เกินกำหนด/อ่อนไหว — แดง

ฟอร์ม & ช่องสั่งงาน

โฟกัสมีวงแหวน accent บาง ๆ · ช่องสั่งงาน (composer) คือพระเอกของทั้งแอป

พิมพ์สั่งงานภาษาคน เช่น "เดือนนี้เงินพอจ่ายเงินเดือนไหม"

บับเบิลแชต (Chief of Staff)

เดือนนี้เงินพอจ่ายเงินเดือนไหม
พอครับ — หลังหักเงินเดือน ฿320,000 และภาษีที่ครบกำหนด เหลือกระแสเงินสด ฿412,000 · มี 1 ใบรออนุมัติก่อนจ่าย

ตาราง (Table)

ลูกค้ายอดสถานะ
Lumi Brand฿80,000ชำระแล้ว
ABC Media฿120,000รอชำระ
Premiere฿150,000เกินกำหนด

ไอคอน (Iconography)

ใช้ Lucide เส้น stroke 2 · ขนาด 14–22px · ห้ามใช้ emoji เป็น UI (ใช้ในข้อความได้)

Motion

เคลื่อนไหวเพื่อ "นำสายตา" ไม่ใช่โชว์ · ทุกอย่างเคารพ prefers-reduced-motion

เปิดหน้า

เนื้อหาไล่ขึ้นทีละชิ้น (stagger ~0.06s) — รีเฟรชหน้านี้เห็นได้

Hover

การ์ด/ปุ่ม เงา+ขอบเปลี่ยนใน .15–.2s ละมุน

Toast

เลื่อนขึ้นจางเข้า แทน native alert

หลักการ (ลีน · ไม่ slop)

ทำ

  • • พื้นขาว เส้น hairline ความลึกบาง
  • • 1 CTA หลักต่อหน้า (สีเข้มทึบ)
  • • ใช้ semantic token เปลี่ยนแบรนด์ที่เดียว
  • • ภาษาคน อ่านง่าย เลี่ยงศัพท์เทคนิค
  • • ตัวเลขเงิน tabular + ฿ เสมอ

ห้าม

  • • gradient/glow/neon บนปุ่ม
  • • emoji เป็นไอคอน UI
  • • native alert/confirm (ใช้ toast/modal)
  • • หลายฟอนต์ · serif ฟุ้ง
  • • เงาหนา/ขอบดำเข้ม/สีจัดเกินจำเป็น