CELEBREAD 品牌識別系統

VI ── 視覺識別系統（Visual Identity）

artisan country sourdough

本文件定義 Celebread 的視覺規範，供製作輸出物（包裝、印刷品、招牌）與品牌網站使用。 與《02_BI-MI 理念與行為識別》共同構成完整 CIS。

規範依據：品牌原始 logo 與包裝設計檔（CELEBREAD Logo.ai、celebread包裝55x80cm.ai）、 官方 Instagram（@celebread.acs）與門市實景。標註 〔建議延伸〕 者為本系統提案，供品牌方審酌。

目錄

1. 品牌標誌 Logo
2. 標誌變體與應用規則
3. 安全空間・最小尺寸・誤用
4. 品牌色彩 Color
5. 品牌字體 Typography
6. 輔助圖形系統 Graphic System
7. 攝影風格 Photography
8. 版面系統 Layout
9. 應用 A：製作輸出物
10. 應用 B：品牌網站
11. 製作與交付備註

一、品牌標誌 Logo

1.1 標誌構成

Celebread 主標誌（Primary Lockup）由三個元素垂直疊置構成：

核心視覺基因：手工雕刻插畫 ＋ 古典羅馬襯線 ＋ 單色暖墨。 這套組合傳達「歐洲老派・職人手作・低調精緻」──正是門市「像倫敦不為人知的麵包店」的氣質。

1.2 圖徽（Emblem）單獨使用

飛行鴨徽可在品牌已被辨識的情境下單獨使用（如：包裝封緘、社群頭像、緞帶、浮水印、favicon）。 - 鴨徽是品牌資產中最具記憶點的元素，鼓勵在輔助物料中重複運用。 - 單獨使用時須保留雕刻線條的完整細節；過小尺寸請改用簡化版（見 §3.2）。

1.3 標誌正稿一覽（Artwork Standards）

一頁掌握所有標準用法：正色／單色黑／反白／鴨徽、安全空間、最小尺寸、禁止事項。 高解析檔：assets/logo_artwork_sheet.png；可開啟檢視：logo_spec.html。

向量原檔：標誌另提供真向量 SVG（可無限縮放、印刷最佳、預設去背透明）── logo_full.svg（正色）、logo_full_white.svg（反白）、logo_emblem.svg、logo_emblem_white.svg。

二、標誌變體與應用規則

〔建議延伸〕為完整覆蓋各種輸出情境，建議製作下列標準變體並建檔管理。 目前原始檔提供主直式（圖徽＋字標＋標語）；其餘變體建議補齊。

2.1 色彩版本

三、安全空間・最小尺寸・誤用

3.1 安全空間 Clear Space

以字標 CELEBREAD 的字母高度 = X 為基準單位。 標誌四周須保留至少 1X 的淨空，不得有其他文字、圖形或版面邊緣侵入。 建議在重要應用（招牌、包裝正面）保留 1.5X 以上，強化呼吸感。

   ┌───────────────────────────┐
   │        ↕ 1X (min)         │
   │   ┌───────────────────┐   │
   │1X │   [  L O G O  ]   │ 1X│
   │   └───────────────────┘   │
   │        ↕ 1X (min)         │
   └───────────────────────────┘

3.2 最小尺寸 Minimum Size

• 雕刻線條精細，低於最小尺寸時細節會糊；此時請改用簡化圖徽（變體 E）。
• favicon／App icon 一律使用純圖徽（變體 D）或其簡化版。

3.3 標誌誤用 Misuse（一律禁止）

四、品牌色彩 Color

Celebread 的色彩是暖調單色（warm monochrome）：以一個帶紅褐底調的近黑「墨色」印在白／米色紙上。 這份克制本身就是品牌資產──它對應「純粹・剛剛好」的理念，也呼應雕刻版畫的單色傳統。

4.1 主色票

4.2 點綴色（選用）

麥穗金注意：現有品牌資產為純單色，未使用任何彩色。麥穗金是本系統提出的選用延伸， 僅建議用於高質感工藝（燙金禮盒）或數位上的微量強調（如按鈕 hover、節慶徽章）。 主品牌調性請維持暖調單色，避免色彩稀釋品牌的克制感。

