{
  "version": "review-07-today-preview",
  "status": "待使用者檢查，尚非 Figma 核准修訂",
  "basis": "Binoki Figma revision 03 品牌與材質；互動參考 Apple HIG，線條依使用者最新指示維持最低必要程度；Figma 尚未同步",
  "components": [
    {
      "name": "Button",
      "structure": "容器＋文字＋可選16px前／後圖示；icon-only使用20px圖示且有accessible name",
      "geometry": "最小高44；文字14/24、500；水平24、垂直10；gap8；圓角12；圖示鈕44×44",
      "behavior": "動作用button；導航型CTA用a。hover與pressed只作用於可見控件，無位移／縮放／padding變動。",
      "states": "Primary／Secondary／Quiet均有Default、Hover、Pressed、Focus、Disabled、Loading。focus獨立於hover；disabled不觸發；loading鎖定重複操作且保留原寬。"
    },
    {
      "name": "Link",
      "structure": "行內連結以字重與淡底辨識，不加底線；導航使用Quiet Compact；外部CTA標示目的地與↗",
      "geometry": "行內隨段落行高；獨立導航最小44、水平12；CTA與Button共用44／24／12",
      "behavior": "a的href是實際目的地，支援鍵盤／另開分頁；不以a攔截後執行彈窗動作。",
      "states": "Hover強調連結；Focus可見；不提供假disabled或loading連結。"
    },
    {
      "name": "Card",
      "structure": "Container只承載資訊；Navigation Card整片為一個連結、箭頭提示目的地；Disclosure Card由覆蓋整片的單一button展開內容，右下＋不另設第二個按鈕。",
      "geometry": "外圓角24；Today作品封面高540／手機500，標題內距32／24；底部作品資訊區至少96，閱讀提示高44、圓角12、水平16；整片單一命中範圍。Design System保留完整截圖媒體卡範例680／620，非目前首頁封面。",
      "behavior": "作品圖文與＋觸發同一個介紹面板；hover／pressed作用於整片、不位移縮放。文章卡片前往實際href。資訊容器不反白。",
      "states": "Default／Hover／Pressed／Focus；鍵盤焦點以整片2px品牌紅外框、offset4辨識，關閉面板返回卡片焦點且不捲動。"
    },
    {
      "name": "Dialog",
      "structure": "標題、內容、明確關閉鈕；由button開啟；原生dialog管理焦點與背景互動",
      "geometry": "最大760，桌面外側至少24、手機16；圓角24；Today同封面主視覺高440／360，正文內距40／24；內部捲動、關閉鈕固定可見。",
      "behavior": "Esc／關閉鈕／點背景關閉，返回開啟控件且preventScroll；開關前後背景scrollY不變。",
      "states": "Closed／Opening／Open／Closing；面板維持固定位置與尺寸，只做160ms ease-out淡入／淡出，不縮放或位移。開啟途中關閉會從當下透明度反向，重複關閉不重啟。Reduced Motion直接切換。"
    }
  ],
  "foundations": [
    [
      "字體",
      "Inter＋Noto Sans TC；14/24正文、20/28卡片標題、32/40章節、48/56展示"
    ],
    [
      "材質",
      "Plain：白60%、blur0；Photo：灰45%、blur16；Detailed：白23%、blur28；引用原master tokens"
    ],
    [
      "狀態色",
      "Primary：品牌紅／白字；hover混入8%白、pressed混入12%墨。Secondary：情境selected淡底；Quiet：透明底。兩者hover前景色16%、pressed前景色24%，均不加框。"
    ],
    [
      "Focus",
      "一般模式以墨底白字顯示鍵盤焦點；強制色彩模式保留系統色焦點線與控件邊界；不改操作位置。"
    ],
    [
      "Motion",
      "狀態色160ms ease-out；操作不改位置尺寸；Reduced Motion取消過渡及旋轉，保留動作名稱與處理中文字。"
    ],
    [
      "使用層級",
      "Primary：目前流程唯一主要動作；Secondary：明確的次要操作；Quiet：導航／輔助。只有導航Quiet使用Compact水平12，其餘文字操作水平24。"
    ],
    [
      "Disabled／Loading",
      "Disabled原生disabled、opacity .45；Loading aria-busy＋aria-disabled，保留動作文字、名稱與尺寸；左右對稱16px預留槽，文字中心對齊按鈕中心；右側為指示槽，阻止重複提交，結果用status宣告。"
    ],
    [
      "Fallback",
      "減少透明或無backdrop-filter時使用原不透明fallback；觸控不套hover"
    ],
    [
      "適用範圍",
      "此次涵蓋目前網站的Button／Link／Card／Dialog。未使用的表單、選單、通知不冒稱已定義。"
    ],
    [
      "載入指示",
      "參考Apple HIG：未知進度用旋轉活動指示；有可量測進度才用確定進度，不虛構百分比。網頁實作設定為16px、2px線、0.8秒線性旋轉，並非Apple指定數值。只在處理中出現；Reduced Motion靜止並提供具體處理文字。"
    ],
    [
      "最低必要線條",
      "最低必要線條：預設減少裝飾框與分隔線；載入指示、必要焦點及強制色彩模式允許功能線條，不把必要提示做得過細或過淡。"
    ],
    [
      "卡片素材",
      "首頁採既有 Binoki v03 生成的氛圍插圖，屬故事意象；面板延續封面並完整展示 App Store 真實宣傳截圖，不把插圖當產品畫面。來源見 assets/projects/sources.json。"
    ],
    [
      "面板動態",
      "面板只改變透明度，保持文字與圖片原尺寸，禁止卡片到面板的幾何縮放。Web Animations管理反向播放；背景保持鎖定直到關閉完成，焦點再返回。這是依使用者舒適度修正的Binoki實作，非宣稱Apple指定動畫。"
    ],
    [
      "對話框遮罩",
      "品牌墨色 rgba(33,31,27,.56)，與照片文字遮罩22%分開；開啟閱讀面板時降低周邊亮度。"
    ]
  ],
  "measurements": {
    "controlMinHeight": 44,
    "controlPaddingX": 24,
    "controlPaddingY": 10,
    "controlRadius": 12,
    "controlGap": 8,
    "cardRadius": 24,
    "cardInset": 12,
    "cardInnerRadius": 12,
    "fontSize": 14,
    "lineHeight": 24,
    "durationMs": 160,
    "borderWidth": 0
  },
  "sources": [
    {
      "title": "Apple HIG · Progress indicators",
      "url": "https://developer.apple.com/design/human-interface-guidelines/progress-indicators"
    },
    {
      "title": "Apple HIG · Buttons",
      "url": "https://developer.apple.com/design/human-interface-guidelines/buttons"
    },
    {
      "title": "Apple Today story — inspected web reference",
      "url": "https://apps.apple.com/tw/iphone/story/id1896776113"
    },
    {
      "title": "Motion iOS App Store example (paid source)",
      "url": "https://motion.dev/examples/react-app-store"
    },
    {
      "title": "Aceternity Apple Cards Carousel",
      "url": "https://ui.aceternity.com/components/apple-cards-carousel"
    }
  ]
}