← หน้าแรก

Teamkaengthai Design Tokens

ร่างแรก แบรนด์ยังไม่ยืนยัน · แก้ค่าที่ design/tokens/tokens.css ไฟล์เดียว ทุกหน้าเปลี่ยนตาม · ใน UI ให้ใช้ semantic token (--color-*) ไม่ใช้ primitive ตรงๆ

Primitives

Neutral โทน slate เย็น และแดงพริกเป็น accent สีเดียว ขมิ้นกับโหระพาใช้กับสถานะเท่านั้น

พริก 500--chili-500
พริก 600--chili-600
พริก 900--chili-900
พริก 50--chili-50
ขมิ้น 400--turmeric-400
ขมิ้น 100--turmeric-100
โหระพา 700--basil-700
Slate 900--slate-900
Slate 600--slate-600
Slate 200--slate-200
Slate 50--slate-50

Gradient + Glass

Hero--gradient-hero
พื้นหลังแอป--gradient-canvas
ช่องรูปที่ยังไม่มีรูป--gradient-media
Glass--glass-*

Glass ใช้เฉพาะแถบหัว แถบล่าง และการ์ดที่วางบน gradient ถ้าเครื่องไม่รองรับ blur หรือตั้งค่าลดความโปร่งใสไว้ จะใช้พื้นทึบแทน

Semantic: ใช้ตัวนี้ใน UI

--color-primaryปุ่มหลัก, ตัวเลือกที่เลือกสั่งเลย
--color-text / -mutedข้อความหลัก / รอง (contrast ผ่าน AA)ข้อความ รอง
--color-successชำระแล้ว, ได้รับแล้วชำระแล้ว
--color-warning-*คำเตือน เช่น สูตรเปลี่ยนตามวิธีส่งรถเย็น: ไม่มีเลือดไก่
--color-dangerหมด, errorหมดรอบนี้
--color-annotation-bgป้ายใน wireframe เท่านั้น ไม่ใช่ UI จริงassumption

Typography: IBM Plex Sans Thai

24 · แกงเขียวหวานไก่ --text-xl

20 · รอบส่งวันเสาร์ --text-lg

16 · เนื้อหาทั่วไป อ่านง่ายบนมือถือ --text-md

14 · ค่าเริ่มต้น UI --text-sm

12 · คำอธิบายรอง, ป้าย --text-xs

line-height 1.5 เผื่อสระบน/ล่างและวรรณยุกต์

Spacing (4px grid)

--space-1
4
--space-2
8
--space-3
12
--space-4
16
--space-6
24
--space-8
32

Radius & Elevation

sm 6
md 10
lg 16
full
shadow-md

Components ตัวอย่าง

ชำระ ฿1,327 แชร์ให้เพื่อน ทั้งหมดแกง เหลือ 3 ชุด