SYNCROBOTIC

FOUNDATIONS > Spacing

Spacing

SyncAI 的間距邏輯建立於嚴謹的 8px 基礎網格 (Base Grid) 之上，確保生態系中的每個元素皆具備數學般的精確度，為了因應高密度的工業介面需求，系統同時納入 4px 作為最小增量單位（微網格），用以處理極細微的組件對齊，透過 4px 與 8px 的倍數組合，在技術性的資訊密度與視覺上的閱讀清晰之間取得了高度平衡，建構出和諧且一致的視覺節奏。

Linear Spacing Scale 線性間距規範表

ScaleValueTokenRecommended UsageRepresentation
40.25rem
--space-XS
用於圖示與文字間的極小間距、極高密度組件的微調。
80.5rem
--space-S
輸入框內距、小標籤內距、組件內部小型間距。
161.0rem
--space-M
通用組件間距、按鈕間距、卡片與卡片之間的水平/垂直距離、主選單圖示與文字間距。
241.5rem
--space-L
中型模組內部的資訊分組、卡片內部邊距 (Padding)、主選單大分類間距。
322.0rem
--space-XL
大型區塊或獨立模組間的分隔、頁面兩側的基礎邊距 (Margins)。
644.0rem
--space-2XL
大型功能區塊的垂直分隔、寬螢幕佈局下的外圍邊距。
1288.0rem
--space-3XL
特殊頁面（如首頁或 Landing Page）之大型段落間的留白。

Application Principles 應用原則

建議做法

使用 8 的倍數

在定義大型功能區塊時，請保留充足的邊距（Padding），讓各個主要章節擁有明確的分界，確保視覺動線清晰不擁擠，所有的間距都必須統一符合 8px 網格邏輯，確保畫面上所有的空間跳轉都有跡可循。

64px padding
32px margin-top
避諱做法

避免使用任意值

禁止隨意輸入數值（例如 7, 13, 22）。所有的間距必須從定義好的間距階層表（Spacing Scale）中挑選，不可自創數值，維持整齊的比例是展現專業的關鍵。

13px margin
21px padding