The Moto Hotel — Color Story
從目前的官網、社群封面、實體招牌、LOGO 採樣彙整出的色彩系統草稿。目的：給妏娟與安凱對照確認品牌語調手冊待決定項目，包括 §10.2 官網色 vs LOGO / 招牌色、色彩系統 Social TBD、LOGO 真色 vs 社群採樣色，以及 §10.3 字型方向。
LOGO 真實色（高解析度採樣）
LOGO 本身就是雙色設計：盾型外框 + "the" + "OTO" 為香檳金漸層（#C09050 → #C0A070 → #F0E0D0），"M" 字母為純朱紅 #E02020。前一版 storybook 用低解析度檔採樣到 #B98251 是錯的，以這版為準。
LOGO 三種變體
原版漸層雙色辨識度高但限制多。為了實際應用在不同底色與照片上，定義單色純黑與單色純白兩個輔助變體。三者並非取代關係，而是依情境選用。
變體 × 底色 配對矩陣（含 WCAG 對比度檢查）
每行一種變體，每列一種底色情境。✓ 達標、✗ 不達標、✓✓ 最佳。UI 文字需 ≥ 4.5；圖形元素需 ≥ 3.0。
✗ 禁用
✗ 隱形
✗ 紅吃掉
✗ 對比不穩
✓✓ 最佳
✓✓ 最佳
✓ 可用
✗ 不夠跳
⚠ 紋理干擾
✗ 隱形
✗ 隱形
✓ 可用
✓✓ 最佳
⚠ 紋理干擾
✓✓ 最佳
情境決策表
不確定用哪個變體時，照下表選即可。
雜亂照片 — Holding Shape 解法
實景照片 80% 會有紋理變化、色塊互相干擾。光換變體解決不了，必須加 holding shape（底卡 / 遮罩 / 陰影）把 LOGO 與照片隔開。下方刻意把 LOGO 放在畫作高彩度區，左下角是「不加任何處理」的對照組。
Holding Shape 選用準則
| 技法 | 何時用 | 優缺 |
|---|---|---|
| A 暗底卡 | 深色照片、高紋理、品牌識別優先 | 最強識別度；視覺較重 |
| B 亮底卡 | 淺色照片、想呼應品牌米色感 | 柔和、適合 lifestyle 風 |
| C 漸層遮罩 | 需要在 LOGO 旁放標題或 CTA 文字 | 兼顧 LOGO 與文字可讀；不適合純粹品牌露出 |
| D Drop Shadow | 想保留照片完整、LOGO 只當小角落浮水印 | 最低侵入；高紋理照片仍會吃掉 LOGO，效果有限 |
色彩系統 Primary / Identity
Primary 是識別與強調，不是全部畫面的主色。朱紅 / 金黃負責品牌記憶點；官網大面積視覺由 Web/UI neutral 與 Photo / Material range 承擔。
官網通用性驗證 6 pages + 145 photos
官網 6 頁 / 145 張照片抽樣後，色彩系統可以通用，但必須以四層理解：Primary 是識別與強調；Web/UI 控制頁面骨架；Photo / Material 控制素材氛圍；Social TBD 保留現況但不升規格。
色彩系統 Social TBD
下列色彩在現行社群封面 / 標籤中經常出現，但採樣為 spot pixel（非全套封面中位數驗證）。此欄目暫不入規格，需要對全套素材重新採樣後才能升為 Primary 或淘汰。製作素材時可參考但不應寫入新規格。
色彩系統 Secondary / Photo / Material
輔助色分兩種：Web/UI token（按鈕、邊框、文字）與 Photo / Material range（木、石材、牆面、暖光）。#B98251 是舊低解析度誤採樣，不列入 active token；暖木 / 金褐改用材質範圍管理。
官網現況 vs 色票對照
motohotel.jp 多頁實際截圖。夜景的暖橙黃光源 + 黑底 + 白色襯線標題是「金黃 + 沉黑 + 暖米」的具象化；分館頁則證明暖米、深綠、重點橘與照片材質色可以跨頁通用。
社群封面現況採樣
小紅書/IG Reels 封面共通格式：紅色標籤 + 白色襯線粗體 + 實景照。各館實景已自然帶有沙綠、暖木、金褐等品牌色。
新封面構圖示意（用 LOGO 真實雙色）
把 LOGO 真實的「朱紅 #E02020 + 香檳金 #C0A070」套到你 reference 的對角斜切構圖。三種變體：經典紅金、金米柔和、米色襯金 LOGO。每張都直接放上 LOGO 圖檔讓你驗證搭配。
實景照片 + 單色 LOGO（社群最常用情境）
社群封面 80% 場景是「實景照片 + 角落或中央壓 LOGO」。這時不能用漸層版（會被照片紋理吃掉），要用純白或純黑單色版。下方四個範例分別示範中文 / 日文 / 英文 / 中文（促銷）四種文案語境，對應品牌語調手冊 §11 的多語版本。
關鍵差異:LOGO 真色 vs 社群採樣色 待決定
同一個品牌兩套紅、兩套金。社群目前用的偏暗,LOGO 本色更鮮亮。此段只作決策對照，統一前先標為待決定。
禁用組合（WCAG 對比度不足）
採樣 LOGO 紅 #DF2928 與 LOGO 金最暗端 #C09050 對下列底色，均低於 WCAG 3:1 門檻。不論社群、印刷、官網都不要直接這樣放。
建議組合
字型方向 待決定
品牌語調手冊 §10.3 目前列出：標題 Sprat（編輯感襯線體）、內文 ApfelGrotezk。字型尚未確認授權與實際檔案，下方只以 Georgia / system fallback 模擬視覺。
顏色關鍵字（給攝影、文案、選材用）
視覺感受
色彩具象
光線（呼應品牌手冊 §10.1）
§10.2 修法建議（可直接貼入 brand-voice-guide.md）
四層架構：LOGO/實體招牌色 vs Web/Digital UI vs Photo/Material range vs 社群暫不入規格。基於 Codex 重新採樣驗證（朱紅實測 #DF2928 / 金漸層中位 #C8A473）與官網 6 頁 / 145 張照片抽樣。
### 10.2 品牌色彩 品牌色彩分四層管理。Primary 是識別與強調,不是全部畫面的主色。 LOGO/印刷/實體招牌色與 Web/digital UI palette 分開, 照片與材質色作為 Photo / Material range 管理, 社群素材維持現行採樣風格但暫不入規格。 #### A. LOGO / 印刷 / 實體招牌 | 名稱 | 色碼 | 用途 | |---------|----------------------------|-----------------------------| | 朱紅 | #E02020 (spec) | LOGO 「M」字母純色 | | | #DF2928 (measured median) | 印刷 / 數位渲染容差參考 | | 香檳金漸層 | #C09050 → #C0A070 → #F0E0D0 | 盾型外框、"the"、"OTO" | | 金 mid | #C0A070 | 不能用漸層時的單色取代 | **LOGO 三種變體:** | 變體 | 用途 | |----------|----------------------------------------------------| | A. 漸層雙色 | 印刷品、官網 hero、招牌、影片片頭、品牌單獨露出 | | B. 純黑單色 | 淺色底、米底、淺色照片、金底、報表 / 文件 | | C. 純白反白 | 深色底、酒紅底、深色 / 雜亂照片、影片浮水印、社群實景照首選 | **對比度規則 (WCAG):** - 漸層版禁止直接放在酒紅 / 金 / 米色底色上 - 漸層版只用於沉黑底或單獨展示 - 社群封面壓在實景照片時,必須使用純白或純黑單色版,不要用漸層 #### B. Web / Digital UI (維持現行,來源:既有 §10.2 / motohotel.jp CSS) | 名稱 | 色碼 | 用途 | |------|---------|-------------------| | 暖米 | #F4F2EE | 背景、疊加層 | | 沉黑 | #1A1A1A | 文字、頁尾 | | 主文字 | #2B2B2B | 內文 | | 重點橘 | #D98E45 | 高亮、活動狀態、CTA | | 深綠 | #3E4B3E | 次要強調 | | 邊框 | #D6D2C6 | 分隔線 | | 淺灰 | #6F6F6F | 次要文字 | #### C. Photo / Material range (來源:官網 6 頁 / 145 張照片抽樣,用於攝影、素材選圖、社群底圖判斷) | 名稱 | 色碼 / 範圍 | 用途 | |-----------|---------------------------|-----------------------------| | 暖木 / 金褐 | #C89B5E / #C0A070 範圍 | 木地板、窗框、暖光、照片主氛圍 | | 奶米高光 | #E8D5B0 | 自然光、柔和高光、暖色布料 | | 沙綠 | #828A78 | 牆面、沙發、低彩度背景 | | 深藍綠 | #40514F | 大廳石材、深色牆面、沉穩背景 | | 暖灰 | #BFB8A9 | 建築外觀、石材、城市中性色 | 注意:#B98251 不列為色票或 token;暖木 / 金褐只以照片材質範圍管理。 #### D. 社群素材常見色(暫不入規格) 下列色彩在現行 IG / 小紅書封面標籤中經常出現,但尚未通過全套驗證, 不建議直接寫入規格。製作素材時可採樣後個案使用: - #800000 / #9A2A2A 範圍 (label 標籤底) - #C89B5E / #C0A070 範圍 (暖金強調) 如要將上述任一色入規格,需重新對全套封面採樣後再決定。