AICE · Premium — EduFlow · Phase 2: Foundations / Design Tokens

Foundations · 01

สถาปัตยกรรม Token 2 ชั้น

กุญแจที่ทำให้แก้แบรนด์/ทำ dark/เพิ่มประเทศ ได้โดยไม่ต้องรื้อ — แยก “ค่าดิบ” ออกจาก “ความหมาย”

Tier 1 · Primitive

ค่าดิบ

พาเลตต์จริง ไม่ผูกความหมาย เช่น สเกลสีน้ำเงิน 50–900

blue-600 = #244B86

→

Tier 2 · Semantic

ความหมาย

ตั้งชื่อตามหน้าที่ ชี้ไป primitive — เปลี่ยน theme ที่ชั้นนี้

color.primary → blue-600 (light) / blue-300 (dark)

→

ใช้งาน · Component

คอมโพเนนต์

เรียกเฉพาะ semantic ไม่แตะค่าดิบ — สลับ theme อัตโนมัติ

Button.bg = color.primary

เพราะ component เรียกแค่ color.primary ไม่ใช่ #244B86 ตรงๆ — วันที่ลูกค้าอยากเปลี่ยนแบรนด์หรือเปิด dark mode เราแก้แค่ Tier 2 ชั้นเดียว ทั้งระบบเปลี่ยนตาม

Foundations · 02

ระบบสี — จาก “5 น้ำเงิน” เหลือ 1

พาเลตต์ primitive ที่คุมด้วยสเกล + semantic token ที่ map ทั้ง Light และ Dark

5 เฉดน้ำเงินมั่ว → 1 สเกล Blue 50–900 · semantic ชี้ชัด · ผ่าน AA

Blue · Brand primary 50 → 900

50100200300400600700800900

Orange · Accent / Action เน้นพลังตามแบรนด์

50200300500700

Neutral · พื้นหลัง/ตัวอักษร/เส้น 0 → 900

050100200300400500700800900

Status success · warning · error · info

successwarningerrorinfo

Semantic Tokens · map Light ↔ Dark

Semantic token	Light	Dark	คอนทราสต์
bg / page	#F5F7FB	#0F1623	base
bg / surface	#FFFFFF	#1B2433	base
text / primary	#16233B	#EAEEF5	13:1 ✓
text / secondary	#67728A	#99A3B5	4.6:1 ✓
color / primary	#244B86	#4C82D6	7:1 ✓
color / accent	#F2994A	#F9B574	AA ✓
border / default	#DCE2EC	#2E3A4F	3:1 ✓

Foundations · 03

หนึ่งระบบ · สองธีม

คอมโพเนนต์เดียวกัน เรนเดอร์ทั้ง Light และ Dark จาก token ชุดเดียว — แก้สิ่งที่ audit เจอ (“0 dark mode”)

hardcode สีขาว ไม่มี dark → semantic token สลับ Light/Dark อัตโนมัติทั้งระบบ

☀️ Light theme

นักเรียนทั้งหมด

ภาคเรียน 1/2568 · 1,248 คน

เพิ่มนักเรียนนำเข้าส่งออก

ชำระเงินแล้ว

มิถุนายน 2568

● 92% ครบ

🌙 Dark theme

นักเรียนทั้งหมด

ภาคเรียน 1/2568 · 1,248 คน

เพิ่มนักเรียนนำเข้าส่งออก

ชำระเงินแล้ว

มิถุนายน 2568

● 92% ครบ

โค้ดเดียวกัน — ต่างแค่ค่า token ที่ semantic ชี้ไป. Dark ใช้สีอ่อนขึ้น (blue-300) เพื่อคงคอนทราสต์ AA บนพื้นเข้ม

Foundations · 04

Type Scale

จาก “4 ขนาด body + 2 ฟอนต์ปน” → ระบบเดียว: Kanit (หัวข้อ) · IBM Plex Sans Thai (เนื้อหา) · Space Grotesk (ตัวเลข)

