Đổi một lần, lan mọi nơi: design token là nguồn sự thật duy nhất

Vì sao thương hiệu tự rệu rã

Hầu hết thương hiệu không mất đi vì đối thủ tấn công. Chúng trôi lệch từ bên trong, qua hàng nghìn quyết định nhỏ của những người chưa được trang bị đủ công cụ. Marty Neumeier gọi hiện tượng này là “brand drift”: không ai cố ý phá thương hiệu, nhưng kết quả cuối cùng vẫn là một hệ thống nhận diện không còn nhất quán.

Vấn đề không phải thiếu quy định. Theo khảo sát của Marq năm 2021, 85% tổ chức đã có brand guidelines (tài liệu hướng dẫn thương hiệu), nhưng chỉ khoảng 30% thực thi nhất quán. Khoảng cách giữa có tài liệu và thực sự vận hành được chính là điểm mà hầu hết doanh nghiệp đang đứng.

Khi đội ngũ mở rộng, khi thêm kênh truyền thông, khi đối tác ngoài tham gia sản xuất nội dung, số điểm chạm tăng lên. Nhưng khả năng kiểm soát thủ công không tăng kịp. Đây là lúc kiến trúc quan trọng hơn ý chí.

Design token là gì thật sự

Token không phải khái niệm mới. Google dùng nó trong Material Design 3 (hệ thống thiết kế chuẩn của Android và các sản phẩm Google). Salesforce xây dựng toàn bộ Lightning Design System trên nền token. Về bản chất, một token là một cặp tên và giá trị: color-brand-primary: #1A2B3C. Thay vì mỗi tệp thiết kế, mỗi trang code, mỗi tài liệu tự lưu một màu cụ thể, tất cả cùng tham chiếu về một tên biến duy nhất.

Khi Anh / Chị quyết định thay màu thương hiệu chính, Anh / Chị không cần đi tìm từng tệp để sửa. Anh / Chị thay giá trị của token, và mọi thứ đang dùng token đó tự động cập nhật. Nguyên tắc này áp dụng cho màu sắc, kích thước chữ, trọng lượng font, khoảng cách, độ bo góc, độ bóng, thời lượng animation, và mọi thông số thị giác có thể số hoá được.

Nhất quán không phải thẩm mỹ. Nhất quán là cơ chế trí nhớ: distinctive assets chỉ tích luỹ vào tâm trí khách hàng khi lặp lại đủ nhiều lần và đủ giống nhau.

Nguyên lý Ehrenberg-Bass, How Brands Grow, Byron Sharp

Cấu trúc ba tầng của hệ thống token

Một hệ thống token được thiết kế tốt thường có ba tầng. Tầng đầu tiên là token toàn cục (global tokens): đây là kho giá trị thô của thương hiệu, ví dụ toàn bộ bảng màu gốc với mã hex cụ thể. Tầng thứ hai là token ngữ nghĩa (semantic tokens): gán ý nghĩa cho giá trị, ví dụ color-action-primary trỏ đến màu xanh trong kho toàn cục. Tầng thứ ba là token thành phần (component tokens): áp dụng token ngữ nghĩa vào từng phần tử giao diện cụ thể, ví dụ màu nền của nút bấm chính.

Ba tầng này tạo ra sự linh hoạt có kiểm soát. Anh / Chị có thể thay đổi toàn bộ giao diện sản phẩm chỉ bằng cách chỉnh tầng toàn cục. Anh / Chị cũng có thể tuỳ chỉnh cho một thị trường cụ thể bằng cách ghi đè tầng ngữ nghĩa, mà không cần động vào cấu trúc nền.

Điểm chạm nào được bảo vệ

Câu hỏi thực tiễn nhất là token bảo vệ cái gì, chứ không phải token là gì. Các điểm chạm thường xuyên lệch nhất là website và landing page do nhiều người chỉnh, tài liệu bán hàng do nhân viên kinh doanh tự làm. Ngoài ra còn có bộ mẫu mạng xã hội do marketing dùng hàng ngày, và màn hình sản phẩm số do lập trình viên dựng theo hiểu biết riêng.

Khi token được tích hợp vào công cụ thiết kế (Figma variables), vào codebase (CSS custom properties hoặc design system), và vào mẫu tài liệu, tất cả các điểm này đều nhận cùng một giá trị từ cùng một nguồn. Người làm marketing không cần nhớ mã màu hex. Lập trình viên không cần đoán cỡ chữ tiêu đề. Hệ thống nhắc nhở thay cho con người.

Giới hạn mà token không giải được

Token giải bài toán kỹ thuật. Nhưng có những phần của thương hiệu không thể số hoá thành biến số. Giọng văn. Cách chọn hình ảnh. Cách đội ngũ dịch vụ phản hồi khách hàng trong tình huống khó. Đây là tầng hành vi mà Wally Olins đặt ngang hàng với tầng thị giác trong định nghĩa thương hiệu: Product, Environment, Communication, Behaviour.

Token mạnh nhất khi được đặt trong một hệ thống vận hành đầy đủ. Cần có chiến lược xác định rõ thương hiệu muốn chiếm vị trí gì trong tâm trí khách hàng. Cần có guidelines cho phần không số hoá được, và có người chịu trách nhiệm cập nhật khi thương hiệu tiến hoá. Kỹ thuật không thay thế được tư duy, nhưng kỹ thuật đúng giúp tư duy không phải kiểm soát thủ công mỗi ngày.

Kẻ thù lớn nhất của thương hiệu không phải đối thủ cạnh tranh. Đó là “internal drift”: hàng nghìn quyết định nhỏ của những người chưa được dạy logic thương hiệu.

Marty Neumeier, The Brand Gap

Bắt đầu từ đâu thực tế

Không phải doanh nghiệp nào cũng cần triển khai đầy đủ ngay lập tức. Nhưng có một ngưỡng mà sau đó, tiếp tục dùng tệp tĩnh và kiểm soát thủ công sẽ tốn kém hơn đầu tư vào cấu trúc đúng. Ngưỡng đó thường xuất hiện khi đội ngũ vượt quá 5 đến 10 người cùng tạo nội dung thương hiệu. Nó cũng xuất hiện khi số kênh và điểm chạm bắt đầu nhiều hơn một người có thể nhớ hết.

Điểm khởi đầu thực tế là một “hạt giống hệ thống”. Đó là định nghĩa bảng màu thương hiệu dưới dạng biến số trong Figma và trong CSS, thiết lập bộ type scale (thang chữ) có tên gọi ngữ nghĩa thay vì kích thước pixel thuần tuý, và tạo một bộ component (thành phần) lõi dùng chung. Ba thứ này không giải hết mọi vấn đề, nhưng chúng tạo nền để mọi thứ phía trên có thể nhất quán.