§00 — 概念 · St. James' Settlement Youth Services · Website Revamp Tender · Concept A
Walking with you, growing with you.
這個方向以「陪伴」為核心：溫暖米白的底色、代表信任的深青綠、帶人情味的珊瑚橘， 配襯以真實人像攝影為主角的編輯式版面，以及從容不迫的動態節奏。介面刻意保持安靜， 讓相片中的笑容說話——目標是令正在為子女尋找支援的家長、 以及考慮協作的學校，在打開網站的三秒內感到：「這裡值得信任。」 就像一間早晨的社區中心——燈是暖的，門是開的，有人在等你。
§01 — Colors
Colors — warm cream, deep teal, warm coral
暖色溫：米白為底，深青綠承載信任，
珊瑚橘帶來人情味，沙色分隔段落。
--color-bg
#FAF6F0
頁面背景（溫暖米白）
--color-surface
#FFFFFF
卡片、面板
--color-border
#EAE2D6
髮絲線、分隔線
--color-fg
#26221B · 13.9:1 AAA
主要文字
--color-fg-muted
#6B6154 · 5.4:1 AA
次要文字
--color-fg-subtle
#99917F · 3.1:1 大字限定
說明文字、中繼資料（僅大型文字）
--color-primary
#0E6E6B · 5.6:1 AA
主按鈕、連結、導覽活躍狀態（深青綠）
--color-primary-hover
#0A5755
懸停狀態
--color-primary-tint
#E3F0EE
青綠淺底、圖示圓底
--color-accent
#D95F3B · 3.9:1 大字/粗體限定
珊瑚橘——重點、活動徽章、次要 CTA
--color-accent-tint
#FBE9E1
珊瑚淺底
--color-sand
#F2E9DB
交替段落帶（活動報名）
對比度以 WCAG AA 為基準：內文文字對背景 ≥ 4.5:1（--color-fg 達 13.9:1）。 珊瑚橘 #D95F3B 於米白底僅用於大型／粗體文字或置於白色表面；#99917F 僅用於大型輔助文字。
§02 — Typography
Typography — serif warmth, humanist ease
襯線標題帶出社區通訊的溫度，
人文無襯線內文長讀不倦。
中文為主，英文為輔（斜體）。
標題字體 · Heading — Noto Serif TC + Lora
與你同行 Growing Together
襯線字帶出印刷社區通訊的溫暖與可信；只用於 Display 與 H2 層級。
內文字體 · Body — Noto Sans TC + Nunito Sans
由兒童到青年，由校園到社區——我們與每一個家庭同行。From childhood to youth, we walk together.
人文無襯線閱讀舒適；卡片標題以 700 粗體建立層次。
Display · 56/64 · 700 · -0.01em
（手機 32/40）
與你同行，陪你成長
H2 · 36/44 · 600 · -0.01em
服務及計劃 Services
H3 卡片標題 · 20/28 · 700
學校社會工作服務 School Social Work
Body · 16/28 · 400
由兒童到青年，由校園到社區——聖雅各福群會青年服務與每一個家庭同行，陪伴青少年走過成長的每一段路。
Small / Meta · 13/20 · 500 · .02em
2026年9月18日 · 精神健康 · SUN Teens
Mono 註記 · 11/16 · .14em upper
§06 — Desktop Homepage · youth.sjs.org.hk
§03 — Spacing / Radius / Shadows
Spacing, radius & shadows — soft and generous
8px 格線系統。
段落內距 96px（桌面）／ 56px（手機），
內容闊度 1200px（1440px 畫布內）。
間距階 · Spacing Scale（8px 格線 · 圖示為 2×）
段落內距：96px 桌面 / 56px 手機。斷點採 Bootstrap 5 預設（576 / 768 / 992 / 1200）。
圓角 · Border Radius
md · 14px
lg · 22px
xl · 32px
pill · 按鈕
14px：按鈕內距、輸入框、篩選片 · 22px：卡片 · 32px：Hero 卡片、相片遮罩 · 膠囊：所有按鈕。
陰影 · Shadows
--shadow-sm
篩選片、細微浮起
--shadow-md
卡片
--shadow-lg
Hero 卡片、置頂元素
§04 — Components
Components — only the primitives used in the homepage
只展示首頁實際出現的元件：
按鈕、篩選片、搜尋、分眾入口卡、
服務卡、消息列與圖示。
按鈕 · Buttons
主要膠囊（青綠實底）· 外框膠囊（1.5px 青綠框）· 珊瑚文字連結。 懸停：加深 + 輕微上浮 2px；聚焦：3px 青綠光環（40% 透明度、2px 偏移）。
分類篩選片 · Category Chips
圓角 14px（--radius-md）。活躍狀態：青綠實底白字；懸停：青綠框線。
搜尋輸入 · Search Input
聚焦時框線轉青綠並加 3px 淺青綠光環。
消息列 · News Row（編輯式，無卡片框）
18
2026.09
SUN Teens 精神健康工作坊十月開課
襯線數字日期 + 標題 + 分類片；髮絲線分隔。懸停：標題轉青綠。
分眾入口卡 · Audience Pathway Card
青年
Youth
成長、情緒與生涯支援
圖示置於淺青綠圓底；懸停：卡片上浮 3px、箭嘴右移 4px。
服務卡 · Service Card
精神健康
相片來源：sjs.org.hk
相片上緣 + 暖色漸層壓底 + 分類片；圓角 22px；懸停上浮。
圖示 · Icons — Lucide 風格內嵌 SVG · 1.5px 線寬 · 22px
導覽 Navigation
版塊 Section
社交 Social
§05 — Motion
Motion — gentle, unhurried; fade-rise 24px, stagger 90ms
不彈跳、不縮放彈出。
所有示範均使用首頁真實元件；
prefers-reduced-motion 時全部即時呈現。
動效參數 · Motion Tokens
| Token | 值 | 用途 |
|---|---|---|
| --ease-out | cubic-bezier(0.22, 1, 0.36, 1) | 所有進場與互動動效 |
| fast | 200ms | 懸停、按鈕回饋、箭嘴滑動 |
| normal | 400ms | 進場：fade + rise 24px |
| slow | 700ms | Hero 相片緩緩定格（scale 1.06 → 1） |
| stagger | 90ms | 卡片序列進場（分眾入口、服務卡） |
實作對應 Framer Motion：whileInView + viewport once + staggerChildren: 0.09
Hero 進場（自動循環）· Hero Entrance Auto-loop
聖雅各福群會青年服務 · Youth Services
與你同行，陪你成長
Walking with you, growing with you.
標題、副題與 CTA 以 90ms 序差 fade-rise 進場，400ms · ease-out。
服務卡進場（自動循環）· Fade + Rise
生涯規劃
相片來源：sjs.org.hk
生涯規劃服務 Career Sparkle
陪伴青年探索屬於自己的路。
分眾入口序列進場 · Stagger 90ms
青年 Youth
兒童 Children
家長 Parents
卡片懸停上浮（試試看）· Live Hover Lift
青萌銅鑼灣綜合服務中心
中心服務 · Causeway Bay
6PM網上青年支援隊
網上支援 · Cyber Youth Support
懸停：上浮 3px + shadow-lg，200ms。刻意輕微——冷靜是特色。
§06 — Desktop Homepage
Desktop homepage — 1440px, editorial flow
完整首頁：Hero → 分眾入口 → 我們的故事 →
服務卡 → 消息列 → 活動帶 → 頁腳。
可在框內捲動。
聖雅各福群會
青年服務
相片來源：sjs.org.hk
聖雅各福群會青年服務 · St. James' Settlement
Walking with you, growing with you.
由兒童到青年，由校園到社區——聖雅各福群會青年服務與每一個家庭同行。
為你推介 · For You
選擇你的身份，我們陪你走下一步。
青年
Youth
成長、情緒與生涯支援
兒童
Children
課餘託管及學習支援
家長
Parents
親職支援與家庭活動
學校
Schools
駐校社工及協作計劃
合作夥伴
Partners
義工及企業協作
相片來源：sjs.org.hk
關於我們 · About Us
自1949年成立以來，聖雅各福群會一直紮根社區。青年服務團隊相信，每一位青少年都值得被看見、被聆聽——無論是課餘的陪伴、情緒的支援，還是生涯的探索，我們都選擇與家庭並肩同行。
由灣仔到柴灣，由校園到網上，我們的社工每天與青年、家長和老師一起，把「同行」變成日常。
了解更多服務及計劃 · Services
由中心到校園，由線下到線上，
總有一種同行的方式適合你。
中心服務
相片來源：sjs.org.hk
中心服務
相片來源：sjs.org.hk
賽馬會青萌柴灣綜合服務中心
Jockey Club Youth Integrated Service Centre (Chai Wan)
服務柴灣及東區青少年，涵蓋課餘活動、義工發展及家庭支援。
了解更多
學校服務
相片來源：sjs.org.hk
生涯規劃
相片來源：sjs.org.hk
精神健康
相片來源：sjs.org.hk
網上支援
相片來源：sjs.org.hk
最新消息 · News
18
2026.09
SUN Teens 精神健康工作坊十月開課
精神健康05
2026.09
青萌柴灣中心開放日活動回顧
中心服務28
2026.08
生涯規劃講座：DSE 之後的多元出路
生涯規劃活動報名 · Activities
名額有限，額滿即止。
暑期義工訓練計劃
現正報名 · 8月30日截止
6PM 網上青年小組
逢星期五晚上
家長講座：與青少年談心的藝術
9月12日
§06 桌面版首頁 · 1440px 畫布以 transform: scale() 縮放 · 框內可捲動 · 按 Full Screen 放大檢視 · youth.sjs.org.hk
§07 — Mobile
Mobile — 390px, single column, touch-first
單欄佈局，觸控目標 ≥ 44px。
試按右上角漢堡選單，
左側滑入面板可實際操作。
§07 手機版 · 390px 單欄佈局 · 漢堡選單左側滑入（可實際操作）· 觸控目標 ≥ 44px
§08 — Xiao Ya · AI Service Navigator
Xiao Ya — AI service navigator
選購項目（另行報價）——建議書 §15.3.1。
以下為示範對話 · scripted demo，
並非真實 AI 回應。
選購項目（另行報價）——建議書 §15.3.1。以下為示範對話 · scripted demo，並非真實 AI 回應。
保障設計 · Safeguarding by design
小雅只做一件事——帶人找到合適的服務。所有邊界在設計階段寫死，不靠模型自律。
只回答服務導航問題，不提供輔導
Scope lock — navigation only, never counselling
偵測危機訊號即時轉介 6PM 及熱線
Crisis handover — routed to 6PM and the hotline
答案只來自 YS 已發佈內容
Grounded in published YS content only
不儲存個人資料
Data minimisation — no personal data retained
隨時一鍵停用
Client control — one switch turns it off
「同真人傾」永遠可見
Human escape hatch, always on screen
你唔係一個人。如果你而家好辛苦，可以即刻搵人傾：
小雅係資訊助理，唔係輔導員；呢類情況會即刻轉介真人。
危機轉介 · Crisis handover
The most important reply is the one Xiao Ya refuses to give.
當訊息出現情緒困擾或危機字眼，小雅立即中止服務導航流程， 不再嘗試回應內容，改為呈上人手支援途徑：6PM 網上青年支援隊、中心社工熱線，以及緊急求助電話。 卡片採用溫暖珊瑚色而非刺眼的紅色警示——目的是讓人安心求助，而不是被嚇走。
觸發方式 · Trigger
關鍵詞 + 語意分類，雙重把關；寧可誤報，不可漏報。
名單管理 · Governance
求助途徑由 YS 同事在 CMS 維護，並非模型生成。
§08 示範對話為預設腳本，並非真實 AI 回應 · Scripted demonstration — not a live model response