Hai khái niệm này hay bị dùng lẫn lộn, nên nhiều đội nghĩ mình “đã có design system” trong khi thật ra mới chỉ có một file quy chuẩn màu chữ. Sự nhầm này tốn tiền thật: bạn kỳ vọng dựng sản phẩm nhanh hơn nhưng lại không có gì để code tái dùng. Bài này tách bạch hai thứ và chỉ ra khi nào bạn thật sự cần cái nào.
Style guide là gì
Style guide (cẩm nang quy chuẩn — tài liệu mô tả cách dùng yếu tố thị giác) là một tập tài liệu nói cho mọi người biết thương hiệu trông và đọc lên như thế nào. Theo cách UXPin mô tả, đây là “rulebook” (sách luật) đảm bảo nhất quán trên mọi ấn phẩm.
Một style guide điển hình quy định:
- Bảng màu thương hiệu kèm mã màu chính xác
- Bộ chữ (typeface), cỡ và cách dùng tiêu đề so với thân bài
- Quy tắc dùng logo: vùng an toàn, kích thước tối thiểu, biến thể được phép
- Giọng văn (tone of voice) và quy ước viết
Điểm cốt lõi: style guide là tài liệu tĩnh. Nó nói “nút chính dùng màu này, bo góc bằng này” nhưng bản thân nó không chứa cái nút đó dưới dạng dùng được. Người thiết kế và lập trình đọc xong vẫn phải tự dựng lại từng lần. Nó mô tả, chứ không cung cấp.
Design system là gì và vì sao nó “sống”
Design system (hệ thống thiết kế — bộ tiêu chuẩn quản lý thiết kế ở quy mô lớn) rộng hơn nhiều. Nielsen Norman Group định nghĩa nó là tập tiêu chuẩn để quản lý thiết kế ở quy mô, giảm lặp lại và tạo một ngôn ngữ chung. Quan trọng là design system gồm cả phần dùng được thật:
- Design token (biến thiết kế — đơn vị nhỏ nhất lưu màu, cỡ chữ, khoảng cách) làm nguồn chân lý duy nhất cho giá trị thị giác. Xem thêm design token là gì.
- Component library (thư viện thành phần — tập component tái dùng) gồm nút, ô nhập, thẻ… tồn tại cả trong file thiết kế lẫn trong code. Xem component library là gì.
- Quy tắc dùng: khi nào dùng component nào, trạng thái ra sao, ghép với nhau thế nào.
- Style guide thị giác — vốn nằm gọn bên trong design system như một phần con.
Gọi nó “sống” vì nó thay đổi liên tục cùng sản phẩm: thêm component mới, sửa token, version hoá. Khi bạn đổi giá trị một token màu chính, mọi component dùng token đó cập nhật theo — chứ không phải đi sửa tay từng chỗ như khi chỉ có style guide. Đây là khác biệt vận hành lớn nhất.
Bảng so sánh nhanh
| Tiêu chí | Style guide | Design system |
|---|---|---|
| Bản chất | Tài liệu mô tả | Hệ thống có code dùng được |
| Trạng thái | Tĩnh, ít đổi | Sống, version hoá, đổi theo sản phẩm |
| Thành phần | Màu, chữ, logo, giọng văn | Token + component code + quy tắc + style guide bên trong |
| Có code không | Thường không | Có (component thật, dùng lại được) |
| Mục tiêu chính | Nhất quán thị giác thương hiệu | Dựng sản phẩm nhất quán ở quy mô |
| Người dùng | Marketing, thiết kế, đối tác | Thiết kế + lập trình cùng dùng |
| Quan hệ | Là một phần con của design system | Bao trùm style guide |
Khi nào cần style guide, khi nào cần design system
Cách phân vai đơn giản: bạn có bao nhiêu giao diện cần dựng và dựng nhiều lần không.
Đủ một style guide khi: bạn là thương hiệu nhỏ, làm chủ yếu ấn phẩm marketing (banner, bài đăng, brochure), website chỉ vài trang ít thay đổi, và đội ngũ một vài người. Lúc này một tài liệu màu – chữ – logo gọn gàng đã giải quyết bài toán nhất quán mà không tốn công bảo trì component.
Cần design system khi: bạn có sản phẩm số nhiều màn hình, nhiều người cùng dựng giao diện, lặp lại các thành phần giống nhau (nút, form, thẻ) khắp nơi, và muốn handoff (bàn giao — chuyển bản thiết kế sang code) khỏi tam sao thất bản. Càng nhiều giao diện và càng nhiều người, chi phí “dựng lại từ đầu mỗi lần” càng đắt — đó là điểm design system bắt đầu trả lại công sức.
Một lối đi thực tế: bắt đầu bằng style guide, rồi tiến hoá lên design system khi sản phẩm phình ra. Đừng nhảy thẳng vào dựng một design system đồ sộ khi mới có một landing page — đó là đầu tư sai thời điểm. Nếu bạn đang cân nhắc thời điểm, đọc thêm khi nào nên đầu tư design system.
Góc thực chiến từ việc dựng giao diện thật
Khi Web22 vừa thiết kế vừa lập trình một website, ranh giới này hiện rất rõ. Một style guide chỉ ghi “nút chính màu coral” thì bản code vẫn có thể lệch sắc độ, lệch khoảng đệm so với bản thiết kế. Còn khi nút đó được lưu thành component thật, gắn với token màu, thì bản dựng ra đúng như bản vẽ — không còn cảnh dev đoán giá trị. Đó là lý do với sản phẩm nhiều màn hình, phần đáng đầu tư không phải file mô tả đẹp, mà là hệ thống thiết kế có component dùng được.
Câu hỏi thường gặp
Style guide có phải là một phần của design system không?
Đúng. Style guide là tầng quy chuẩn thị giác nằm bên trong design system. Một design system gồm style guide cộng thêm token và component code dùng được.
Có design system rồi thì bỏ style guide được không?
Không bỏ, mà nó đã nằm sẵn bên trong dưới dạng phần quy chuẩn thị giác. Bạn vẫn cần phần đó để định nghĩa màu, chữ, logo làm gốc cho token.
Đội nhỏ có nên làm design system không?
Thường chưa cần. Nếu bạn ít màn hình và ít người, một style guide gọn là đủ. Khi sản phẩm và đội phình ra, hãy tiến hoá dần lên design system.