DisplayKanit 800 · 40/1.1

ระบบโรงเรียน

Heading 1Kanit 700 · 32/1.15

ภาพรวมวันนี้

Heading 2Kanit 700 · 24/1.2

รายชื่อนักเรียน

Heading 3Kanit 700 · 20/1.25

การชำระเงิน

Body LargeIBM Plex 400 · 16/1.6

ข้อความเนื้อหาขนาดใหญ่ อ่านสบายสำหรับคำอธิบายสำคัญ

BodyIBM Plex 400 · 14/1.6

ข้อความปกติในตารางและฟอร์ม — ขนาดหลักของระบบ

CaptionIBM Plex 400 · 12/1.5

ข้อความกำกับ ป้าย และคำอธิบายรอง

NumberSpace Grotesk 700 · tabular

1,248 · ฿86,400 · 92.0%

Foundations · 05

Spacing Scale · ฐาน 8px

จาก “5 ค่าสุ่ม” → สเกล 4/8px ที่คาดเดาได้ · จังหวะหน้าจอนิ่ง ดูเป็นระบบ

space-1 · 4px

space-2 · 8px

space-3 · 12px

space-4 · 16px

space-6 · 24px

space-8 · 32px

space-12 · 48px

space-16 · 64px

Foundations · 06

Radius & Elevation

มุมโค้งและเงาเป็นสเกลเดียว — ปุ่ม/การ์ด/โมดัล ดูเป็นชุดเดียวกันทั้งระบบ

Radius

sm · 6

md · 10

lg · 14

xl · 20

full

Elevation

e2 · card

e3 · modal

e4 · overlay

Foundations · 07

Iconography

จาก “2 ชุดปน filled/outline” → ชุดเดียว: outline · grid 24px · เส้น 1.8 · ปลายมน — สม่ำเสมอทุกไอคอน

ทุกไอคอนยึด grid + stroke เดียวกัน → วาง side-by-side แล้วน้ำหนักเท่ากัน ไม่มีตัวหนา-บางสลับ

Foundations · 08 · Handoff preview

Token → Code

token ไม่ได้อยู่แค่ใน Figma — export เป็นโค้ดให้ทีม dev (React/RN) ใช้ตรง · ลดช่องว่างดีไซน์↔โค้ด (เป้า velocity +30%)

/* primitive (Tier 1) */
--blue-600: #244B86; --blue-300: #7AA3E3;
--neutral-0: #FFFFFF; --neutral-900: #0F1623;

/* semantic (Tier 2) · Light */
:root {
  --color-primary: var(--blue-600);
  --bg-surface: var(--neutral-0);
  --text-primary: #16233B;
}
/* semantic · Dark — แก้แค่ชั้นนี้ */
[data-theme="dark"] {
  --color-primary: var(--blue-300);
  --bg-surface: #1B2433;
  --text-primary: #EAEEF5;
}

📦 ส่งมอบเป็น Style Dictionary → export พร้อมกันเป็น CSS variables (Web) · React Native (Mobile) · JSON — แหล่งจริงที่เดียว ป้อนเข้าเฟส 3 (Components) ทันที

R2 Checkpoint · Next Phase 3

รากวางแล้ว → สร้าง Components

เฟส 2 ให้ “แหล่งความจริงที่เดียว” — สี (light/dark) · type · spacing · radius · icon เป็น token พร้อมโค้ด. นี่คือ จุดแก้ครั้งที่ 2. พออนุมัติ เราลงเฟส 3 ประกอบ token เป็น component library จริง (Button · Input · Table · Modal · Card · Nav) ครบ state/variant ทั้ง Web และ Mobile

เฟส 1 · Audit ✓

เฟส 2 · Foundations ✓

เฟส 3 · Components (วัน 5–7)

เฟส 4–5 · Screens + Handoff

รอ R2 จากคุณวิชญ์ (และ ICE) — ติตรงไหนปรับได้ แล้วลุยเฟส 3 ครับ