[6] Luật trong Spacing Foundation

📏 Spacing Foundation trong Design System

🧠 Mục tiêu

Spacing Foundation định nghĩa toàn bộ hệ thống khoảng cách trong UI, từ khoảng cách nhỏ nhất đến layout tổng thể.

Một hệ thống spacing tốt không phải là:

• nhiều khoảng cách
• đặt theo cảm tính

Mà là:

• có quy tắc rõ ràng
• có hệ thống scale
• dùng nhất quán toàn bộ UI

🧱 1. Primitive (Raw Spacing)

Primitive là các giá trị khoảng cách cơ bản, chưa có ý nghĩa sử dụng.

🎯 Setup đề xuất

👉 Dùng base unit: 4px

Spacing scale:

• 4px
• 8px
• 12px
• 16px
• 20px
• 24px
• 32px
• 40px
• 48px
• 64px

Nguyên tắc

• Không dùng giá trị lẻ (5px, 7px, 13px ❌)
• Không dùng trực tiếp trong UI
• Chỉ dùng để build system

📐 2. Spacing Scale

Scale là hệ thống khoảng cách được chuẩn hóa

🎯 Scale đề xuất

• xs = 4px
• sm = 8px
• md = 12px
• lg = 16px
• xl = 20px
• 2xl = 24px
• 3xl = 32px
• 4xl = 40px
• 5xl = 48px
• 6xl = 64px

Nguyên tắc

• Scale phải đều và có logic
• Không dùng giá trị ngoài hệ thống
• Dùng ít nhưng đủ

🧩 3. Semantic Spacing

Semantic = gán vai trò cho khoảng cách

🎯 Các nhóm chính

• spacing-inline (trái/phải)
• spacing-stack (trên/dưới)
• spacing-inset (padding trong component)
• spacing-gap (khoảng cách giữa item)

🎯 Ví dụ

Inset (padding trong component)

• card-padding → lg (16px)
• button-padding → sm/md

Stack (khoảng cách dọc)

• spacing giữa các section → 32px
• spacing giữa title và content → 16px

Inline (ngang)

• spacing giữa icon và text → 8px

Nguyên tắc

• Không dùng px trực tiếp
• Chỉ dùng semantic
• Mỗi role = 1 khoảng cách rõ ràng

📏 4. Spacing Rules

🧠 4.1 Nguyên tắc cốt lõi

• Không đặt spacing theo cảm tính
• Không dùng giá trị random
• Chỉ dùng scale + semantic

👉 Câu chốt:

🔥 Không chỉnh khoảng cách — chỉ dùng đúng role của khoảng cách

🎯 4.2 Consistency

• Cùng loại component → cùng spacing
• Không chỉnh riêng từng màn

🎯 4.3 Rhythm (nhịp điệu)

• UI phải có nhịp đều
• Khoảng cách phải lặp lại có quy luật

👉 Ví dụ:

• 8 → 16 → 24 → 32 (rất dễ nhìn)
• Tránh: 10 → 18 → 27 (rối)

🎯 4.4 Hierarchy bằng spacing

Spacing giúp tạo cấp độ:

• Section → khoảng cách lớn
• Block → trung bình
• Element → nhỏ

👉 Không phải lúc nào cũng dùng border hoặc màu

🎯 4.5 Density (độ thoáng)

• Mobile → spacing nhỏ hơn
• Desktop → spacing lớn hơn

👉 Nhưng vẫn giữ cùng scale

🎯 4.6 Theo context

Card

• padding: 16px
• gap item: 8px

Form

• label → input: 4–8px
• input → input: 16px

Button

• padding đều, không quá chật

🔧 4.7 Khi spacing có vấn đề

Nếu UI:

• chật
• rối
• khó nhìn

👉 Không fix từng màn

👉 Fix:

• scale
• semantic

💀 4.8 Sai lầm cần tránh

• dùng px random
• spacing không đều
• quá nhiều mức spacing
• mỗi màn 1 kiểu
• không có nhịp

🧭 5. Guidelines

🎯 Nguyên tắc

• ưu tiên clarity (rõ ràng)
• spacing phải tạo structure
• ít nhưng nhất quán

📌 Khuyến nghị

• dùng base 4px
• 6–10 mức spacing là đủ
• dùng lặp lại
• tránh số lẻ

🔥 Kết luận

Spacing Foundation không chỉ là khoảng cách, mà là hệ thống giúp:

• UI dễ nhìn hơn
• layout rõ ràng hơn
• scale dễ hơn

💥 Câu chốt

👉 Không phải bạn đặt khoảng cách — mà là bạn dùng đúng vai trò của khoảng cách trong hệ thống

Spacing Foundation: https://www.figma.com/design/QwbgeUIRaVa3ETy8O3UOxT/Design-system-2026?node-id=69-459&t=EGY7eT9whZi58sYq-0