📐 設計交付說明

輸入 —— 介面 / 元件

"登入卡片,寬 360px,內邊距 16px。郵箱 + 密碼輸入框、一個主『登入』按鈕,以及『忘記密碼?』連結。"

上下文:8pt 柵格,品牌主色 #5E6AD2,Inter 字型。

輸出 —— 交付說明

佈局與間距

• 卡片最大寬 360px,內邊距 16px,圓角 12px
• 縱向節奏:標題→輸入區 24px,標籤→輸入框 8px,欄位之間 16px

字型

• 標題 Inter 600 / 20px / 28px · 標籤 500 / 13px · 輸入 400 / 14px

按鈕狀態與 token

--btn-bg:        #5E6AD2;  /* 預設   */
--btn-bg-hover:  #4F5ABF;  /* 亮度 -8% */
--btn-bg-active: #454FAD;
--btn-fg:        #FFFFFF;  /* AA 8.6:1 */
--btn-disabled:  #5E6AD2 @ 40% 不透明度;
height: 40px; radius: 8px; focus: 2px 描邊環 #5E6AD2 @ 60%

無障礙

• 輸入框需 <label for>;錯誤文案用 aria-describedby 關聯
• 所有控制元件有可見聚焦環;Tab 順序自上而下