SERVICE 01
VR 實景網站
360 環景實拍，把真實空間一比一搬進瀏覽器。美術館、廟宇、商家空間都能線上參訪。
深入了解 →DESIGN SYSTEM
影月官網設計系統
視覺方向為「月夜展廳」，技術性段落借用「實境藍圖」的語彙。所有版型只能使用這裡的變數， 這是首頁與三個服務頁視覺一致的唯一保證。右上角可切換深淺色與字級，兩種模式共用全部尺寸與間距。
01 - COLOR
色彩
對比度為實測值。內文 14.6:1 遠高於 WCAG AAA 門檻(7.0), 刻意不用純白——純白在深底上會產生光暈，反而更難讀。
表面
--ink-900 頁面底 --ink-800 卡片 / 浮起表面 --ink-700 hover 表面 --line 分隔線 --line-2 強調邊框 文字
--text-hi 標題 - 16.9:1 --text 內文 - 14.6:1 --text-2 次要說明 - 9.5:1 --text-3 弱化標註 - 6.3:1 重點
--moon 品牌主色 / 連結 --moon-2 hover / 強調字 --scan 技術色 - 工程週報、數據 --warn 提醒 02 - TYPE
字型與字級
全站只用 Noto Sans TC 一種字體，沿用舊站的選擇，不搭配襯線字體。 沒有字體對比可用，階層完全靠字級、字重、字距、顏色建立—— 這是瑞士派的做法，執行得精準會比雙字體更俐落，但字級跳距必須拉得更開。
1,794子集字元數
563 KB兩個字重合計
2請求數（快取一年）
20–60Google Fonts 切片方式的請求數
把真實空間 搬進不打烊的線上展場
3D 虛擬展
展期結束，展覽不結束
服務流程
一次製作，永續展出
影月以 360 環景實拍與 3D 建模，把展覽、空間與工程現場數位化。
文化部青年村落文化行動計畫|2026
SITE LOG - WEEK 07
四條不可違反的規則
- 深色底上絕不使用 300 字重——細筆畫會發光暈開，散光與老花讀者最受影響
- 只有 400 與 700 兩個字重。900 未自架，瀏覽器合成的粗體筆畫會糊
- 內文不低於 17px、卡片內文不低於 16px;
--fs-xs只給 mono 標籤 - 行長最多 32 個中文字(
--measure)，行距 1.9
字型子集的維護規則
子集是建置時從實際內容產生的——內容有什麼字，子集就有什麼字，所以不會缺字。
但這表示新增或修改內容後必須重新產生字型(npm run fonts),
否則新出現的字會退回系統字型顯示。這一步會納入部署流程自動執行。
03 - COMPONENTS
元件
按鈕
全部達到 44px 最小觸控高度，鍵盤 Tab 可見焦點框。
服務卡（首頁與服務頁共用）
SERVICE 02
3D 虛擬展
3D 建模打造的虛擬展廳，展品可旋轉檢視，展期結束後線上永續展出。
深入了解 →SERVICE 03
工程週報
每週回到同一個機位拍攝 360 環景，業主登入即可線上環顧工地，進度一目瞭然。
深入了解 →數據
132展出中專案
72MP環景解析度
15週工程紀錄
04 - BRAND
品牌標誌
頁首用既有的公司 logo，不另創標誌。原檔是黑字白底 JPEG，已產出去背的深淺兩個版本； 行動版與 favicon 用裁切出的圓形月亮圖記。
logo-light.png 
logo-dark.png 
logo-light-mark.png 待辦：取得原始向量檔
目前的去背版本是從 1000×200 的 JPEG 還原的，放大時邊緣會不夠銳利。 向設計端要到 AI 或 SVG 原檔後，可換成向量版：更清晰、檔案更小、還能直接用 CSS 換色。
05 - SPACE
間距與圓角
--sp-2 --sp-3 --sp-4 --sp-5 --sp-6 --sp-7 --sp-8 --sp-9 圓角刻意克制(3 / 6 / 10px)——展廳與工地都不是圓潤的東西。