Khi bạn đổi màu chủ đạo của một website, bạn không muốn lục tìm mã màu #FF6986 ở hàng trăm dòng CSS. Bạn muốn sửa một chỗ duy nhất rồi cả site tự đổi theo. Đó chính là việc mà design token sinh ra để làm.
Token lưu cái gì
Một token chỉ giữ đúng một quyết định thiết kế ở dạng nhỏ nhất, đặt tên rõ ràng để con người lẫn công cụ đều đọc được. Những giá trị thường được token hoá gồm:
- Màu — màu nền, màu chữ, màu viền, màu trạng thái (lỗi, thành công).
- Typography (kiểu chữ) — họ phông, cỡ chữ, độ đậm, chiều cao dòng.
- Khoảng cách (spacing) — lề trong, lề ngoài, khoảng hở giữa các phần tử.
- Bo góc (border radius), độ dày viền, đổ bóng (shadow).
- Cả những thứ tinh hơn như thời lượng chuyển động (animation), độ trong suốt.
Mấu chốt là token tách giá trị ra khỏi nơi sử dụng. Nút bấm không ghi cứng #FF6986 mà trỏ tới token; đổi token là đổi nút. Đây là khác biệt giữa “ghi số trực tiếp vào code” và “khai báo một biến rồi dùng lại”.
Ba tầng token: nguyên thuỷ, ngữ nghĩa, component
Một hệ token được dùng tốt hiếm khi chỉ có một lớp. Đa số design system trưởng thành chia làm ba tầng, mỗi tầng trỏ vào tầng dưới nó (alias — bí danh, một token tham chiếu một token khác).
| Tầng | Vai trò | Ví dụ |
|---|---|---|
| Nguyên thuỷ (primitive / global) | Lưu giá trị thô, không ám chỉ công dụng | color.coral.500 = #FF6986 |
| Ngữ nghĩa (semantic) | Gán ý nghĩa cho giá trị, trỏ về token nguyên thuỷ | color.action.primary = {color.coral.500} |
| Component | Dành riêng một thành phần, trỏ về tầng ngữ nghĩa | button.background = {color.action.primary} |
Cách phân tầng này không phải lý thuyết suông. Token nguyên thuỷ là bảng màu/kích thước gốc, ít khi dùng thẳng. Token ngữ nghĩa mới là thứ designer và lập trình viên gọi hằng ngày, vì nó nói vì sao chứ không nói cái gì. Khi cần đổi màu hành động chính từ coral sang một màu khác, bạn chỉ sửa color.action.primary trỏ sang token nguyên thuỷ mới — mọi nút, mọi link primary đổi theo, không sót chỗ nào.
Token nguyên thuỷ và token ngữ nghĩa khác nhau ra sao
Token nguyên thuỷ trả lời “giá trị là gì”: color.coral.500 là một sắc hồng cụ thể. Token ngữ nghĩa trả lời “dùng để làm gì”: color.text.error là màu chữ báo lỗi. Tên ngữ nghĩa ổn định kể cả khi giá trị thay đổi — hôm nay lỗi màu đỏ, mai đổi sang cam đậm hơn, cái tên color.text.error vẫn đúng. Đây là lý do nên đặt tên theo mục đích ở tầng ngữ nghĩa, đừng đặt theo màu.
Cách đặt tên token
Tên token tốt đọc như một câu mô tả đi từ tổng quát đến cụ thể, các đoạn ngăn nhau bằng dấu chấm hoặc gạch ngang. Một cấu trúc phổ biến:
[nhóm].[thuộc tính].[vai trò].[biến thể].[trạng thái]
color.background.surface
color.text.error
space.inset.md
button.background.primary.hoverVài nguyên tắc đáng nhớ:
- Tầng ngữ nghĩa đặt tên theo ý định, không theo giá trị. Dùng
color.text.error, đừng dùngcolor.text.red— khi đổi đỏ sang cam, tên kia thành sai. - Nhất quán thứ tự các đoạn. Đã chọn
thuộc-tính.vai-tròthì giữ nguyên ở mọi token, đừng lúc đảo lúc xuôi. - Component chỉ trỏ tới tầng ngữ nghĩa, đừng cho nhảy thẳng vào token nguyên thuỷ — nếu không, lợi thế “đổi một chỗ” sẽ vỡ.
- Dùng thang đo có hệ thống cho khoảng cách và cỡ chữ (vd
xs, sm, md, lg, xlhoặc số), tránh giá trị ngẫu hứng.
Một chuẩn chung đã xuất hiện
Trước đây mỗi công cụ định nghĩa token một kiểu, gây mệt khi chuyển từ Figma sang code. Tháng 10/2025, đặc tả Design Tokens của nhóm cộng đồng W3C (DTCG) đã đạt phiên bản ổn định đầu tiên, mô tả một định dạng JSON chung cho token: một file token có thể sinh ra code cho web, iOS, Android, Flutter qua công cụ dịch. Token tham chiếu nhau bằng cú pháp ngoặc nhọn {nhóm.token}, đổi một giá trị gốc thì mọi alias trỏ tới nó cập nhật theo. Bạn không bắt buộc theo chuẩn này, nhưng biết nó tồn tại giúp chọn công cụ ít rủi ro khoá cứng về sau.
Design token nằm ở đâu trong bức tranh lớn
Token là đơn vị nhỏ nhất của một hệ thống. Trên nó là component library (thư viện component — tập hợp các thành phần giao diện tái dùng như nút, ô nhập, thẻ), và bao trùm tất cả là design system. Nói cách khác: token là viên gạch giá trị, component là bức tường lắp từ những viên gạch ấy. Một thư viện component dùng đúng token sẽ tự đồng bộ khi bạn chỉnh token — đó là lý do nhiều đội đầu tư vào tầng token trước.
Để hiểu các tầng còn lại, xem design system là gì cho bức tranh tổng quan, và component library là gì cho tầng ngay phía trên token.
Khi nào nên dùng token
Một website nhỏ vài trang chưa cần dựng đủ ba tầng token. Nhưng nếu giao diện có nhiều thành phần lặp lại, cần hỗ trợ chế độ tối (dark mode), hoặc nhiều người cùng dựng, token giúp giữ nhất quán và đổi đồng loạt mà không sai sót. web22.dev tự vận hành một hệ token riêng (màu coral, phông Inter Tight, khoảng cách theo thang) ngay trong theme — kinh nghiệm thực tế là chi phí lập token được hoàn lại ngay lần redesign đầu tiên, khi đổi một biến thay vì sửa tay hàng trăm chỗ.
Câu hỏi thường gặp
Design token có phải là biến CSS không?
Biến CSS (--color-primary) là một cách triển khai token trên web. Bản thân token là quyết định thiết kế nằm ở tầng cao hơn, có thể xuất ra biến CSS, ra Swift cho iOS, ra XML cho Android — không bó hẹp trong CSS.
Có cần đủ ba tầng token ngay từ đầu không?
Không. Hệ nhỏ có thể chỉ cần tầng nguyên thuỷ và ngữ nghĩa. Tầng component chỉ thêm khi một thành phần cần tuỳ biến riêng mà tầng ngữ nghĩa chưa diễn tả được.
Nên đặt tên token bằng tiếng Anh hay tiếng Việt?
Phần lớn đội dùng tiếng Anh để khớp với công cụ và tài liệu quốc tế, đồng thời tránh dấu trong tên biến. Quan trọng hơn ngôn ngữ là sự nhất quán trong cách đặt.
Nếu bạn muốn xây một hệ token chuẩn cùng giao diện thật ăn khớp với code, tham khảo dịch vụ thiết kế UI/UX của Web22.