Nếu không có hệ thống thiết kế, mọi nhà thiết kế và nhà phát triển đều tự mình đưa ra những quyết định nhỏ: màu xanh lam hơi khác, kiểu nút mới, giá trị khoảng cách khác. Sau một năm sản phẩm có hàng chục sản phẩm gần như trùng lặp. Một hệ thống thiết kế sẽ thay thế những quyết định lặp đi lặp lại đó bằng những quyết định chung.
Hầu hết các hệ thống thiết kế đều có ba lớp. Mã thông báo thiết kế là các giá trị được đặt tên, chẳng hạn như color.primary, space.4 hoặc motion.duration.short, lưu trữ các quyết định thô. Các thành phần, chẳng hạn như nút, đầu vào, thẻ và hộp thoại, được xây dựng từ các mã thông báo đó và bao gồm mọi trạng thái. Hướng dẫn ghi lại cách sử dụng từng thành phần, cách viết nhãn và thông báo cũng như những quy tắc trợ năng nào được áp dụng.
Một hệ thống thiết kế tồn tại ở hai nơi: trong công cụ thiết kế, dưới dạng thư viện thành phần và trong mã, dưới dạng gói mà nhà phát triển cài đặt. Giữ hai thứ đó đồng bộ là phần khó nhất. Khi nút được mã hóa không còn khớp với nút được thiết kế, mọi người sẽ không còn tin tưởng vào hệ thống nữa.
Chuyển động cũng thuộc về hệ thống. Thời lượng, đường cong nới lỏng và cài đặt lò xo có thể là mã thông báo và các thành phần tương tác cần có hành vi được xác định để di chuột, nhấn, tải và chuyển tiếp. ExodeUI do chúng tôi tạo ra, lưu trữ hành vi đó trong một tệp đang mở với các trạng thái và vật lý lò xo, do đó, thành phần tương tự sẽ phát trong React, Vue, SwiftUI, Flutter và các khung khác.
Các ví dụ nổi tiếng được công chúng biết đến bao gồm Material Design của Google, Nguyên tắc giao diện con người của Apple, Carbon của IBM và Polaris của Shopify. Đọc chúng là một cách hay để biết một hệ thống trưởng thành được tổ chức như thế nào.