設計原則

Linyao Design System 的元件結構、尺寸、variant 與互動狀態以 Modulor Figma 可驗證的設計為依據。主要差異是麟曜數位工作室的色盤、字體，以及 Web 與 WCAG 2.2 AA 所需的狀態。Figma 未提供的元件使用相同的表面、圓角、字級、間距與狀態規則。

Modulor 依據

研究來源是公開 Figma 檔案「❖ Modulor・Components (Community)」。1277:150465 是 Start Here 畫布，不是單一元件。實作時先依階層定位 Glossary、可見範例、元件集、variants 與 variables，再檢查個別元件的設計內容；截圖只用於交叉檢查。

範圍	Figma nodes	採用規格
Glossary／結構	26014:40556, 1277:150465	元件分類、組合規則、公開頁面邊界
Button regular	16469:37879–16469:37882	高 3.5rem、圓角 0.75rem、16/20 semibold、無邊框與陰影
Checkbox／Radio／Switch	204:69822	12 種狀態；24px 控制項；52×30px switch 與 28px knob
Segmented control	234:61252, 224:61156	2–6 個選項、medium／small、共用表面與選取底板
Tabs	9457:23922, 1009:124555	2rem 內容寬度項目、0.25rem 間距、active quaternary surface、無軌道或底線
Text fields	132:59432, 709:93524, 740:98259	56px 欄位、12px 圓角、1px 外框、浮動標籤與錯誤結構
Code／Phone fields	9297:23908, 10703:28303	56px 分段欄位、8px 間距、電話國家區段寬度
List／Section heading	9457:29047–9457:29056	56px 列、內縮 0.5px 分隔線；32px 大寫區段標題
Bottom Sheet	9457:26270, 2589:10397–2589:10405	表面、把手、導覽、固定操作區、分隔線與行動裝置安全區域

已驗證的 Modulor 命名包含 Background/Main、Background/Secondary、Text/Title、Text/Body、Icon/Main、Divider/Main、Control/Primary、Control/Secondary、Control/Quaternary、switch 狀態角色與 Radius/md。Linyao Design System 依類別／角色／狀態建立固定的 CSS 變數名稱，元件不直接使用實體色票。

Figma MCP 無法直接讀取未放在可見畫布的隱藏母元件。Button low 沒有可驗證範例，因此不宣稱是 1:1 複刻。深色主題、Web hover／焦點狀態與 Figma 未提供的元件依已驗證規則延伸，並另外進行可存取性與瀏覽器驗證。

元件結構

元件分類

Checkbox、Radio、Switch 共用選取規則；SegmentedControl 由等寬項目組成；Tabs 使用依內容寬度排列的項目。浮層元件由 Root、Trigger、Portal、Backdrop、Popup、Title、Description 與 Close 等 parts 組合。

元件狀態

每個互動元件按適用情況檢查預設、hover、按下、focus-visible、選取／勾選、開啟、停用、唯讀、載入與無效狀態。Storybook 顯示實際狀態；測試驗證鍵盤、焦點、開關與受控／非受控行為。

語意變數

元件 CSS 使用 --text-main、--control-primary-hover、--divider-main，不使用色名或元件內部十六進位色碼。同一元件可在亮色、深色與使用者自訂主題中維持相同角色。

表面與尺寸

使用下列規格：

• main、secondary、elevated 與 quaternary 表面；
• 只在結構需要時使用低對比細分隔線；
• 核心 radius 為 0.75rem；
• 選取底板、switch knob 與低對比陰影；
• 32／40／56px 控制項高度；
• 清楚的 title／body／caption 層級。

不得加入裝飾性切角、假序號、背景工程網格、面板刻紋、內凹接縫或全站 uppercase。沒有元件結構或互動用途的細節不應加入。

色彩

淺色主題

亮色主題使用接近 Modulor Background/Main 的暖白作為主背景。Limestone 衍生色用於 secondary／quaternary 表面；Charcoal 衍生色用於文字與圖示；Vermilion 取代 Modulor blue，作為主要操作、選取與勾選狀態。

深色主題

深色主題保留相同的元件結構與間距，以暖色近黑、逐層變亮的表面與 Limestone 文字建立層級。Vermilion 保留強調角色，不使用霓虹光暈。

強調色與狀態色

Vermilion 用於主要操作、選取／勾選狀態與必要指示器。危險操作使用獨立語意變數，不與主要操作共用角色。Vermilion 上的一般尺寸文字使用通過對比檢查的深色 OnAccent，不直接使用白色。

字體

• GenKiGothicTW：一般 UI 無襯線字體。
• GenKiMinTW：由產品控制的編輯內容。
• Geist Mono：程式碼、日期／時間、計數器、計時器與數值。
• SectionHeading 的大寫只用於 Figma 明確顯示的 12／16 說明文字。
• 日期、時間與數值欄位使用 tabular numerals。

圖示

介面圖示統一使用 Phosphor。Button、欄位、選單與日曆導覽的圖示由元件控制尺寸並繼承語意前景色。預設使用 regular／bold；只有勾選／選取狀態在語意需要時使用 fill。圖示不取代可見的狀態文字，也不得以手寫 SVG、Unicode 字元或 CSS 圖形代替。

互動

可操作狀態透過 hover／按下表面、選取底板、knob 位置、短時間動態效果與焦點回饋表達。不使用厚邊框、硬陰影、位移刻線或面板裝飾表達互動。

所有元件必須：

• 支援長文字與地區語言擴展；
• 在窄螢幕不造成頁面 overflow；
• 維持至少 44px 互動目標，或提供等效點擊區域；
• 清楚區分驗證、停用與唯讀；
• 支援完整鍵盤操作；
• 在減少動態效果下仍能辨識狀態變化。

可存取性

Linyao Design System 以 WCAG 2.2 AA 為目標。Figma 的尺寸與結構是視覺依據；若原始配色不符合一般 Web 文字對比，會保留語意角色並改用可存取的前景色，例如 Vermilion 上使用深色 OnAccent。

focus-visible 不能只以低對比陰影表示；選取、無效與狀態不能只依賴顏色；停用內容仍應可讀。一般 transition 使用動態效果變數，prefers-reduced-motion: reduce 時移除非必要的距離與時間。