層級
Spaceship 設計系統是分層構建的，每一層都為設計帶來清晰、結構和目的。這些層次形成了一個層級，引導我們如何設計、構建和擴展產品——從最細微的視覺決策到最廣泛的用戶旅程。
遵循 Atomic Design 的原則，我們將主要資源整理為以下類別，讓所有團隊都更容易使用。
基礎
定義我們視覺語言的核心規則——色彩、字體、間距、網格、動效和設計 Token。它們為我們提供一致的工作基礎。
元件
將基礎規則落實為可重用的介面元素，以解決日常設計問題。
範本
展示元件和模式如何在情境中協同運作，為完整頁面和體驗提供現成結構。
模式
彙整經驗證的解決方案和最佳實踐，確保我們的工作在每個接觸點都保持一致、無障礙且以使用者為中心。
基礎
Spaceship Design System 的核心原子。它們定義了每個元件和模式所依據的視覺與結構規則。
色彩
定義品牌與功能色盤，確保各產品之間的和諧、無障礙與靈活性。
字體排印
透過字級階層建立層次與清晰度，讓內容更易於閱讀和掃視。
間距
為邊距、內距和版面節奏提供系統化尺度，以維持一致的介面。
網格
建立可因應不同裝置的響應式版面，同時維持結構與對齊。
動效
利用轉場和動畫來引導注意力、傳達狀態，並讓互動感覺更自然。
Design Tokens
將基礎數值轉化為程式碼，作為單一真實來源，同時促進快速且輕鬆的更新。
清晰的基礎意味著更少障礙、更高包容性，以及更多時間用於解決真正的問題，而不是從零開始。
元件
這些是 Spaceship Design System 的可重用元素。每一個都解決特定的介面問題——從按鈕和輸入欄位到導覽和回饋訊息。每個元件都具備無障礙、響應式特性，並可輕鬆適應不同情境或裝置。
可重用元件可確保我們打造的每個產品都能更快推出，並與更大的整體藍圖保持連結。
範本
範本是構建模組與使用者體驗之間的橋樑。它們將基礎與元件結合成完整頁面情境，展示系統在實際中的運作方式。
產品頁面範本
適用於登陸頁和產品頁面的高層級頁面結構，設計師主要更新內容並調整模組，以配合各種情境。
可分享元件
像比較表或價格卡這類更複雜、可重用的結構，旨在於不同產品中一致地處理特定情境。
有了現成可用的結構作為起點，團隊便能減少對版面決策的關注，將更多精力放在回應真實使用者需求上。
模式
模式彙整了我們從測試、回饋和真實使用中學到的內容，並將其轉化為可重用、標準化的解決方案。每個模式都基於使用者意圖，無論是簡化結帳流程、處理錯誤，還是引導使用者完成表單。
透過定義經驗證的解決方案，模式讓我們的工作更具目的性，確保每一段體驗不僅實用，而且經過深思熟慮地設計。