Design System
設計系統
v4.0「暖光雙調性」— 全站元件與色彩規範總覽。 token 定義在 tailwind.config.ts，CSS 變數與全域元件樣式在 assets/css/base.css。
Colors
色彩系統
一個團隊、兩個品牌：元元衡美學院用暖棕大地，山巢 NestHill 用墨綠暖底。 區塊掛上 .theme-nest class 即整段切換為山巢墨綠調。
共用（兩主題不變）
米白・主背景
$cream#FAF6EF暖金・主強調
$gold#C9A86C暖金 hover
$gold-strong#B8945A暖金 soft
$gold-soft#EFE3CC主文字
$text-primary#41382E次文字
$text-secondary#6E6354輔助文字
$text-muted#9A8F7E線條
$line#E5DCCB元元衡・暖棕大地（預設主題）
深棕・深色區
$brown-deep / --c-deep#3B2E23焙茶・Hero/Footer
$brown-deeper / --c-deeper#2C231B肉桂・第二強調
$cinnamon / --c-accent2#A6764F苔綠・點綴
$moss / --c-green#7C8F6D苔綠 soft
$moss-soft / --c-green-soft#E4E8DC亞麻・次背景
$linen / --c-bg-alt#F3EBDD山巢・墨綠暖底（.theme-nest）
深橄欖・深色區
$olive-deep / --c-deep#2E3B2F墨綠・Hero/Footer
$olive-deeper / --c-deeper#232D25山巢 logo 綠
logo（山與鳥）#444D32山巢 logo 土棕・第二強調
--c-accent2#9B704D艷綠・主題綠
$sage / --c-green#5F7A5F艷綠 soft
$sage-soft / --c-green-soft#DFE6DA暖棕・點綴
$walnut#8C6F52苧麻・次背景
$ramie / --c-bg-alt#EFEDE2Logo（路徑見 app/brand/*.ts）
元元衡・深色版於 cream/images/logo-dark.svg
元元衡・全白於焙茶 #2C231B/images/logo-white.svg
山巢・全彩於 cream/images/nesthill/logo.svg
山巢・全白於深橄欖 #2E3B2F/images/nesthill/logo-white.svgTypography
字體系統
中文標題 Noto Serif TC・內文 Noto Sans TC・英文裝飾 Cormorant Garamond。
Display / 68px回到身體，找回平衡
H1 / 52px頁面主標題
H2 / 38px區塊標題
H3 / 28px子區塊標題
H4 / 22px卡片標題
Body / 16px主要內文 — 從身體出發，重新回到身心平衡，再次看見生活與人生的美好。
Small / 13px輔助說明文字、卡片描述
OverlineBody · Mind · Energy
Components
元件
切換主題即時對照同一套元件在 元元衡 / 山巢 下的樣子。
按鈕 Buttons
On Dark（--c-deeper 深底）
標籤 Tags
預設標籤綠色標籤金色標籤
卡片 Cards
標準卡片 .card
hover 浮起 + 頂部金線。圖示座 .icon-seat 用主題綠。
主題綠標籤Placeholder圖片佔位框 .img-placeholder
素材未到先標記位置
素材未到先標記位置
區塊標題 Section Head
Section Title
置中區塊標題
標題下方自帶漸變金線，lead 文字置中收斂。
Rules
使用守則
- 暖金是唯一高光 — 主要 CTA、金線、hover 高亮。每屏最多一個金色按鈕。
- 主題切換用 .theme-nest — 墨綠是山巢專用；不要在元件裡硬寫山巢色值，深色/綠色一律走 CSS 變數（--c-deep / --c-green…）。
- 深色區塊配暖光暈 — Hero、CTA、Footer 用 warm-glow mixin 帶出參考照的燈光氛圍。
- 素材未到用佔位框 — .img-placeholder 標記「此處放什麼」，先上線、邊營運邊補（企劃書 7.1）。
- 元元衡文案語氣溫暖生活化、山巢沉靜俐落 — 色溫跟著語氣走。