Design System v2.0 · พาเลตจากธีมอ้างอิง Pebble
Style Guide — ตลาดชุมชน
หน้าอ้างอิง Design Tokens และ component มาตรฐานสำหรับงาน redesign · เอกสารเต็มใน DESIGN_SYSTEM.md
1 · สี (Color Tokens)
Primary — เขียวธรรมชาติ (แบรนด์)
50
#F3F8EE
100
#E4F0D9
200
#C0CEB3
300
#9CB98A
400
#6FA05F
500
#47853C
600
#20652F
700
#1B5428
800
#153A2B
900
#0D271D
Accent — ส้มคอรัล (CTA/ราคาโปร เท่านั้น)
50
#FEF1EC
100
#FEEEE9
200
#FDA084
300
#FB8158
400
#F76B3C
500
#F25627
600
#D5431B
700
#B03615
Sun — เหลืองมะนาว (marquee/highlight)
300
400
500
600
700
Aqua — มินต์ (พื้นโปรโมชัน)
100
200
300
500
700
Plum — ม่วง (badge มาแรง)
100
500
700
Neutral — ครีมอบอุ่น (พื้น/ขอบ/ข้อความ)
50
#FBF7F0
100
#F7E8D8
200
#EDDCC7
300
#DCC5A9
400
#BC9F80
500
#97795C
600
#6E5743
700
#4A3A2D
800
#2C2C2C
900
#1C1917
Status — ใช้แทนสี ad-hoc ทั้งหมด
⏳ pending
รอตรวจ / รอข้อมูล
ป้ายสถานะsuccess
ยืนยัน / สำเร็จ
ป้ายสถานะdanger
ปฏิเสธ / ผิดพลาด
ป้ายสถานะℹ info
แจ้งเตือน / แนะนำ
ป้ายสถานะ2 · ตัวอักษร (Sarabun)
สินค้าจากชุมชน
36 / 800 · Heroตะกร้าสินค้า
24 / 700 · หัวข้อหน้าสรุปคำสั่งซื้อ
18 / 700 · หัวข้อการ์ดข้าวหอมมะลิอินทรีย์ ปลูกแบบไม่ใช้สารเคมี จากนาชุมชน
14 / 400 · เนื้อหาสร้างเมื่อ 24 ส.ค. 2569 · เลขที่ TC260824-1935
12 / 400 · caption3 · มุม · เงา · ชั้น
Radius
sm 8
ปุ่ม
md 12
lg 16
การ์ด
xl 20
2xl 24
hero
Shadow
sm · การ์ด
md · hover
lg · modal
4 · Components
ปุ่ม (Button)
ช่องกรอก (Input)
ตัวอย่างข้อความผิดพลาด
การ์ดสถิติ (Stat Card)
ยืนยันแล้ว
8
รอข้อมูล
2
ตาราง (Table)
| องค์กร | พื้นที่ | ยอดขาย | สถานะ |
|---|---|---|---|
| กลุ่มโฮมยิ้ม | ชุมแพ ขอนแก่น | ฿2,400 | ยืนยัน |
| กลุ่มเฉลียงทอง | ภูผาม่าน ขอนแก่น | ฿1,200 | รอตรวจ |
กติกาการใช้
งาน redesign ทุกหน้าต้องประกอบจาก token และ component ในหน้านี้เท่านั้น — หากต้องการค่าใหม่ ให้เพิ่มใน tokens.css + เอกสารนี้ก่อน แล้วจึงใช้งาน