ตัวอย่างการออกแบบ — ไม่ใช่ข้อมูลจริงบริษัท เลขทะเบียน งบการเงิน และ checksum ในหน้านี้เป็นเนื้อหาสมมุติจากไฟล์ออกแบบ ไม่มีอยู่ในระบบ และไม่ได้ดึงจากแหล่งใด
ARNONBETA
คอมโพเนนต์และสถานะ
ยึดตาม Arnon Design System · accent Gold — ธีมมืดเป็นค่าเริ่มต้น ธีมสว่างเป็นธีมสำรองสำหรับอ่านยาว และหน้านี้เคารพค่าที่ระบบปฏิบัติการตั้งไว้
Evidence Badge — สถานะที่คำนวณได้ ไม่ใช่คะแนน
ปฐมภูมิทุติยภูมิไม่มีแหล่งข้อมูลเก่าแหล่งขัดแย้งมุมมองแต่ละฉบับ
ปุ่มและชิป
Universal Search — default / focus
Evidence Card — default / empty
[1]ป.พ.พ. มาตรา ๑๑๖๘กรรมการต้องใช้ความเอื้อเฟื้อสอดส่อง…
ยังไม่มีการอ้างอิงในหน้านี้
สีในธีม — ชื่อที่ใช้เขียน ไม่ใช่ค่า hex
paperพื้นหน้า
surfaceพื้นการ์ด
surface-2พื้นซ้อน
inkตัวอักษรหลัก
mutedตัวอักษรรอง
subtleคำอธิบาย · ตัวเลข
lineเส้นแบ่ง
controlขอบตัวควบคุม (1.4.11)
accentลิงก์ · ปุ่มหลัก
accent-softพื้นอ่อนของ accent
ev-primaryปฐมภูมิ
ev-secondaryทุติยภูมิ
ev-staleข้อมูลเก่า
ev-noneไม่มีแหล่ง · ขัดแย้ง
สเกลตัวอักษร — เก้าขั้น เนื้อความคือ base
- text-2xs
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 11px
- text-xs
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 12px
- text-sm
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 13px
- text-md
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 14px
- text-base
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 15px
- text-lg
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 17px
- text-xl
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 20px
- text-2xl
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 24px
- text-3xl
- ทุกคำตอบชี้กลับไปยังต้นฉบับได้ 30px
จังหวะและขอบ — สเกล 4/8 · เฟรม 1200 · มุมสามค่า
- max-w-frame
- เฟรมของหน้า 1200px — แถบบน ป้ายเตือน เนื้อหา และ footer ใช้ค่าเดียวกัน
- max-w-prose
- ความกว้างของ "บรรทัด" 68ch — ใส่ที่ประโยค ไม่ใช่ที่หน้า
- px-gutter
- ขอบซ้ายขวา clamp(16px,3vw,32px)
- p-* / gap-*
- สเกล 4/8 เท่านั้น — 9px หรือ 13px คือการเดา ไม่ใช่การตัดสินใจ
- rounded-ctl / card / dialog
- 8 · 12 · 16 — ปุ่มและอินพุต · การ์ดและแผง · dialog
- border-*-rule
- เส้น 3px ของ DS บนบทที่ยกมาและแผงคำตอบ
- leading-relaxed / reader
- 1.6 เนื้อความ · 1.85 อ่านยาว
- xs sm md lg xl 2xl 3xl 4xl
- 400 560 640 720 900 1080 1240 1440 — ห้ามเขียน min-[Npx]:
กติกาการใช้ token ในผลิตภัณฑ์นี้
- accent — Gold #D4AF37
- accent ของ arnon.in.th ตาม CI · ใช้กับลิงก์ เลขอ้างอิง และปุ่มหลักเท่านั้น ห้ามใช้เป็นพื้นหลังกว้าง (ธีมสว่างเข้มลงเป็น #7A5C12 เพื่อ AA)
- --green (success #22C55E)
- สงวนไว้สำหรับป้าย “ปฐมภูมิ” เท่านั้น ไม่ใช่สีสำเร็จ/ผ่าน
- --info (#3B82F6)
- ใช้กับป้าย “ทุติยภูมิ” — แยกจาก accent เพื่อไม่ให้สับสนกับลิงก์
- --amber (warning #F59E0B)
- ใช้กับ “ข้อมูลเก่า” และ “ประโยคไม่มีแหล่ง” เท่านั้น
- --red (error #EF4444)
- ใช้กับ “แหล่งขัดแย้ง” และสถานะไม่มีหลักฐานพอ
- marker dot (fact/analysis/interpretation)
- จุดทึบ / จุดขอบทึบ / จุดขอบประ — เป็นสัญญะรูปทรง ไม่ใช่สี เพื่อให้แยกออกในโหมด grayscale
- radius 8 / 12 / 16
- ตาม DS: ปุ่มและอินพุต 8px · การ์ดและแผง 12px · dialog และ dropdown 16px
- typography
- Display/H1–H3 = Cormorant Garamond + Noto Serif Thai · เนื้อความ = Sarabun 15px/1.6 กว้างไม่เกิน 68ch
- spacing
- สเกล 4/8 — ระยะภายในการ์ด 12–16px ระยะระหว่างบล็อก 14–22px หน้าเนื้อหากว้างสุด 1200px