Trong quá trình phát triển website, nhiều lập trình viên và designer thường mắc một sai lầm lớn:
Bắt đầu thiết kế ngay mà chưa có tiêu chuẩn giao diện.
Kết quả là:
– Font không đồng nhất
– Spacing mỗi nơi một kiểu
– Component thiếu consistency (tính nhất quán), ví dụ: Popup thông báo mỗi trang mỗi kiểu khác nhau
– UI ngày càng loạn, khó scale khi dự án lớn dần
Các sản phẩm SaaS hàng đầu thế giới như: Linear, Notion, Vercel, Stripe, Arc, Raycast đều xây dựng Design System cực kỳ chặt chẽ trước khi thiết kế bất kỳ giao diện nào. Đó chính là lý do họ có UI đẹp, đồng nhất và dễ mở rộng đến vậy.
Trong bài viết này, chúng ta sẽ đi qua toàn bộ các tiêu chuẩn cần chuẩn bị trước khi thiết kế một website hoặc nền tảng SaaS hiện đại.
Design system là gì?
Design system là tập hợp hoàn chỉnh gồm:
– Quy tắc giao diện (guidelines)
– Component tái sử dụng
– Hệ thống màu sắc, typography, spacing
– Layout & Grid
– Animation & Motion
– UX/UI standards
– Tài liệu (documentation)
Có thể hiểu đơn giản: Design System là “framework giao diện” của sản phẩm. Nó giống như một bộ quy tắc xây dựng giúp mọi thứ luôn đồng nhất.
Vì Sao Design System Quan Trọng?
- Tạo sự đồng nhất cho UI/UX
Không có Design System, mỗi trang sẽ mang một phong cách riêng, button không giống nhau, khoảng cách lệch lạc → sản phẩm trông thiếu chuyên nghiệp. - Dễ scale khi dự án lớn
Khi có nhiều module, nhiều sản phẩm con, Design System giúp duy trì consistency (tính nhất quán) - Tăng tốc độ phát triển đáng kể
Khi có spacing chuẩn, component chuẩn, layout chuẩn chỉ cần tái sử dụng thay vì thiết kế lại từ đầu.
Những tiêu chuẩn cần xây dựng trước khi thiết kế
Product Direction & Brand Foundation
Đây là bước đầu tiên và quan trọng nhất
– Sản phẩm thuộc loại gì? (AI SaaS, Dashboard, Marketplace…)
– Đối tượng user chính là ai? (Doanh nghiệp, cá nhân…)
– Brand personality? (Modern, Friendly, Professional…)
– Mục tiêu chính? (Conversion, Retention…)
– Phong cách tổng thể? (Dark SaaS, Light minimal, Glassmorphism…)
Color System
Các token màu cơ bản cần có:
Primary (màu chủ đạo)
Secondary
Background (Base, Surface)
Card
Border
Text (Primary, Secondary, Muted, Disabled)
Success, Warning, Danger, Info
Accent (nếu cần)
Nguyên tắc quan trọng: Tránh dùng pure black (#000) và pure white (#FFF). Các sản phẩm hiện đại dùng dark gray và soft white để giảm mỏi mắt và tăng chiều sâu.
Typography System
Typography ảnh hưởng rất lớn đến cảm giác chuyên nghiệp và readability
Font Family phổ biến:
– Be Vietnam Pro (dành cho dự án Việt Nam)
– Inter (rất được ưa chuộng, dành cho mảng công nghệ)
Tham khảo: Các font chữ phổ biến nhất
Font Scale:
Display / Hero: 56px – 72px
H1: 48px – 56px
H2: 36px – 40px
H3: 28px – 32px
Body: 16px – 18px
Small / Caption: 14px
Font Weight: Thường chỉ cần 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold).
Spacing System (Rất Quan Trọng)
Đây là yếu tố quyết định UI của bạn có “pro” hay không.
Nên dùng scale cố định (bội số của 4 hoặc 8):
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 120
Quy chuẩn ví dụ:
- Card padding: 24px hoặc 32px
- Section padding: 80–120px
- Button padding: 12px × 24px
- Grid gap: 24px
Layout System
Container max-width: 1240px hoặc 1280px
Grid System: 12-column grid
Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
Border Radius System
UI hiện đại thường dùng bo góc lớn hơn
sm: 8px
md: 12px
lg: 16px (dùng nhiều nhất cho card)
xl: 24px
2xl: 32px (cho modal lớn)
Shadow System
Shadow giúp UI có chiều sâu.
Card shadow
Hover shadow
Modal / Dropdown shadow
Glow / Accent shadow (cho primary elements)
Hero Banner Standards
Hero Banner là phần quan trọng nhất của homepage
Cấu trúc hiện đại:
- Bên trái: Headline mạnh, subheadline, CTA(s)
- Bên phải: Image, Mockup dashboard, preview, floating elements
- Tất cả phần tử được căn giữa theo chiều dọc
Typography Hero:
- Headline: 56–72px (font weight 600–700)
- Subheadline: 18–20px
Hero Height: 100vh – Banner chiếm trọn màn hình đầu tiên, bao phủ toàn bộ kích thước màn hình, mang lại hiệu ứng thị giác mạnh mẽ
Component Standards (Atomic Design)
- Button: Primary (solid + gradient), Secondary, Outline, Link
- Card: Padding, radius, hover effect (translateY + shadow)
- Input / Textarea: Height 48–56px, radius 12–14px
- Table, Dropdown, Modal, Sidebar, Toast…
Mỗi component phải có states: Default, Hover, Active, Focus, Disabled.
Animation & Motion Standards
Motion giúp UI sống động hơn
- Hover: 150–200ms
- Modal open: 250ms
- Sidebar: 300ms
- Page transition: 400ms
Nguyên tắc: Nhẹ nhàng, có mục đích, không lạm dụng.
Icon System
Chọn một bộ icon nhất quán:
Lucide Icons (rất khuyến khích)
Heroicons
Iconify
Responsive Standards
Mobile: Stacked layout
Tablet: 2-column
Desktop: Full grid
UX & Accessibility Standards
Không quá 1–2 CTA chính trên một màn hình
Không quá nhiều màu nổi bật – gây rối mắt, mất tập trung
Sử dụng nhiều whitespace – hiện đại, dễ đọc
Contrast ratio đạt WCAG AA (tốt nhất là AAA)
Design Documentation
Nên có trang tài liệu bao gồm:
- Design Principles
- Color tokens
- Typography scale
- Spacing & Layout
- Component Library + Usage Guidelines
- Do & Don’t
- Accessibility
Kết Luận
Khi đã có Design System vững chắc, bạn sẽ có được:
– UI đồng nhất tuyệt đối
– Tốc độ phát triển nhanh hơn nhiều
– Dễ scale khi team lớn hoặc sản phẩm mở rộng
– Trải nghiệm người dùng premium
– Dễ dàng onboarding thành viên mới