4.3 色彩比例（60 / 30 / 10）

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  60%  Linen / Paper White（背景、留白）
■■■■■■■■■■■■■■                30%  Sourdough Ink（標誌、文字、主要視覺）
■■■■■                         10%  Cocoa / Stone / Mist（層次、線條）
                              ＜2% Wheat Gold（選用、點到為止）

留白是 Celebread 視覺的主角。寧可少，不可滿。

4.4 色彩無障礙（WCAG）

Stone、Wheat Gold 對白底對比偏低，不可用於內文；僅限大標、圖示或裝飾。

五、品牌字體 Typography

標誌內文字已轉外框（向量化），原始檔不含可辨識字型名稱。 以下為經視覺比對後的字型系統建議：提供「免費網頁字型」與「授權升級字型」兩級， 並補上中文配對（品牌身處台灣，中英混排是常態）。

5.1 西文字體

5.2 中文字體

配對邏輯：英文 Cinzel / Cormorant（襯線） ↔ 中文 思源宋（宋體）； 英文 Jost（無襯線） ↔ 中文 思源黑（黑體）。襯線配宋、無襯線配黑，氣質一致。

5.3 字級階層 Type Scale（建議，基準 16px / 1.25 比例）

5.4 排版原則

1. 寬字距是品牌語言：標語、小標、按鈕文字採大寫＋寬字距（tracking），延續標誌氣質。
2. 大量留白：行距寬鬆（內文 line-height ≥ 1.7），段落之間留呼吸。
3. 克制字重：以 Regular / Light 為主，靠字級與留白建立層次，少用粗體。
4. 中英混排：英文品牌詞保留原文（CELEBREAD、artisan country sourdough），中文敘事為主。

六、輔助圖形系統 Graphic System

品牌的圖形語言全部源自同一套雕刻插畫，確保高度一致。

6.1 重複圖樣 Patterns（取自包裝原始檔）

圖樣	來源	應用
滿版標誌圖樣	飛行鴨徽＋CELEBREAD 字標，斜向交錯平鋪	包裝紙、提袋內裡、官網區塊背景、禮盒
鴨頭虛線圖樣	鴨頭叼麥穗＋斜向虛線點，小單元密鋪	紙袋、貼紙、襯紙、次要包材、網頁裝飾紋理

圖樣使用原則 - 單色印刷（主墨色於白／米底，或反白於深底）。 - 兩款圖樣不混用於同一物件：主圖樣用於主要包材，鴨頭圖樣用於次要包材，建立層次。 - 數位上作為背景時，降低不透明度（5–12%），避免干擾前景內容。

6.2 雕刻插畫風格 Engraving Illustration

• 品牌專屬插畫一律採銅版雕刻 / 蝕刻線條風格：細密平行線、交叉影線（cross-hatching）、手工感。
• 主題環繞麥穗、鴨／禽鳥、麵包、麥田、烘焙器具等鄉村烘焙意象。
• 〔建議延伸〕可逐步擴充一套雕刻插畫資產（不同麵包款式、節慶主題），統一風格、單色輸出。

6.3 線條與裝飾元素

• 細單線分隔（Mist #DAD9D8，0.5–1px）。
• 斜向虛線點（取自鴨頭圖樣）可作為裝飾節奏元素。
• 避免圓角過大、陰影、漸層等與雕刻語彙衝突的現代裝飾。

七、攝影風格 Photography

對應 Instagram（@celebread.acs）的既有調性：乾淨、質感、聚焦於麵包本身。

風格關鍵字：artisan, rustic, warm, quiet, tactile, European.

八、版面系統 Layout

九、應用 A：製作輸出物（Production）

對應你的需求「製作輸出物」。以下為各品項的視覺規格與製作建議。

9.1 包裝系統 Packaging

9.2 事務用品 Stationery

9.3 菜單與價目（Menu）

• 採宋體標題＋黑體內文；大量留白；單色印刷。
• 每款麵包可附一句工法說明（呼應 BI 的「教育多於推銷」）。
• 線上點餐頁（如 iCHEF）視覺與實體一致：米白底、單色、雕刻插畫。

9.4 門市與招牌 Signage

9.5 印刷工藝建議（提升質感）

