层级结构
Spaceship 设计系统是分层构建的，每一层都增加了清晰度、结构和目标。它们形成了一个层级体系，指导我们如何设计、构建和扩展产品——从最细微的视觉决策到最广泛的用户旅程。
遵循原子设计原则，我们将主要资源划分为以下类别，让所有团队都能更轻松地使用它们。
基础
定义我们视觉语言的核心规则——颜色、字体、间距、网格、动效和设计令牌。它们为我们的工作提供一致的基础。
组件
将基础规则转化为可复用的界面元素，以解决日常设计问题。
模板
展示组件和模式如何在具体场景中协同工作，为完整页面和体验提供现成结构。
模式
沉淀经过验证的解决方案和最佳实践，确保我们的工作在每个触点上都保持一致、无障碍且以用户为中心。
基础
Spaceship Design System 的核心原子。它们定义了每个组件和模式所依赖的视觉与结构规则。
颜色
定义品牌和功能色板，确保各产品之间的和谐性、无障碍性和灵活性。
字体排印
通过字体层级体系建立层次与清晰度，使内容易于阅读和浏览。
间距
为外边距、内边距和布局节奏提供系统化尺度，以保持界面一致性。
网格
创建可响应的布局，使其能够适配不同设备，同时保持结构和对齐。
动效
通过过渡和动画来引导注意力、传达状态，并让交互感觉自然流畅。
设计令牌
将基础值转化为代码，作为单一事实来源，同时便于快速、轻松地更新。
清晰的基础意味着更少的障碍、更强的包容性，以及更多用于解决真实问题而非从零开始的时间。
组件
这些是 Spaceship Design System 的可复用元素。每一个都解决特定的界面问题——从按钮和输入框到导航和反馈消息。每个组件都具备无障碍性、响应式特性，并且能够轻松适配不同的场景或设备。
可复用组件确保我们构建的每个产品都能更快交付，并与更大的整体保持一致。
模板
模板是构建模块与用户体验之间的桥梁。它们将基础和组件组合成完整页面场景，展示系统在实践中如何运作。
产品页面模板
用于落地页和产品页面的高层级页面结构，设计师主要在其中更新内容并调整模块以适应各个场景。
可共享组件
更复杂的可复用结构，如对比表或定价卡片，被设计为能够在各产品中一致地处理特定场景。
有了现成的结构作为起点，团队可以减少对布局决策的关注，把更多精力放在满足真实用户需求上。
模式
模式汇集了我们从测试、反馈和真实使用中获得的经验，并将其转化为可复用的标准化解决方案。每种模式都基于用户意图，无论是简化结账流程、处理错误，还是引导用户填写表单。
通过定义经过验证的解决方案，模式让我们的工作更有目的性，确保每一种体验不仅功能完善，而且经过深思熟虑的设计。