Design System Là Gì? Cách xây dựng Design System

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.

Nội dung bài viết

Design system là gì?

Design system là tập hợp hoàn chỉnh gồm:

1. Design Tokens (Các biến số quy ước)

Đảm bảo tính nhất quán từ gốc

Color (Màu sắc)
Typography (Kiểu chữ)
Spacing (Khoảng cách): Margin, Padding (dựa trên bội số của 4 hoặc 8)
Shadows & Elevation: đổ bóng tạo chiều sâu
Icons: các kí tự biểu tượng

2. UI Component Library (Thư viện thành phần)

Tiết kiệm thời gian xây dựng UI

Atoms (Nguyên tử): các thành phần cơ bản nhất như Button, Input, Checkbox, Radio
Molecules (Phân tử): sự kết hợp các nguyên tử để tạo ra cụm chức năng, ví dụ: ô tìm kiếm (input+ button)

3. Patterns & Templates (Mẫu hình và Bố cục)

Patterns là cách kết hợp nhiều component để giải quyết một bài toán UX cụ thể.
Chuẩn hoá trải nghiệm và cấu trúc giao diện người dùng.

Ví dụ:

Form đăng nhập
Hero section
Pricing section
Product listing
Checkout flow

Templates là các bố cục hoàn chỉnh của một trang hoặc một nhóm trang.

Ví dụ:

Landing page
Blog article page
Ecommerce product page
Admin dashboard

4. Content Guidelines (Ngôn ngữ và Nội dung)

Đồng nhất cách giao tiếp và trải nghiệm nội dung

Tone of Voice: Chuyên nghiệp, Hiện đại, Thân thiện, Tối giản, Công nghệ

UI Content Rules: Button text, Placeholder, Form validation message, Empty state, Error message, Success message, Notification

Writing Style: cách viết tiêu đề, viết hoa, dấu câu, độ dài nội dung

5. Documentation & Governance (Tài liệu và Quản trị)

Giữ cho hệ thống luôn đúng hướng

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.

DESIGN.md — Xu hướng Design System cho AI Coding

DESIGN.md là gì?

Google Stitch giới thiệu DESIGN.md như một định dạng Markdown giúp AI hiểu toàn bộ design system của project.

Khác với Figma:

AI đọc markdown rất tốt
dễ version control
dễ maintain
hoạt động với Cursor, Claude, Copilot…

Vì sao DESIGN.md quan trọng?

Đây là mindset mới.

Trước đây
Designer → Figma → Developer → Code

Bây giờ
Designer/System → DESIGN.md → AI → Code

AI không còn “đoán” UI nữa

Cấu trúc chuẩn của file DESIGN.md

---
name: Cocosoft Design System

colors:
  primary: "#2563EB"
  surface: "#FFFFFF"
  text-primary: "#111827"

typography:
  body:
    fontFamily: "Be Vietnam Pro"
    fontSize: 16px

radius:
  md: 12px
---

# Design Principles

Minimal
Modern
Clean

# Components

## Button

- Primary button:
  - blue background
  - white text
  - radius 12px

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

Nguồn tham khảo:
https://stitch.withgoogle.com/docs/design-md/overview/