如果没有设计系统，每个设计师和开发人员都会自己做出一些小决定：稍微不同的蓝色、新的按钮样式、另一个间距值。一年后，该产品出现了数十个几乎重复的产品。设计系统用共享的决策取代了那些重复的决策。
大多数设计系统都具有三层。设计标记是存储原始决策的命名值，例如 color.primary、space.4 或motion.duration.short。按钮、输入、卡片和对话框等组件是根据这些令牌构建的，并包含每个状态。指南记录了如何使用每个组件、如何编写标签和消息以及适用的辅助功能规则。
设计系统存在于两个地方：在设计工具中，作为组件库；在代码中，作为开发人员安装的包。保持这两者同步是最困难的部分。当编码按钮不再与设计按钮匹配时，人们就会不再信任该系统。
运动也属于系统。持续时间、缓动曲线和弹簧设置可以是标记，交互式组件需要定义悬停、按下、加载和转换的行为。我们制作的 ExodeUI 将该行为存储在一个包含状态和弹簧物理的打开文件中，因此同一组件可以在 React、Vue、SwiftUI、Flutter 和其他框架中运行。
著名的公开示例包括 Google 的 Material Design、Apple 的人机界面指南、IBM 的 Carbon 和 Shopify 的 Polaris。阅读它们是了解成熟系统如何组织的好方法。