Kiến trúc mã thông báo thiết kế ngữ nghĩa: Mã thông báo toàn cầu, ngữ nghĩa và thành phần

Ba tầng

Material Design mô tả ba loại mã thông báo: tham chiếu, hệ thống và thành phần. Nhiều nhóm gọi chúng là toàn cầu, ngữ nghĩa và thành phần. Tên khác nhau nhưng ý tưởng thì giống nhau: tách biệt các giá trị thô khỏi các quyết định về cách chúng được sử dụng.

• Toàn cầu (tham khảo): mọi giá trị thô trong hệ thống, chẳng hạn như blue-600, space-4, font-size-16, spring-gentle.
• Ngữ nghĩa (hệ thống): giá trị dùng để làm gì, chẳng hạn như color.text.primary, color.action.primary, motion.enter.
• Thành phần: cách một thành phần sử dụng hệ thống, chẳng hạn như nút.background hoặc hộp thoại.motion.open.

Tại sao mã thông báo ngữ nghĩa lại quan trọng

Nếu một nút sử dụng trực tiếp blue-600 thì mọi thay đổi chủ đề đều có nghĩa là phải chỉnh sửa mọi thành phần. Nếu nó sử dụng color.action.primary, chế độ tối, độ tương phản cao hoặc thương hiệu mới chỉ thay đổi những gì color.action.primary trỏ đến. Tài liệu lưu ý rằng mã thông báo giúp bạn có thể áp dụng bảng màu có độ tương phản cao hoặc thay đổi tỷ lệ loại trên toàn hệ thống theo cách chính xác này.

Chủ đề và nhiều thương hiệu

Đối với các sản phẩm có nhiều thương hiệu hoặc nhãn trắng, hãy giữ một bộ mã thông báo ngữ nghĩa và thành phần cũng như một bảng màu chung cho mỗi thương hiệu. Mỗi chủ đề là một ánh xạ từ các mã thông báo ngữ nghĩa đến các giá trị toàn cầu. Phiên bản ổn định đầu tiên của thông số kỹ thuật W3C Design Tokens (2025.10), được phát hành vào tháng 10 năm 2025, đã bổ sung hỗ trợ theo chủ đề và đa thương hiệu, các không gian màu hiện đại như Display P3 và OKLCH cũng như các bí danh và tham chiếu cấp thành phần.

Mã thông báo chuyển động cũng thuộc về đây

Thời lượng, đường cong nới lỏng và lò xo tuân theo cùng một cấp độ. Mã thông báo toàn cầu có thể mềm mại với độ cứng và khả năng giảm chấn; một mã thông báo ngữ nghĩa motion.enter trỏ tới nó; một thành phần token sheet.motion.open trỏ đến motion.enter. Thêm chủ đề giảm chuyển động để ánh xạ lại các mã thông báo chuyển động thành các khoảng mờ ngắn.

Vận chuyển mã thông báo đến mọi nền tảng

Giữ mã thông báo trong kho lưu trữ dưới dạng DTCG JSON, nguồn sự thật duy nhất. Một công cụ xây dựng như Style Dictionary biến chúng thành các biến CSS, Swift, Kotlin, Flutter hoặc các định dạng khác. Các công cụ thiết kế đọc cùng định dạng có thể được đồng bộ hóa và các công cụ mã hóa AI có thể đọc trực tiếp JSON.

• Nguồn sự thật: DTCG JSON trong Git, được xem xét như mã
• Xây dựng: chuyển đổi sang từng nền tảng trên mỗi thay đổi
• Đồng bộ hóa công cụ thiết kế: nhập hoặc plugin, không bao giờ sao chép giá trị bằng tay
• Linting: cấm các giá trị thô trong các thành phần