CSSDesign token là giá trị thiết kế được đặt tên, lưu ở dạng không phụ thuộc nền tảng (thường JSON) rồi sinh ra biến cho từng nền tảng.
json
{
"color": { "accent": { "value": "#2563eb" } },
"space": { "md": { "value": "16px" } },
"radius": { "lg": { "value": "14px" } }
}css
/* sinh ra cho web */
:root { --color-accent: #2563eb; --space-md: 16px; --radius-lg: 14px; }Ba tầng token — đây mới là phần phân biệt người đã làm design system thật:
| Tầng | Ví dụ | Ý nghĩa |
|---|---|---|
| Primitive | blue-600: #2563eb | giá trị thô, không mang ngữ nghĩa |
| Semantic | color-accent: {blue-600} | vai trò trong hệ thống |
| Component | button-bg: {color-accent} | dùng tại một component cụ thể |
Nhờ vậy đổi màu thương hiệu chỉ cần sửa một token primitive, mọi thứ phía trên tự cập nhật — và web/iOS/Android nhận cùng một thay đổi.
Công cụ: Style Dictionary (Amazon), Tokens Studio cho Figma, W3C Design Tokens Format đang chuẩn hoá.
Lưu ý: lỗi hay gặp là đặt tên token theo hình thức (color-blue, space-16) thay vì theo vai trò (color-accent, space-md). Khi thương hiệu đổi sang xanh lá, token tên color-blue chứa giá trị xanh lá là điểm bắt đầu của mọi nhầm lẫn về sau.