FOUNDATIONS > Radius
Radius
在 SyncAI 的系統中，圓角是視覺風格的點綴，透過標準化的圓角變數，在編輯佈局中精確傳達空間深度、元素關聯性以及組件的預期功能。
Radius Scale Table 幾何圓角規範表
ScaleValueTokenPreviewRecommended Usage
None0px
--radius-none
直角對齊、背景全寬區塊、需要工業感的特殊元件。XS4px
--radius-xs
微型元件：小圖示背景。SM8px
--radius-sm
基礎組件：輸入框 (Inputs)、複選框 (Checkbox)、按鈕 (Buttons)、下拉選單。MD12px
--radius-md
中型組件：懸浮提示 (Tooltips)、小卡片、區塊組合。LG24px
--radius-lg
大型容器：主面板卡片、對話框 (Modals)、抽屜導航。Full9999px
--radius-full
特殊樣式：膠囊標籤 (Pill Tags)、圓形頭像、狀態指示燈。Application Principles 應用原則
建議做法
維持同心圓邏輯
當組件發生層疊時，請確保外層圓角大於內層圓角，這樣可以產生平行的視覺曲線，維持內外邊距的一致性與和諧。
遵循圓角規格
所有的圓角數值請嚴格遵守圓角規格表（Radius Scale Table），確保不同組件在水平與垂直方向上的視覺對齊，並維持系統整體的節奏感。
避諱做法
不一致的層疊設定
避免在父元素（外框）與子元素（內框）使用完全相同的圓角數值，這會導致邊角出現視覺落差，破壞幾何的對稱感。
極端風格混用
請勿在同一個版面或組件中，同時併用極度銳利 (0px) 與 極度圓潤 (999px) 的元素，強烈的風格衝突會破壞介面的系統化美感，導致視覺上的混亂。
Real-World Application 實際應用場景
Search Component
Search tokens...
搜尋框圓角採用 Radius-SM，維持系統的視覺連貫性與操作精確感。
System Dialog
Confirm Updates?
Changing the primary radius token will affect 452 components across the entire system.
外層較大的 Radius-LG 賦予容器一種浮動的「紙張層疊感」，內部按鈕則使用 Radius-SM，導引用戶專注於明確的下一步操作，強化「容器」與「工具」之間的結構邏輯。
Status Tags
ActiveReviewDeprecated
標籤採用 Radius-Full 這種視覺特徵能讓狀態資訊（如：運作中、待審核）從背景結構中跳脫出來，達成直覺化的視覺分類與識別。
Resource 01Nov 2024
Resource Card
作為標準的內容承載容器，Radius-LG 定義了內容區塊的邊界，使多張卡片並列時依然能維持清晰的閱讀節奏，並為介面注入溫潤且專業的視覺質感。