應 Slocum Themes 邀請，挑戰**僅用 WordPress 原生功能設計簡潔高效主題**。靈感源自社交媒體（Facebook/Twitter/Google+/Pinterest）的文章呈現邏輯，**Socialize 主題誕生記**。

設計流程：樣式指南優先，頁面組裝在後

1. 紙筆線框圖 → Photoshop 視覺設計 → 編碼。
2. 遵循 WP 基礎結構（Header/Content/Sidebar/Footer），**不按頁面設計，而是按組件設計**：一次完成一個組件，建立統一樣式指南，最後組裝全站。**保證跨頁面一致性與可維護性。**

核心組件：文章卡片

分解元素：發布日期、作者、標題、縮略圖、描述、操作項（讚/分享/評論）。**刻意捨棄分類、標籤、評論數等次要元素**，專注首屏吸引點擊核心任務。多稿迭代後確立：簡化而不簡陋，桌面移動雙端優雅。

樣式指南體系

顏色系統

• 主色/輔助色/背景色/文字色/鏈接色
• 鏈接狀態：默認/懸停/點擊
• PS 中降飽和度至黑白 → 疊加新色，秒級換膚，支援 8 種配色方案。

字體系統

選用 Adobe **Source Sans Pro**（無襯線、UI 表現優）。建立完整字體階梯指南（標題 H1-H6、正文、引用、代碼等），代碼層面落實語義化標籤。

柵格系統

流式 12 欄柵格，帶側邊欄佈局，**完全響應式，最大寬度 1200px**，斷點平滑過渡。

圖片規範

雖響應式，仍設定最大/最小尺寸邊界，配合柵格單位，防止極端視口下佈局崩壞。

導航與按鈕

極簡導航，顏色效果由色彩系統統一輸出，保持全站一致性。

側邊欄與頁尾

共用組件庫，頁尾僅差背景色區分，**DRY 原則落地**。

文章頁與評論

閱讀體驗優先：大行寬、舒適行高、代碼高亮、圖片燈箱、評論巢狀回覆、Gravatar 支援。

最終成果

完全響應式、8 色系切換、樣式指南驅動開發、**編碼階段微調細節（如間距、動效），設計邏輯零妥協**。