FOUNDATIONS > Elevation
Elevation
定義資訊階層的靈魂，介面是一個具備深度與物理邏輯的立體空間，透過模擬真實世界的光影交織，高度系統賦予了組件重量與距離，讓使用者能直觀地分辨資訊的優先權，確保在高密度資訊佈局下，介面依然保有精緻的空間通透感，並傳達出精準且具層次結構的系統語義。
Elevation Strategy
將 UI 拆解為相互連動的功能層級，透過一致的投影擴散度與背景模糊材質，定義組件如何與底層畫布互動、如何升起以獲得焦點，以及如何覆蓋全域以處理緊急資訊，引導使用者行為的空間座標系，確保每一次的層次跳轉都符合直覺。
01. Surface
此層級追求極致的扁平與簡約，不具備任何深度與投影，旨在為上層組件提供一個穩定、無干擾的承載平台。
02. Raised
此層級使用了雙層微弱投影，模擬出精密加工的倒角質感，讓卡片與按鈕看起來像是懸浮在畫布上方的實體物件，建立起一種引人入勝的觸覺暗示。
03. Overlay
是系統中最高的層級，用於臨時出現且需立即關注的導航、選單或對話框，具備極大範圍的擴散投影與高級感的背景模糊材質，確保關鍵訊息能從繁雜的背景中脫穎而出。
Surface
Raised
Overlay
Elevation Scale Table 光學高度規範表
CategoryLevelToken第一層：環境光 (Ambient)第二層：方向光 (Directional)Recommended Usage
SURFACEElev-0
--elevation-0
none
none
頁面背景、側邊欄、靜態輸入框。RAISEDElev-1
--elevation-1
0 2px 4px (4%)HEX: #1A1C1E
0 1px 2px (2%)HEX: #1A1C1E
資源卡片、可點擊按鈕、搜尋框。OVERLAY-SMElev-2
--elevation-2
0 4px 12px (6%)HEX: #1A1C1E
0 2px 4px (4%)HEX: #1A1C1E
下拉選單、氣泡提示 (Tooltips)。OVERLAY-LGElev-3
--elevation-3
0 12px 24px (10%)HEX: #1A1C1E
0 8px 16px (8%)HEX: #1A1C1E
系統對話框、側邊抽屜面板。STICKYElev-Max
--elevation-max
0 24px 48px (15%)HEX: #1A1C1E
0 16px 32px (12%)HEX: #1A1C1E
全域通知、緊急警告彈窗。Visual Depth Preview 視覺深度預覽
Elev-1: 漂浮Category: Raised
資源卡片與按鈕
建立基礎的可操作感，當元件與背景顏色接近時，透過微弱的陰影邊界引導使用者識別互動區域，維持介面的輕盈與簡潔。
Elev-2: 懸浮Category: Overlay-SM
上下文選單
用於臨時出現的輔助操作，較大的陰影範圍暗示選單已脫離畫布平面，在視覺上與底層內容產生明確位階，確保操作流暢且不干擾主線任務。
Elev-Max: 覆蓋Category: Sticky
優先覆蓋層
用於全域通知或緊急警告，極大的高度落差象徵「絕對優先級」，強迫使用者暫停當前動作並專注處理當前訊息，是系統中層級最高的視覺警告。