正式品牌名稱與 Logo
DESIGN SYSTEM
網站基礎設定
育新網站的正式設計基準。後續所有頁面寬度、卡片、表單、按鈕、Loop List 與 Loop Item 都依照此頁設定。
繁中字體優先
分開設定
服務計畫、消息、夥伴
00｜品牌識別設定
全站 Header、Footer、Hero 與正式頁面都必須使用此品牌名稱、英文名稱與 Logo，不可自行替換或改寫。
Logo 來源使用 WordPress 媒體庫檔案，前台以完整圖片顯示，不裁切。
正式頁面、Header、Footer、SEO 標題與內頁 Hero 優先使用此名稱。
英文識別、輔助標示與品牌資料區使用此名稱，大小寫依此規格保留。
瀏覽器分頁 Logo瀏覽器分頁、書籤與手機加入主畫面圖示，統一使用育新主 Logo。
Logo 規則：Header 使用完整 Logo 圖檔；合作夥伴 Logo 規格不可套用到育新主 Logo；瀏覽器 Tab Icon 使用同一張育新 Logo；Logo 顯示採
object-fit: contain，不可裁切、變形或額外加字。01｜色彩系統
後續頁面只使用這些基礎色，不自行新增不一致色碼。
主色藍
#095B9B--yx-blue品牌識別、主標題、主要圖示。
深藍
#06447B--yx-blue-darkHeader、Footer、深色區塊。
天空藍
#BFEEFF--yx-skyHero、公益感背景。
柔藍
#CFEFFF--yx-blue-soft標籤、提示、輔助背景。
橘色 CTA
#F36B21--yx-orange送出、確認、重要導流。
深橘
#D95512--yx-orange-darkCTA hover 與高對比提示。
公益綠
#68AD37--yx-green陪伴、成長、合作輔助動作。
暖奶油
#FFF8EC--yx-cream全站主要背景。
紙白
#FFFDF7--yx-paper卡片、表單、內容區塊。
正文深藍
#164574--yx-ink內文與主要閱讀文字。
輔助灰藍
#5F7891--yx-muted說明文字、日期、提示。
淡藍線
#DBEAF3--yx-line邊框、分隔線、輸入框。
白色
#FFFFFF--yx-white按鈕、Logo 底、局部卡片輔助背景。
暖桃色
#FFE7D4--yx-peachHero 與 CTA 漸層輔助色。
淡天空藍
#EAF8FF--yx-sky-paleDesign-system 展示與輔助漸層。
淡橘底
#FFF1E8--yx-orange-soft狀態提示、重要操作輔助背景。
Footer 深藍
#08375F--yx-footer-blueFooter 漸層輔助色。
02｜字形與字重
全站固定使用同一套字體與字重。
"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif
03｜字體大小
網頁版與手機版分開設定。
Display / Hero
首頁主視覺大標題
網頁版育新青少兒關懷協會60px / 1.08
手機版育新青少兒關懷協會38px / 1.08
H1 / Page Title
內頁主標題
網頁版陪伴・教育・守護52px / 1.22
手機版陪伴・教育・守護40px / 1.22
H2 / Section Title
區塊標題
網頁版服務計畫36px / 1.22
手機版服務計畫30px / 1.22
H3 / Card Title
卡片與列表標題
網頁版兒少成長支持24px / 1.22
手機版兒少成長支持22px / 1.22
Body Large
重要說明文字
網頁版用穩定陪伴支持孩子與家庭。20px / 1.75
手機版用穩定陪伴支持孩子與家庭。18px / 1.75
Body
主要段落文字
網頁版透過教育支持、家庭關懷與資源連結，陪伴孩子走過重要的成長階段。18px / 1.75
手機版透過教育支持、家庭關懷與資源連結，陪伴孩子走過重要的成長階段。16px / 1.75
Body Small
卡片摘要與表單說明
網頁版適合卡片摘要、提示文字或表單輔助說明。15px / 1.75
手機版適合卡片摘要、提示文字或表單輔助說明。14px / 1.75
Caption
日期、標籤、次要資訊
網頁版2026｜公益服務資訊13px / 1.5
手機版2026｜公益服務資訊12px / 1.5
Button
所有按鈕文字
網頁版送出表單16px / 1.25
手機版送出表單15px / 1.25
04｜按鈕設定
所有按鈕從這裡選用。
05｜網站寬度與背景寬度設定
全站寬度分成兩層：外層背景寬度與內層內容寬度。背景可以滿版，內容不可貼齊螢幕邊緣，必須包在容器內。
適用 Hero 背景、色帶區塊、Footer、滿版橫向背景。
--yx-bg-full: 100%頁面文字、Loop List、表單、卡片外層內容必須放在主容器內。
--yx-container-max: 1280px文章內文、政策文字、單欄說明內容使用，避免文字行寬過長。
--yx-container-narrow: 820pxLoop Item、卡片、表單內部使用固定內距，維持閱讀舒適度。
desktop 22px / mobile 18px背景與內容寬度示意
滿版背景 100%
內容容器 max 1280px
窄版內容 max 820px
背景寬度
- 滿版背景：
width: 100% - Hero / Footer / 色帶可滿版。
- 背景滿版不代表內容滿版。
- 內容仍需放進 container。
桌機內容寬度
- 主容器：
1280px - 窄版內容：
820px - 頁面左右安全距離：
40px - Loop List 依內容 3～4 欄。
平板內容寬度
- 主容器以百分比縮放。
- 列表欄數可改為 2 欄。
- 不可讓內容貼齊螢幕邊緣。
- 保留左右安全距離。
手機內容寬度
- 容器：
calc(100% - var(--yx-container-padding-mobile)) - 目前等於
calc(100% - 28px) - 左右安全距離：各約
14px - Loop List 以 1 欄為主。
- 主要按鈕可滿寬。
手機 Container Padding 視覺化
手機版主容器固定使用 --yx-container-padding-mobile: 28px，等於畫面左右各保留約 14px，不讓內容貼齊邊緣。
手機螢幕 100%內容容器 calc(100% - 28px)所有手機版文字、卡片、Loop List、表單都放在這個容器內。
CSS 變數規劃
--yx-bg-full: 100%--yx-bg-contained: 1280px--yx-bg-narrow: 820px--yx-container-max: 1280px--yx-container-narrow: 820px--yx-container-padding: 40px--yx-container-padding-mobile: 28px--yx-section-full: 100%06｜間距系統
全站區塊距離、內容距離、卡片內距與手機版間距統一設定，後續頁面不可自行臨時調整。
桌機版一般區塊上下距離。
--yx-space-section手機版一般區塊上下距離。
--yx-space-section-mobile區塊內主標題與內容群組距離。
--yx-space-block標題、內文、按鈕之間的基本距離。
--yx-space-content卡片、表單、Loop Item 內距。
--yx-space-card列表項目與卡片之間的基本距離。
--yx-gap-list07｜圖片比例設定
所有封面圖、卡片圖、Hero 圖與合作夥伴 Logo 區塊使用固定比例與裁切規則，避免圖片高度不一致。
16:9
Hero / 主要封面
主視覺、重要活動封面、頁面大圖使用。
--yx-image-ratio-hero16:9
文章 / Loop 封面
最新消息、活動紀錄封面使用。
--yx-image-ratio-loop4:3
卡片圖片
一般卡片、服務說明圖、輔助圖片使用。
--yx-image-ratio-cardLOGO
合作夥伴 Logo
固定高度置中，不裁切 Logo，保留完整品牌識別。
--yx-logo-box-height圖片規則：封面圖使用
object-fit: cover；Logo 使用 object-fit: contain；手機版不改比例，只縮放寬度。08｜Card 卡片規格
所有卡片、Loop Item、內容摘要、CTA 區塊都依照此卡片規格製作。
兒少成長支持
紙白底、淡藍線、26px 圓角與統一陰影，適合大部分內容卡片。
閱讀更多 ›卡片基礎
- 背景：
--yx-paper - 外框：
--yx-line - 圓角：
26px - 陰影：
--yx-shadow
卡片內距
- 桌機：
24px - 手機：
18px - 圖片與文字分區清楚
- 標題與摘要維持固定距離
互動規則
- hover 可輕微上移
- 不可大幅變色
- 不可破壞文字對比
- 整張卡片可依需求點擊
09｜表單規格
聯絡表單、合作表單、報名表單與後續系統表單都依照這裡的欄位規格。
欄位設定
- Input 高度：
48px - Textarea 高度：
140px - 圓角：
14px - 外框：淡藍線
文字設定
- Label：Body Small / Bold
- 欄位文字：Body Small
- 提示文字：輔助灰藍
- 錯誤提示：橘色系
手機規則
- 表單欄位一律單欄
- 送出按鈕可滿寬
- 欄位間距維持 14px
- 不可左右貼邊
10｜標籤 / Badge 設定
最新消息、活動紀錄、合作類型與服務分類都使用同一套標籤規格。
協會公告活動紀錄合作單位教育支持最新消息
標籤最小高度。
--yx-badge-height標籤左右內距。
--yx-badge-padding膠囊型圓角。
--yx-badge-radius標籤文字字級。
--yx-font-size-caption11｜RWD 手機版規則
手機版不只是縮小，而是依照閱讀、點擊與資訊層級重新排列。
寬度
手機容器使用 calc(100% - 28px)，左右各保留約 14px 安全距離。
區塊距離
手機 Section Padding 使用 56px，卡片內距使用 18px。
圖片
圖片比例不因手機改變，只跟隨容器縮放；封面圖維持 cover。
按鈕
主要按鈕可滿寬，按鈕高度為 46px，文字 15px。
列表
內容型 Loop List 手機以一欄為主；Logo 型可視覺需求使用兩欄。
表單
手機表單一律單欄，欄位與送出按鈕都不可貼齊邊緣。
12｜Loop List / Loop Item 規劃
以下四個區塊需要建立 Loop List 與 Loop Item：服務計畫、成果集錦、最新消息／活動紀錄、合作單位／支持夥伴。此區塊就是正式 Loop Item 的視覺基準。
桌機依內容類型使用 3 欄或 4 欄；手機以 1 欄為主，合作夥伴 Logo 可 2 欄。
紙白底、淡藍線、24px 圓角、統一陰影；圖片／Logo 在上，文字資訊在下。
標籤 Caption、標題 H3、摘要 Body Small、日期與輔助資訊 Caption。
Loop Item 內以文字按鈕或藍色按鈕為主，不使用橘色主 CTA。
活動紀錄
LOGO
Loop Item 欄位規劃
服務計畫
- 服務封面
- 計畫名稱
- 計畫分類
- 簡短摘要
- 查看計畫 Popup
最新消息／活動紀錄
- 封面圖片
- 文章分類
- 標題
- 日期
- 摘要
合作單位／支持夥伴
- Logo
- 單位名稱
- 合作類型
- 簡短說明
- 外部連結
13｜Empty / Loading / Error 狀態
所有列表、搜尋、表單送出與 AJAX 載入都使用這套狀態樣式；狀態區塊必須放在主容器內，不能貼齊螢幕邊緣。
Empty 空資料
目前尚無資料。適用搜尋無結果、分類沒有內容、Loop List 尚未建立資料時。
返回全部內容Loading 載入中
資料載入中，請稍候。適用 AJAX 列表、表單送出、載入更多與頁面局部更新。
Loading 不使用跳動版面，不改變容器寬度。Error 錯誤狀態
資料暫時無法載入，請稍後再試。適用 API 失敗、表單送出失敗或權限不足。
重新整理使用位置
- Loop List 無資料
- 搜尋無結果
- AJAX 載入中
- 表單送出結果
文字層級
- 狀態標題：H3
- 說明文字：Body Small
- 輔助提示：Caption
- 按鈕：既有按鈕系統
手機規則
- 一律單欄
- 內距 18px
- 按鈕可滿寬
- 維持容器左右安全距離
14｜內頁 Hero
內頁 Hero 用於所有正式內頁的頁首說明區。Header 是全站共用固定式 Header，不放進 Hero 裡面；Header 背景保持透明，白色膠囊式導覽直接疊在 Hero 上方，Hero 以自身上方 padding 預留 Header 空間，因此 Header 與 Hero 背景會完全統一。
Header 透明疊在 Hero 上方，Hero 內容區預留 Header 安全距離，背景統一使用 Hero 漸層。
Header 關係
- Header 是獨立全站共用元件。
- Header 固定在視窗最上方，滾動時持續保留。
- Header 背景透明，只顯示白色膠囊式導覽。
- Hero 背景延伸至 Header 後方，Hero 內容區保留 Header 安全距離。
文字層級
- Eyebrow：Caption
- 頁面主標題：H1 / Page Title
- 說明文字：Body Large
- 按鈕文字：Button
寬度規則
- 背景可滿版。
- 內容必須放進 1280px container。
- 文字內容 max 760px。
- 單純內頁 Hero 不放 Loop Item。
手機規則
- Header 一樣固定在最上方。
- Hero 背景延伸到 Header 後方，Hero 內容區保留 Header 安全距離。
- 標題使用 H1 mobile。
- 內容單欄排列，按鈕手機可滿寬。
16｜關於育新頁面版型
關於育新頁面使用既有 Header、內頁 Hero、Container、Card、Button、Footer、字級、間距與圖片比例規範；圖片尚未製作前一律使用圖片預留區，不自行放假圖或外部圖片。
頁面目的
- 說明育新是誰。
- 說明為什麼成立。
- 說明幫助誰與如何服務。
- 建立協會信任感。
頁面順序
- Banner、協會簡介、成立緣起。
- 宗旨、願景使命價值。
- 服務對象、主要服務方向。
- 志工參與、協會資訊、結尾 CTA。
圖片預留規則
- 4:3 用於協會簡介、服務對象與三張服務卡片。
- 16:9 用於志工與社會參與橫幅。
- 所有圖片區在 container 內，不滿版貼邊。
CTA 規則
- 只放了解服務計畫與聯絡我們。
- 不放我要捐款、線上捐款。
- 支持我們頁面完成前不導入捐款流程。
17｜服務計畫頁面版型
服務計畫是動態管理系統，不寫死在前台 HTML；由 yuxin_plan CPT 與 yuxin_plan_category taxonomy 管理，前台以 Loop List 與 Popup 顯示公開計畫。Loop List 與 Loop Item 必須使用本段展示的正式樣式，不可另外自創卡片樣式。
資料來源
- CPT：yuxin_plan。
- Taxonomy：yuxin_plan_category。
- 前台只顯示 publish。
- 排序使用 menu_order ASC、date DESC。
Loop Item
- 必須使用 yx-plan-card。
- 服務封面 4:3 或 placeholder。
- 計畫分類 Badge、計畫名稱、簡短摘要。
- 查看計畫按鈕開啟 Popup。
視覺規範
- 卡片使用 var(--yx-paper)。
- 邊框使用 var(--yx-line)。
- 圓角使用 var(--yx-card-radius)。
- 內距使用 var(--yx-card-padding)。
手機規則
- Loop List 改為 1 欄。
- 卡片內距改用 mobile token。
- 按鈕可滿寬。
- 圖片比例維持 4:3。
18｜全站 Popup 基礎設定
全站 Popup 統一使用共用 class，不只服務於服務計畫；所有後續 Popup 都需沿用這套 Overlay、Panel、Header、Body、Footer 與關閉按鈕規範。若主要 Popup 內需再開啟第二層 Popup，第二層必須使用較小尺寸，避免與主 Popup 視覺層級混淆。
Popup 標題
圖片預留
Popup 內容使用既有字級、卡片、按鈕與容器規範；背景頁面在 Popup 開啟時不可滾動。
共用 class
- yx-popup-backdrop
- yx-popup-panel
- yx-popup-header / body / footer
- yx-popup-close
桌機尺寸
- 主要 Popup：width: min(920px, calc(100% - 80px))
- 第二層 Popup：width: min(680px, calc(100% - 140px))
- 主要 Popup max-height: calc(100vh - 80px)
- 第二層 Popup max-height: calc(100vh - 160px)
手機尺寸
- 主要 Popup：width: calc(100% - 28px)
- 第二層 Popup：width: calc(100% - 56px)
- 第二層 Popup 高度需小於主要 Popup。
- 維持既有 body 內部捲動規則。
操作規則
- 按鈕、遮罩、ESC 可關閉。
- 開啟時 body 加 yx-popup-open。
- 不得使用左上關閉。
19｜Page Tabs 全站樣式
Page Tabs 用於同一功能群組內的分頁切換，例如我的帳號、服務計畫管理與成果集錦管理。所有頁籤都必須使用此共用樣式，不可在單一頁面另外自創 tab 樣式。
使用時機
- 同一頁面群組的功能切換。
- 帳號中心、管理中心、資料分類頁。
- 不可拿來取代 Header 主選單。
視覺規則
- 外層使用 yx-page-tabs-section。
- 頁籤使用 yx-page-tab。
- 目前頁面加上 is-active。
- 字級使用 Button token。
寬度規則
- 放在 yx-container 內。
- 桌機可換行排列。
- 手機維持安全距離。
- 手機可水平捲動。
不可做
- 不可新增外部 icon。
- 不可使用規範外新色碼。
- 不可在每頁自訂不同圓角與間距。
- 不可做成獨立滿版導覽列。
20｜我的帳號與服務計畫管理頁
管理頁必須沿用網站基礎設定的 container、card、table、button、popup、form 與狀態提示規範。新增與編輯服務計畫一律在 Popup 中完成，管理頁主畫面只顯示列表與操作入口。
Page Tabs 依角色顯示；管理者依序顯示最新消息管理、服務計畫管理、成果集錦管理、合作單位管理、聯絡我們管理與網站設定。
點擊新增或編輯，開啟 Popup 完成表單操作。
分類可新增與刪除，使用中分類不可刪除。
服務計畫列表
列表欄位包含計畫名稱、分類、狀態、排序、最後更新與操作。
| 計畫名稱 | 計畫分類 | 狀態 | 排序 | 操作 |
|---|---|---|---|---|
| 玉苗圃希望教室 | 育苗計畫 | 公開 | 10 |
NEW PLAN
新增服務計畫
表單規則
- 新增／編輯只能在 Popup 中完成。
- 頁面主畫面不直接顯示右側表單。
- 服務封面未設定時顯示 placeholder。
- 分類管理仍使用 Popup。
權限安全
- 登入檢查。
- 角色檢查。
- nonce 驗證。
- sanitize input / escape output。
Page Tabs 權限
- 我的帳號頁籤所有登入狀態可見。
- 各管理頁籤只給管理員與編輯看到。
- 未授權者不可透過 tab 看見管理入口。
手機規則
- 表格橫向捲動。
- 操作按鈕滿寬。
- Popup 使用手機安全距離。
- Popup 表單單欄顯示。
21｜最新消息頁面與管理功能
最新消息使用 yuxin_news CPT 與 yuxin_news_category taxonomy 管理；前台 /news/ 以消息型 Loop Item 顯示，不得套用服務計畫卡片樣式。
消息封面預留
資料來源
- CPT：yuxin_news。
- Taxonomy：yuxin_news_category。
- 前台只顯示 publish。
- 排序：置頂、發布日期、排序。
Loop Item
- 封面比例 16:9。
- 顯示分類、日期、標題、摘要。
- 閱讀消息按鈕開啟 Popup。
- 無封面顯示消息封面預留。
管理頁
- 新增／編輯在 Popup 中完成。
- 分類管理使用第二層 Popup。
- 管理員與編輯可使用。
- 刪除移至垃圾桶。
不可做
- 不可混用一般文章。
- 不可新增另一套 Popup。
- 不可加入電話、Google Map、捐款 CTA。
- 不可使用規範外色彩。
22｜合作單位頁面與管理功能
合作單位使用 yuxin_partner CPT 與 yuxin_partner_category taxonomy 管理；前台 /partners/ 使用 Logo 型卡片，不得套用服務計畫或最新消息封面卡片樣式。
Logo 預留
Logo 預留
資料來源
- CPT：yuxin_partner。
- Taxonomy：yuxin_partner_category。
- 前台只顯示 publish。
- 排序使用 menu_order ASC、date DESC。
Logo 型 Loop Item
- 桌機 4 欄、平板 3 欄、手機 2 欄。
- Logo 固定高度。
- object-fit: contain。
- 不可裁切或拉伸 Logo。
管理頁
- 新增／編輯在 Popup 中完成。
- 分類管理使用第二層 Popup。
- 管理員與編輯可使用。
- 刪除移至垃圾桶。
不可做
- 不可使用 16:9 封面圖。
- 不可讓 Logo 裁切。
- 不可新增另一套 Popup。
- 不可加入電話、Google Map、捐款 CTA。
24｜首頁頁面版型
首頁是協會形象入口與全站內容導覽，必須整合服務計畫、最新消息、合作單位、關於育新與聯絡我們導流；所有 Loop List 皆讀取對應 CPT，不可寫死資料。
Hero 主視覺
首頁 Hero 使用左文右圖，圖片為 16:9 placeholder，不使用滿版照片背景。
動態內容摘要
服務計畫 3 筆、最新消息 3 筆、合作單位 8 筆，全部抓取公開資料。
導流與隱私
前台內容只顯示已公開資料，不顯示內部管理資訊。
Loop 規則
- 服務計畫沿用 yx-plan-card。
- 最新消息沿用 yx-news-card。
- 合作單位沿用 Logo 型 yx-partner-card。
圖片規則
- Hero 圖片 16:9。
- 關於育新圖片 4:3。
- 消息封面 16:9。
- 合作單位 Logo contain，不裁切。
空資料
- 各 Loop List 必須顯示 Empty State。
- 不可因無資料破版。
- 圖片未完成使用 placeholder。
- 不得外連假圖。
不可做
- 不可加入捐款流程。
- 不可新增 Google Map。
- 不可重寫 Popup。
- 不可使用規範外色彩。