• 壓凹（Deboss）/ 燙金：名片、禮盒、封緘的鴨徽。
• 未塗佈紙（Uncoated）：呼應手作、自然、可食的質感；避免亮面塑膠感。
• 單色印刷：多數物料單色（主墨色）即可，降低成本又強化品牌一致性。

十、應用 B：品牌網站（Website）

採「前後端分離」架構：前端專注品牌與購物體驗，後端統一處理訂單、金流與 ERP； 以金流背景通知（Notify）為唯一付款真相，ERP 以 Adapter 模式串接（可替換、可降級）。 設計 token 仍沿用 web/ 目錄（見 §11），與框架無關。

10.1 系統架構（前後端分離）

選型理由 - Astro / SvelteKit：輸出輕量、預設高效能、SEO 友善，契合「留白即奢華、麵包是主角」的內容型品牌站；購物車等互動以 islands／Svelte 元件局部處理。 - FastAPI：型別嚴謹、原生非同步，易與金流 webhook、ERP 整合；前後端以 API 契約解耦，可獨立部署與擴充。 - Tailwind 仍可沿用（Astro／SvelteKit 皆原生支援），既有設計 token 不需更動。

10.2 金流原則：Notify 為唯一付款真相

• 唯一真相：付款成功與否，只以金流的背景通知（Server Notify／Webhook）為準。
• 前端 Return／ReturnURL 僅用於使用者體驗導引（顯示「處理中／已完成」），不得作為出貨或對帳依據。
• 後端對 Notify 必處理：驗章（CheckMacValue／簽章）→ 冪等（同筆通知重複不重算）→ 金額與狀態比對 → 寫入訂單真相 → 回應金流 1|OK。
• 使用者已被導回成功頁、但 Notify 尚未到達時：訂單維持 pending，待 Notify 或主動查詢補齊，絕不先出貨。

10.3 ERP 串接：Adapter 模式（可替換・可降級）

• 以 Adapter 介面封裝所有 ERP 操作（建立銷貨單、查庫存、同步商品…）；正航 Chanjet 為其中一個實作。
• 可替換：未來更換 ERP 或介接方式（API／中間檔／RPA），只需替換 Adapter 實作，上層業務邏輯不動。
• 可降級：ERP 不可用時自動降級——訂單先寫入本地佇列／暫存並標記「待同步」，待 ERP 恢復後補償重送；必要時轉人工，不阻斷顧客下單。

OrderService ──→ ErpAdapter（介面）
                   ├─ ChanjetAdapter （正航：API／中間檔）
                   ├─ QueueFallback  （降級：寫佇列、標記待同步）
                   └─ （FutureErpAdapter）

10.4 網站設計原則

1. 留白即奢華：大量留白、慢節奏捲動、單欄為主的編輯式版面。
2. 麵包是主角：高品質攝影大圖；文字克制、退居輔助。
3. 單色暖調：背景 Linen／Paper White，文字 Sourdough Ink，幾乎不用彩色。
4. 雕刻紋理：區塊背景可用低透明度的滿版圖樣增添質感。
5. 古典 × 現代：Cinzel 大標的古典感 ＋ 大量留白的現代排版。

10.5 設計 Token（摘要，完整見 web/brand-tokens.css）

/* 色彩 */
--cb-ink:        #231815;  /* 主文字、標誌 */
--cb-cocoa:      #4A3B33;  /* 次要文字 */
--cb-stone:      #8C8480;  /* 輔助文字 */
--cb-mist:       #DAD9D8;  /* 分隔線、邊框 */
--cb-linen:      #F5F0E7;  /* 主背景 */
--cb-paper:      #FFFFFF;  /* 卡片背景 */
--cb-wheat:      #B8893B;  /* 選用點綴 */

/* 字體 */
--cb-font-display: "Cinzel", "Noto Serif TC", serif;
--cb-font-head:    "Cormorant Garamond", "Noto Serif TC", serif;
--cb-font-body:    "Jost", "Noto Sans TC", system-ui, sans-serif;

/* 圓角・陰影：克制 */
--cb-radius: 2px;          /* 近乎直角，呼應古典 */
--cb-shadow: 0 1px 0 rgba(35,24,21,.06);  /* 極淺，幾乎只用分隔線 */

