設計目標

打造一頁式企業官網首頁，風格簡潔大氣、留白充足、視覺層次清晰，適配 WordPress 主題開發。畫布建議 1440 px 寬，關鍵內容置中 1200 px 安全區。

配色規範

強調色、按鈕、連結可自行擴充（如 #c0392b 紅、#2980b9 藍）。

用途	色碼	備註
頁面底色	#ece5db	暖灰米白
底部區塊	#f6f2ed	稍亮底色
頂/底深色列	#2d2b26	近黑深灰

逐區塊構建流程

1. 底部區塊（Footer 區）

• 圓角矩形工具，半徑 6~8 px，填 #f6f2ed。
• 圖層樣式：內陰影（距離 1、大小 3、不透明度 20%）+ 描邊（1 px、#ddd）。

2. 頂部深色列與 Logo 區

• 矩形工具拉滿寬高 80~100 px，填 #2d2b26。
• 複製至底部對稱。
• 頂部列下方再建一矩形（高 120 px 左右）置放 Logo，加內陰影+投影增強層次。

3. Banner 輪播區

• 圓角矩形做容器，置入高品質唯美圖片（建議 1920×600 px）。
• 容器加投影製造浮起感。

4. 導航列設計

• 文字：主標題 18~20 px、輔助說明 12 px 灰色，行高 1.8。
• 分隔線：1 px 實線 + 1 px 高光線（白色 20% 不透明度），產生凹凸感。
• 放大檢視像素級對齊，避免半像素模糊。

5. Logo 與搜尋框

• Logo 置左，搜尋框置右（圓角矩形 + 圖層樣式內陰影 + 圖示）。
• 搜尋框樣式可複用前文按鈕樣式，保持一致性。

6. 內容區塊（服務/產品/新聞）

• 圖文卡片：圖片圓角 4 px + 投影，標題/摘要/閱讀更多鏈結。
• 卡片懸停狀態另存一組圖層組，方便切圖交付前端。

最終成果

交付前檢查清單

• 圖層命名規範、分組清晰（Header、Banner、Nav、Content、Footer）。
• 關鍵互動狀態（Normal/Hover/Active）皆有對應圖層組。
• 圖片已轉智慧物件，保持非破壞縮放。
• 導出資產：SVG 圖示、WebP 圖片、CSS 變數色碼表。