INTERNAL

Style Guide

全站顏色規格驗收頁。每個元素的預設狀態直接呈現,hover / focus 狀態請把滑鼠移上去(或用鍵盤 Tab)檢查。

1 · 色票 Tokens

--orange-500

#FA951D

主色 / 主按鈕 / 焦點

--orange-700

#C96F0A

主色 hover / 內文連結

--orange-300

#FFC875

深底上的淺橘(footer hover)

--orange-100

#FFF1DE

標籤底 / 螢光筆 / 選取

--ink

#253746

主文字 / footer 底 / code 底

--slate

#5D6B77

次要文字 / metadata

--bg

#FBF8F3

頁面背景

--surface

#FFFFFF

卡片 / 表面

4 · 按鈕

主按鈕(hover 變深橘) 次按鈕(hover 邊框+字變橘)

主按鈕點擊瞬間會 scale(0.98)。

5 · 卡片(hover:邊框變橘、上移、陰影加深、標題變深橘)

卡片標題 1

整張卡片可點擊,不是只有標題。

卡片標題 2

整張卡片可點擊,不是只有標題。

卡片標題 3

整張卡片可點擊,不是只有標題。

6 · 表單(focus:邊框變橘 + 20% 光暈)

3 · 文章內頁元素

分類標籤(hover:底變 orange-300、字變 ink):

內容行銷 SEO 社群獲客

文章標題 H2(ink)

這是一段內文,裡面有一個內文超連結(orange-700 + 底線,hover 變 orange-500) ,還有螢光筆標記(orange-100 底 / ink 字) 和 行內程式碼。日期、閱讀時間等 metadata 用 slate 灰。

引用區塊:左側 3px orange-500 邊線、orange-100 底、ink 文字。

程式碼區塊:ink 底、白字
color: var(--orange-500);

H3 小標

比較項目	A	B
列一	值	值
列二	值	值

7 · 全域 / 狀態

文字選取:選取這行文字 → 反白是 orange-100 底、ink 字。
鍵盤焦點:用 Tab 鍵在按鈕 / 連結 / 輸入框間移動 → 出現 2px orange-500 外框。
捲軸:slate 40%(支援的瀏覽器)。

空狀態 / 404 文字用 slate 灰呈現。