T · Design Tokens v1

Easy EF — Design Tokens (v1 · สืบทอดจาก Phase 1)

ทุกสี/ฟอนต์/มุมโค้งในทุกจอชี้มาที่ token ชุดนี้ชุดเดียว — เปลี่ยนธีม/สี/ฟอนต์ภายหลัง = แก้ค่าในบล็อกนี้ · ในแอปจริง token ชุดนี้ = Flutter theme เดียว (BrandConfig / ThemeExtension) ⛔ ห้าม hardcode สีในหน้าจอ

Brand — ตามแอป Phase 1

--brand · ปุ่มหลัก/แถบเลือก

#056839 (primary เดิม)

--brand-2 · hover/เน้นรอง

#0FA715 (green เดิม)

--brand-tint · พื้นอ่อน

#E7F1EB

--accent

#F99B1C (yellow_btn เดิม)

ระดับผล 3 ระดับ — สีเดิมของเข็มวัด Phase 1

--good · Good LV

#45A547 (good_analysis เดิม)

--fair · Fair LV

#EFDB11 (normal_analysis เดิม)

--poor · Poor LV

#F99B1C (poor_analysis เดิม)

โซนไม่ถูกเลือกใช้ tint: --good-tint / --fair-tint / --poor-tint · สีสื่อระดับเสริมด้วยตำแหน่งเข็ม+ข้อความเสมอ ไม่พึ่งสีอย่างเดียว (ตาบอดสี) · ⚠️ เหลือง #EFDB11 ห้ามใช้เป็นสีตัวหนังสือ — ใช้เป็นพื้น/โซนเท่านั้น

Neutral + ความหมายระบบ

--ink · ตัวหนังสือหลัก

#1B2420 (เขียวจางในดำ — เข้าชุด brand)

--ink-2 · รอง

#5C6A63

--ink-3 · จาง/คำใบ้

#6B7A73 (ปรับให้ผ่าน contrast AA)

--surface · พื้นรอง

#F3F6F4

--line · เส้น/ขอบ

#DCE3DE

--danger · เพิกถอน/ผิดพลาดร้ายแรง

#D0342C

Typography — Noto Sans Thai (token: --font · เปลี่ยนได้ที่เดียว)

หัวเรื่อง H1 · 22/700 — ผลการคัดกรอง

หัวข้อรอง · 18/600 — แนะนำส่งพบแพทย์

เนื้อความ · 15/400 — คนไข้ควรได้รับการประเมินต่อโดยแพทย์

ป้ายฟิลด์ · 13/500 — HN — บังคับ

คำใบ้/อ้างอิง · 12/400 — flow 4.3

Components หลัก

กำลังวิเคราะห์

ต้องถ่ายใหม่

field 48px · radius 9 · ปุ่ม/เป้ากด ≥44px