Color Tokens

ตารางนี้ดึงค่าจาก tokens/bgrimm.tokens.json ตรงๆ — ห้ามพิมพ์ hex ซ้ำมือที่อื่น ถ้าค่าไม่ตรงกับตารางนี้ แปลว่าไฟล์ token อัปเดตแล้วแต่หน้านี้ยังไม่ sync ให้แจ้งแก้

Global → Alias Mapping

การ์ดแต่ละใบทาสีจริงจากค่า token ตัวเลขมุมขวาบนของแถบสีคือ contrast ratio บนพื้นขาว #FFFFFF และตัวอักษรบนแถบสีคือสีที่ ผ่าน AA เมื่อวางบนสีนั้นจริง

ตัวอักษร Aa2.91:1

Primary

color.primary → orange.500

#FF6727

พื้น/ไอคอนเท่านั้น

สีหลักของแบรนด์ ใช้เป็นพื้นปุ่ม เส้นเน้น และไอคอนตกแต่ง — ไม่ผ่านเกณฑ์ตัวอักษรบนพื้นขาวทุกขนาด

RGB 255 / 103 / 39 · บนเข้ม #202124 · 5.54:1

ตัวอักษร Aa5.47:1

Primary Hover

color.primary-hover → orange.700

#C43400

AA ตัวอักษรปกติ

สถานะ hover ของปุ่ม และเป็นส้มตัวเดียวที่ใช้เป็นสีตัวอักษรบนพื้นขาวได้

RGB 196 / 52 / 0 · ตัวอักษรขาวบนสีนี้ · 5.47:1

ตัวอักษร Aa2.11:1

Primary Light

color.primary-light → orange.400

#FF9956

ห้ามใช้เป็นตัวอักษร

พื้นหลังอ่อน สถานะ hover แบบนุ่ม และเส้นขอบเท่านั้น

RGB 255 / 153 / 86 · บนเข้ม #202124 · 7.62:1

ตัวอักษร Aa5.74:1

Text

color.text → grey.600

#63666F

AA ตัวอักษรปกติ

สี body text ค่า default ของทั้งระบบ

RGB 99 / 102 / 111 · ยังไม่ถึง AAA (ต้อง 7:1)

ตัวอักษร Aa16.10:1

Text Strong

color.text-strong → grey.900

#202124

AAA

หัวข้อและข้อความที่ต้องเน้น ใช้แทนสีดำสนิท #000000 ตามกฎแบรนด์

RGB 32 / 33 / 36 · ค่าสูงสุดในชุด

ตัวอักษร Aa2.80:1

Muted

color.muted → grey.400

#989AA5

decorative เท่านั้น

ข้อความ disabled, เส้นแบ่ง และองค์ประกอบตกแต่ง — ห้ามใช้กับข้อความที่ต้องอ่าน

RGB 152 / 154 / 165 · บนเข้ม #202124 · 5.75:1

ตัวอักษร Aaพื้นหลัง

Background

color.bg → base.white

#FFFFFF

พื้นหลังหลัก

พื้นหลังหลักของทุกหน้าจอ และเป็นฐานที่ใช้คำนวณ contrast ทั้งหมดในเอกสารนี้

RGB 255 / 255 / 255

ตัวอักษร Aaพื้นหลัง

Background Soft

color.bg-soft → base.offwhite

#FCFEFF

พื้นหลังรอง

พื้นหลังรองสำหรับการ์ดและ section ที่ต้องแยกชั้นจากพื้นขาว

RGB 252 / 254 / 255 · ต่างจากขาวแค่ 1.01:1

ตัวอักษร Aa1.39:1

Border

color.border → grey.200

#D9DAE4

ไม่ใช้สื่อความหมาย

เส้นขอบและเส้นแบ่ง — ไม่ผ่าน 3:1 จึงห้ามใช้เป็นขอบเดียวที่สื่อสถานะ (WCAG 1.4.11)

RGB 217 / 218 / 228 · บนเข้ม #202124 · 11.58:1

รายละเอียดวิธีคำนวณและกฎการใช้เต็มที่ Accessibility & Contrast

Component Tokens ที่ผูกกับสี

Token	ค่า (resolved)
button.bg-primary	#FF6727
button.bg-primary-hover	#C43400
button.text-on-primary	#FFFFFF
input.border-focus	#FF6727
input.border-error	#C43400

Component token ด้านบนเรนเดอร์ออกมาหน้าตาแบบนี้ — ทุกชิ้นทาสีจาก resolved value ตรงๆ ไม่มีการแต่งเพิ่ม:

Component token · ค่าที่ resolve แล้ว

ดูรายละเอียดโครงการ2.91:1

ปุ่มหลัก · ค่า default ปัจจุบัน

button.bg-primary + button.text-on-primary

#FFFFFF บน #FF6727

ไม่ผ่าน AA

คู่นี้ยังเป็นค่าใน token file แต่ไม่ผ่านเกณฑ์ — ดูทางเลือกที่ผ่านสองแบบด้านล่าง

ดูรายละเอียดโครงการ5.54:1

ทางเลือกที่ 1 · เปลี่ยนสีตัวอักษร

button.bg-primary + color.text-strong

#202124 บน #FF6727

AA ทุกขนาด

คงพื้นส้มแบรนด์ไว้ครบ เปลี่ยนแค่สีตัวอักษร

ดูรายละเอียดโครงการ5.47:1

ทางเลือกที่ 2 · เปลี่ยนสีพื้น

button.bg-primary-hover + button.text-on-primary

#FFFFFF บน #C43400

AA ทุกขนาด

คงตัวอักษรขาวไว้ เปลี่ยนพื้นเป็น Dark Orange

input.border-focus #FF6727 · 2.91:1input.border-error #C43400 · 5.47:1border ต้องได้ 3:1 · WCAG 1.4.11

เส้นขอบช่องกรอกใช้เกณฑ์ 3:1 ไม่ใช่ 4.5:1 — input.border-error (#C43400) ผ่านสบายที่ 5.47:1 แต่ input.border-focus (#FF6727) ได้แค่ 2.91:1 บนพื้นขาว ซึ่งยังไม่ถึง 3:1 จึงห้ามใช้เส้นขอบสีส้มเป็นสัญญาณเดียวที่บอกว่าช่องไหนกำลัง focus ต้องมี outline หนาขึ้นหรือ label กำกับร่วมด้วย — เช่นเดียวกับสถานะ error ที่ต้องมีไอคอนหรือข้อความ ไม่ใช่แค่เปลี่ยนสีขอบ

Component token ไม่ได้ตายตัว

Component token คือค่าเริ่มต้น — ถ้า component ไหนต้องการสีต่างจากนี้ (เช่นปุ่มในบริบทพิเศษ) ให้เพิ่ม component token ใหม่ใน bgrimm.tokens.json แทนการ hardcode สีในโค้ด เพื่อให้ยังตรวจสอบย้อนกลับได้ว่าใช้สีจากที่ไหน