finfo design language · 設計決策問卷
有 guideline 的元件照抄就好。這份問卷只問設計語言目前沒有寫死規則的兩件事——區塊怎麼排、缺元件時參考誰。每題旁邊都用 finfo 真 token 即時預覽，你調到覺得對的樣子。答案自動存在瀏覽器，填完按右下角匯出 JSON 回傳。
設計感差，一大半是分隔手法亂用。下方是四種手法的樣子；你可以用兩種方式告訴我們規則——A 依情境選手法，或 B 直接寫每種手法會用在什麼場景，哪個順手用哪個（都填也可以）。之後 A2 才調各手法的實際間距。
補充（可空）
間距不是單一數字——它同時取決於「用什麼手法分隔」跟「在哪個螢幕」。請切換手法與斷點，把滑桿調到右側預覽看起來對的間距。每個組合各記一個值。
分隔手法
斷點
目前組合 ·
全部組合總覽 ·
上一個 section
保障分析摘要：目前壽險缺口約 320 萬。
下一個 section
建議商品：三商美邦新終身壽險，月繳總保費 2,480 元。
補充（可空）
卡片內部的垂直節奏。調兩個間距到右側預覽看起來對。理想上這是隨字級變動的比例（標題越大、與內文的間距越大），而非固定值——請以目前字級為基準抓比例。
標題 → 內文
內文 → 按鈕
壽險缺口分析
依你目前的保障，建議補足約 320 萬終身壽險。
看建議商品補充（可空）
一致的內距／間距比例是設計感的隱形骨架。調到右側兩張卡片的疏密關係看起來對。
卡片內距 padding
卡片間距 gap
投資型保單
年繳 36,000 元
終身醫療
年繳 18,500 元
補充（可空）
表單、長文這類窄內容（約 740–850px）在大螢幕怎麼擺。選一個，右側即時預覽。
置中
窄欄置於畫面中央，左右留白對稱
靠左
窄欄靠左對齊，貼近 sidebar 或內容起點
補充（可空）
這是工具型產品，整體偏密，但有些場景該放鬆。下方是三種密度的樣子，再幫每個場景定調。
補充（可空）
shadow 有 5 階（全是 #444 低透明擴散）。每個元件除了選陰影階，也選要不要配外框（hairline 邊線）——右側方塊同時反映陰影＋外框，幫我們定「純陰影／純外框／兩者相加」的規則。原則：平為預設，只有浮起來的東西才給陰影。
補充（可空）
對齊是設計感的隱形骨架——東西沒對齊到同一條線，再精緻也會顯得亂。以下三種對齊各選一種，卡片本身就是預覽（所見即所選）。
圖示與文字
欄位的 label 與數值
並排卡片的高度
補充（可空）
呼應設計語言的「借互動不借視覺」——拆成兩條獨立的優先序：互動邏輯可以參考別人，視覺樣式盡量收回 finfo。用 ↑ ↓ 排序、✕ 移除，底部可自行新增來源。
「這個元件該怎麼操作」參考誰。可以大方借成熟產品的互動慣例。
「這個元件長怎樣」參考誰。越靠前越優先用 finfo 自己的 token。
補充（可空）
勾選「借來後必須換成 finfo 樣式」的項目。底部可自行新增；這份清單之後會變成套用檢查表。
補充（可空）
給一張「元素尺寸 → 圓角 + 陰影」的對照表，之後做新元件時直接查。圓角填數字（px）或「膠囊」，陰影選階，右側即時預覽。
補充（可空）
做新元件時，這五種狀態怎麼從預設變化——這是最常被漏掉、也最容易做得不一致的地方。各選一條規則。
補充（可空）
任何這份問卷沒涵蓋的設計心法，都可以寫在這。一條一格，想寫幾條寫幾條——例如「並排卡片的左右間距用 X」「數字一律 tabular-nums 防跳動」。