Principles

Atomic Thinking

Design system ของ B.Grimm จัดลำดับชั้นแบบ atomic — จากเล็กไปใหญ่:

Token → Atom → Molecule → Component → Pattern → Page

ชั้น	ตัวอย่าง
Token	color.primary, space.4, radius.md (ดู Design Tokens)
Atom	ปุ่ม, input field, ไอคอน, label
Molecule	Search bar (input + icon + button), form field (label + input + helper text)
Component	Card, Navbar, Modal
Pattern	Dashboard layout, checkout flow
Page	หน้าเว็บที่ประกอบจาก pattern ข้างต้น

บันไดจริงทั้ง 6 ขั้น · ทุกช่องคือของจริงที่เรนเดอร์อยู่ ไม่ใช่ภาพประกอบ

color.primary

1 · Tokenค่าดิบ 1 ค่า — #FF6727

2 · AtomToken ประกอบเป็นปุ่ม 1 ตัว

⌕ค้นหาโครงการค้นหา

3 · MoleculeInput + icon + button = search bar

โรงไฟฟ้าอมตะ

4 · ComponentCard ที่นำไปใช้ซ้ำได้ทั้งเว็บ

5 · PatternKPI + กราฟ = dashboard layout

6 · Pageหน้าเว็บที่ประกอบครบทุกชั้น

ทั้ง 6 ขั้นด้านบนสืบสีมาจาก token เดียวกันคือ color.primary — เปลี่ยนที่ขั้นที่ 1 ขั้นเดียว ทุกขั้นถัดไปเปลี่ยนตามหมด

หลักการ: แก้ที่ token ชั้นล่างสุดเท่าที่เป็นไปได้ — ถ้าต้องแก้สีปุ่มทั้งเว็บ ให้แก้ที่ token ไม่ใช่ไล่แก้ทีละ component

Naming Convention

ชื่อ component ต้อง ตรงกันทั้ง Figma และโค้ด เพื่อให้ designer/developer คุยกันด้วยคำเดียวกัน — ใช้ PascalCase สำหรับชื่อ component (ButtonPrimary, CardFeature) และ kebab-case สำหรับ CSS class/utility (btn-primary, card-feature)

ห้ามตั้งชื่อ component ตามหน้าตา (OrangeButton) — ให้ตั้งตามบทบาท (ButtonPrimary) เพราะสีอาจเปลี่ยนตาม theme/dark mode แต่บทบาทไม่เปลี่ยน

ทำไมชื่อตามหน้าตาถึงพัง · ปุ่มเดียวกันบนพื้นสองแบบ

ถูก — ตั้งชื่อตามบทบาท

ชื่อยังจริงอยู่บน dark mode สีเปลี่ยนเป็น #FF9956 เพื่อคง contrast แต่บทบาท "ปุ่มหลัก" ไม่เปลี่ยน — ชื่อจึงยังใช้ได้

ผิด — ตั้งชื่อตามสี

ชื่อโกหกทันทีพอ theme เปลี่ยนสี ปุ่มไม่ส้มแล้วแต่ยังชื่อ OrangeButton — ทุกคนที่อ่านโค้ดต่อจะสับสน

กฎเดียวกันกับ CSS class: btn-primary ถูก / btn-orange ผิด

Consistency ข้าม Framework

เว็บไซต์/แอปของ B.Grimm ถูกสร้างด้วยหลาย framework (Tailwind, MUI, Vanilla CSS/HTML) ตามแต่ละโปรเจกต์ — design system ต้องหน้าตาเหมือนกันไม่ว่าจะ implement ด้วยอะไร เพราะทุก framework ดึงค่าจาก token ชุดเดียวกัน (tokens/bgrimm.tokens.json)

Framework	รายละเอียดการ implement
Figma	Figma Variables Setup
Tailwind	Tailwind Config
MUI	MUI Theme
Vanilla CSS/HTML	CSS Variables Guide

ปุ่มเดียวกัน 3 framework · เอาไม้บรรทัดทาบได้เลย

Tailwind

class="bg-primary text-white rounded-md px-4 py-2 font-bold"

MUI

<Button variant="contained" color="primary" />

Vanilla CSS

.btn-primary { background: var(--bgrimm-orange); }

ทั้งสามช่องได้ค่าจาก bgrimm.tokens.json ชุดเดียวกัน — สี #FF6727, radius 8px, padding 8/16px, ตัวหนา 700 เท่ากันหมด

อาการ token หลุด sync · ปุ่มเดียวกันแต่คนละหน้าตา

Driftสองปุ่มขวาไม่ได้ผิดที่ตัว component — ผิดที่มีคน hardcode ค่าแทนการอ่าน token

เจออาการนี้เมื่อไหร่ ให้ไล่กลับไปแก้ที่ bgrimm.tokens.json แล้ว re-sync ทุก framework — ห้าม patch ทีละที่

หากพบว่าหน้าตา component ต่างกันระหว่าง framework โดยไม่ตั้งใจ — แปลว่า token ไม่ sync กัน ให้แก้ที่ต้นทาง (bgrimm.tokens.json) ไม่ใช่ patch เฉพาะจุด