10.6 頁面結構建議（資訊架構）

首頁 Home
 ├─ Hero：主標誌 ╱ 標語 ╱ 一張麵包剖面大圖
 ├─ 品牌理念（節錄品牌故事，連結 BI/MI）
 ├─ 招牌麵包（農夫 ╱ 核桃 ╱ 核桃蔓越莓 ╱ 墨西哥辣椒起司）
 ├─ 工藝（麥子・水・鹽 ╱ 24h 低溫發酵 ╱ 自養酵母）
 └─ 門市資訊 ╱ 線上點餐入口
關於 About：創辦人故事、剛剛好哲學
產品 Breads：款式、成分、工法一句話
門市 Store：地址、營業、實景、限量說明
聯絡 / 訂購：線上點餐、社群連結

10.7 元件方向 Components

10.8 動態與互動

• 克制、緩慢的淡入（fade / slow reveal），呼應「慢工藝」。
• 避免彈跳、炫目轉場、自動輪播的促銷感。
• 圖片以慢速 parallax 或靜態為主。

十一、製作與交付備註

11.1 字型授權提醒

• Cinzel、Cormorant Garamond、Jost、思源宋體 / 思源黑體（Noto） 皆為 SIL Open Font License，可免費商用、可內嵌網站與印刷。
• Trajan Pro、justfont 金萱等為商業授權，採用前須購買對應授權。

11.2 檔案管理建議

• 標誌請建置並保存：向量原檔（.ai / .svg）＋去背 PNG＋反白版＋單色版。
• 圖樣輸出為可平鋪的 SVG / 高解析 PNG＋印刷用 CMYK PDF。
• 色彩於印刷端請以 Pantone 打樣校正（暖黑與麥穗金尤須上機確認）：
• 主墨色 #231815 ≈ Pantone Black 7 C（暖黑，需打樣）。
• 麥穗金 #B8893B ≈ Pantone 7510 C / 1245 C（需打樣）。

11.3 一致性檢查（交付前自檢）

• [ ] 標誌是否保留足夠安全空間（≥1X）？
• [ ] 色彩是否維持暖調單色、麥穗金未被濫用？
• [ ] 字體是否依「襯線配宋、無襯線配黑」配對？
• [ ] 留白是否足夠、版面是否克制？
• [ ] 兩款圖樣是否未混用於同一物件？
• [ ] 攝影是否暖中性柔光、無高飽和濾鏡？

十二、應用視覺範例（Mockups）

以下為品牌識別套用於各類輸出物與數位場景的示意渲染圖，由品牌資產合成，供製作與提案參考。 （示意用途；實際印刷請依各品項規格、紙材與打樣調整。原始檔置於 assets/mockups/。）

12.1 事務用品

名片 — 正面：亞麻米底＋鴨徽＋字標＋職稱；背面：墨色底＋滿版圖樣＋反白鴨徽。建議厚磅未塗佈紙，鴨徽可壓凹或燙金。

12.2 包裝系統

紙袋 — 鴨頭虛線圖樣滿版，中置標誌貼標；棉麻提繩。

封緘貼紙 — 圓形鴨徽封緘，貼於牛皮紙包裝與棉繩之上，呼應「像精品配飾」的包裝哲學。

吊牌 — 品名（宋體）＋成分＋發酵時間；麻繩穿孔，可隨麵包或禮盒附掛。

12.3 門市與數位

門市招牌 — 白底立式招牌＋墨色「安和店」門牌，呼應歐洲老派、低調精緻的空間氣質。

品牌網站首頁 — 留白為主、標誌居中、品牌語＋雙 CTA（線上訂購／關於我們），對應 §10 網站規範。

菜單 — 宋體品名、虛線引導對價、每款附一句工法說明、每日限量註記。

社群貼文 — 方版引言卡：鴨徽＋品牌金句＋ celebrate + bread，作為 IG 視覺模板。

本資料夾資產索引

延伸閱讀：品牌理念、語氣與行為規範詳見 《02_BI-MI 理念與行為識別》。

Celebread Brand Identity System — VI　|　最後更新：2026-06-03