[7] Luật trong Border Foundation

🧱 Border Foundation trong Design System

🧠 Mục tiêu

Border định nghĩa hệ thống đường viền trong UI, bao gồm độ dày, màu sắc và cách sử dụng theo từng trạng thái.

Một hệ thống border tốt không phải là dùng tùy hứng hay mỗi chỗ một kiểu, mà phải có quy tắc rõ ràng, nhất quán và hỗ trợ cấu trúc giao diện.

🧱 1. Primitive (Raw Border)

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

Các giá trị đề xuất gồm: 1px, 2px, 4px.

Nguyên tắc:

• Không dùng giá trị lẻ như 3px, 5px
• Không dùng trực tiếp trong UI
• Chỉ dùng để build system

📐 2. Border Scale

Scale giúp chuẩn hóa độ dày border.

Các mức đề xuất:

• border-thin = 1px
• border-medium = 2px
• border-thick = 4px

Nguyên tắc:

• Dùng ít nhưng đủ
• Không dùng giá trị ngoài scale

🎨 3. Semantic Border

Semantic là vai trò của border trong UI.

Các loại phổ biến:

• border-default: trạng thái bình thường
• border-muted: phân tách nhẹ (divider)
• border-strong: nhấn mạnh
• border-focus: trạng thái focus
• border-error: trạng thái lỗi

Ví dụ:

• Input bình thường dùng border-default
• Divider dùng border-muted
• Input khi focus dùng border-focus
• Form lỗi dùng border-error

Nguyên tắc:

• Không dùng px trực tiếp
• Không chọn màu thủ công
• Chỉ dùng semantic

📏 4. Border Rules

Nguyên tắc cốt lõi:

• Không dùng border tùy ý
• Không lạm dụng border

Câu chốt:

Không vẽ border — chỉ dùng đúng vai trò của border

Tính nhất quán:

• Cùng loại component phải dùng cùng border
• Không mỗi màn một kiểu

Hierarchy:

• Border nhẹ để phân tách
• Border mạnh để nhấn mạnh

Không phải lúc nào cũng cần border, có thể dùng spacing thay thế.

Kết hợp với màu:

• Border luôn đi cùng color system
• Không chọn màu ngẫu nhiên

Theo context:

• Card: border nhẹ hoặc không cần
• Input: cần rõ ràng các trạng thái
• Button: chỉ dùng border khi cần (outline)
• Divider: dùng border-muted

Sai lầm cần tránh:

• dùng border quá nhiều
• mỗi chỗ một kiểu
• màu không theo system
• dùng border thay cho spacing

📱 5. Lưu ý về 1px

1px thường khó nhìn thấy nhưng rất quan trọng.

Dùng trong:

• divider
• input mặc định
• card nhẹ

Không dùng trong:

• focus
• error
• highlight

Câu chốt:

1px không để nhìn rõ — mà để tạo cảm giác tinh tế

🧭 6. Guidelines

Nguyên tắc:

• ưu tiên rõ ràng
• ít nhưng nhất quán
• dùng đúng mục đích

Khuyến nghị:

• chỉ cần 2–3 mức border
• kết hợp với color và spacing
• hạn chế lạm dụng

🔥 Kết luận

Border không phải để trang trí, mà để phân tách, nhấn mạnh và hỗ trợ cấu trúc UI.

Border Foundation: https://www.figma.com/design/QwbgeUIRaVa3ETy8O3UOxT/Design-system-2026?node-id=82-228&p=f&t=ATGkePzBGXHPD1Cd-0