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

1 · สี (Color)

muted ใช้กับข้อความรองเท่านั้น (วันเวลา, caption, count) ที่เหลือดำล้วน — ปกหนังสือเป็น content ไม่นับ

2 · ตัวอักษร (Type scale)

ห้ามเล็กกว่า text-sm · หัวข้อ serif, เนื้อหา sans

3 · เส้นกรอบ — ทุกอัน 1px

เส้นกรอบทุกชิ้น = border border-black (1px ดำ) เท่ากัน — ต้องการเน้นใช้พื้นดำ ไม่ใช่เส้นหนา

4 · ปุ่ม (Buttons)

toggle: outline = ยังไม่เลือก, พื้นดำ = เลือกแล้ว · ปุ่มลบสื่อด้วยคำ ไม่ใช่สีแดง

5 · ป้าย (Badges)

6 · แถวรายการ (List row)

7 · ไอคอน (Icons)

inline SVG stroke 2px · currentColor · ไม่มี emoji

8 · ตัวบอกผู้เข้าร่วม

มีจำกัด: filled = จอง, outline = ว่าง · ไม่จำกัด: filled = จำนวนคนที่จะไปเข้าร่วม

9 · พื้นลาย (Texture fills)

ลายเป็น #000 บนโปร่งใส — แทน bg-gray-* · เป็น chrome/ตกแต่งเท่านั้น ห้ามเก็บความหมายในลายที่เลือก และห้ามวางข้อความบนลาย (วางบนแผ่นขาวซ้อนแทน)

10 · ตอนโหลด (Loading)

หนังสือเปิดแบบ pixel-art — ขาว/ดำล้วน, ปก = พื้นลาย dither (§9) แทนสี, หน้าขวาพลิกเผยตราดาว + ประกายกระพริบ ทั้งหมดขยับแบบ steps() (bitmap) · เคารพ prefers-reduced-motion (หยุดนิ่ง เผยตรา) · <PixelBookLoader />

11 · เช็กลิสต์หน้าใหม่

• สีเฉพาะ ดำ / ขาว / muted — ไม่มีสีอื่น
• เส้นกรอบ 1px ดำเท่ากันหมด เน้นด้วยพื้นดำ
• เนื้อหา ≥ text-base, meta ≥ text-sm
• ไอคอนเป็น inline SVG stroke ไม่มี emoji
• ทุกปุ่มกดได้โดยไม่ต้อง hover · มี focus ring
• หัวข้อ serif, เนื้อหา sans · มุมเหลี่ยม (วงกลมเฉพาะ avatar/จุด)