Spacing, Radius & Elevation

ตาม space, radius, elevation block ใน tokens/bgrimm.tokens.json

Spacing Scale

ใช้ 4px base grid — ทุกระยะห่าง (padding, margin, gap) ต้องเป็นเลขในสเกลนี้ ห้ามใช้ค่าอิสระ (เช่น 13px, 22px) เพราะทำให้จังหวะภาพรวมของเว็บไม่สม่ำเสมอ

Token	ค่า	ใช้ทั่วไปกับ
space.0	0px	รีเซ็ต
space.1	4px	ระยะห่างจิ๋ว เช่น icon กับ label ที่ติดกัน
space.2	8px	Padding แนวตั้งของปุ่ม, gap ระหว่าง element ย่อย
space.3	12px	Padding ของ input field
space.4	16px	Padding มาตรฐานของ card/section ย่อย, margin ข้างจอมือถือ
space.6	24px	Padding ของ card, gap ระหว่าง column
space.8	32px	Margin ข้างจอ desktop, gap ระหว่าง section ย่อย
space.12	48px	Gap ระหว่าง section ใหญ่
space.16	64px	ระยะห่างระหว่าง section หลักของหน้า
space.24	96px	ระยะห่างรอบ hero section

Spacing Scale Visualizer · เทียบขนาดจริงแบบสัมพัทธ์

space.1

4px

space.2

8px

space.3

12px

space.4

16px

space.6

24px

space.8

32px

space.12

48px

space.16

64px

space.24

96px

สเกลแบบ 4px base grid — ความกว้างแท่งสีส้มเป็นสัดส่วนเทียบกับ space.24 (100%)

Border Radius

Token	ค่า	ใช้กับ
radius.sm	4px	Input field, tag, chip
radius.md	8px	ปุ่ม
radius.lg	16px	Card, modal
radius.full	999px	Avatar, pill badge, toggle

Radius Comparison · 4 ระดับจากเล็กไปใหญ่

sm

radius.sm4px

md

radius.md8px

lg

radius.lg16px

∞

radius.full999px

ทุกกล่องใช้ border และพื้นหลังชุดเดียวกัน — เปลี่ยนแค่ border-radius

Elevation (Shadow)

ใช้เงาเบาที่สุดเท่าที่ยังสื่อความสูงต่ำได้ — สอดคล้องกับ vibe minimal/boardroom-ready ของแบรนด์ ห้ามใช้เงาเข้ม/ฟุ้งเกินระดับ 3

Token	ค่า	ใช้กับ
elevation.0	none	Element แนบพื้น (flat), การ์ดใน list ยาว
elevation.1	0 1px 2px rgba(32,33,36,0.06)	Card ปกติ
elevation.2	0 4px 8px rgba(32,33,36,0.08)	Card ที่ hover/ลอยขึ้น, dropdown
elevation.3	0 8px 24px rgba(32,33,36,0.12)	Modal, popover

Elevation Cards · เทียบเงา 4 ระดับจากแนบพื้นถึงลอยสูงสุด

Flat

elevation.0noneการ์ดใน list ยาว

Level 1

elevation.10 1px 2pxCard ปกติ

Level 2

elevation.20 4px 8pxCard hover, dropdown

Level 3

elevation.30 8px 24pxModal, popover

ทุกเงาใช้ #202124 เป็นสีฐาน ไม่ใช้ #000000 — ห้ามใช้เงาหนักเกิน Level 3

สีเงาใช้ grey.900 (#202124) เป็นฐานเสมอ ไม่ใช้สีดำสนิท (#000000) — สอดคล้องกับกฎห้ามใช้สีดำใน Color Palette