本篇文章目錄

1. 前言：為什麼選用「馬卡龍配色」作為醫療工具箱的 UI 主軸？
2. 主題色票盤點：調製你的馬卡龍 CSS 全域變數 (:root)
3. 基礎重置 (Reset CSS) 與全域字型設定
4. 實戰切版：置中 Tab 分頁按鈕與精美邊框樣式
5. 結語

一、 前言：為什麼選用「馬卡龍配色」作為醫療工具箱的 UI 主軸？

傳統的醫療或健康類網頁，往往採用冰冷的深藍色、白色或令人感到緊張的紅色。然而，《醫藥健康小工具箱》的使用者可能正面臨身體不適、照顧生病兒童的焦慮，或是對個人體重指標的緊張。

因此，我們選擇採用低飽和度、高明度的「馬卡龍色系 (Macaron Palette)」來作為網頁的主色調，希望能有效降低數據帶給使用者的視覺壓力與心理焦慮**。

二、 主題色票盤點：調製你的馬卡龍 CSS 全域變數

我們將所有的顏色與共通數值統一定義在 CSS 的 :root 虛擬類別中。這代表這些變數是「全域」的，隨時可以透過 var(--變數名稱) 在整個專案中自由調用！

以下是我們專屬的馬卡龍全域色票與變數設定：
/style.css

三、 基礎重置 (Reset CSS) 與全域字型設定

為了消除不同瀏覽器（Chrome, Safari, Firefox）預設外邊距與邊框的差異，我們加上基礎的 CSS Reset，並設定適合閱讀的繁體中文黑體字型：
/style.css

四、 實戰切版：置中 Tab 分頁按鈕與精美邊框樣式

接下來我們運用 Flexbox 佈局將分頁導覽清單整排在畫面上水平置中，並使用馬卡龍粉色變數 var(--macaron-pink) 打造優雅的按鈕邊框與選中懸停效果：
/components.css

關鍵排版細節：

1. justify-content: center：讓 <ul> 裡面的 4 個分頁按鈕不論在桌機還是手機畫面上，都能完美置中對齊。
2. border: 2px solid var(--macaron-pink)：結合了 2px 實線邊框與馬卡龍 CSS 變數，比傳統無邊框按鈕更具卡片感與提示性。
3. transform: translateY(-2px)：在懸停與啟動時給予微小的動態上浮效果，讓使用者操作時感到網頁更靈敏、更有生命力。

五、結語

今天我們成功建立了《醫藥健康小工具箱》的靈魂——馬卡龍配色系統與全域 CSS 變數，並且順利完成了優雅置中且帶有邊框質感的 Tab 分頁按鈕。

有了這套變數規範，接下來不論新增多少組件，都能輕鬆維持視覺的一致性。

在明天的 [Day 06] 中，我們將進入 CSS Flexbox 與 Grid 佈局，正式拉出這 4 大工具卡片與表單欄位響應式（RWD）的版型。