品牌系統 是做什麼的?
一個完整且即用的視覺與編輯規範:色彩、字體、漸層、元件、標誌規則、外部溝通語氣及交付成果結構。適用於所有向客戶、潛在客戶或外部受眾提供的輸出。
這些是預設值。當專案有自訂樣式表時,應先讀取專案樣式表,並取代標記(調色板、字體、標誌):排版規則、語氣和交付結構則保持有效。
總體精神:簡潔、大量留白、高可讀性字體、瑞士與包浩斯美學。
參考檔案:
references/tokens.css和references/tokens.json:以下標記,可直接匯入。references/charte.png(及.svg):在一張圖板上顯示調色板、字體和元件。
1. 調色板
| 角色 | Hex | 備註 |
|---|---|---|
| 標誌顏色 | #295FEC | 僅限標誌使用 |
| 主要色(CTA、連結、強調) | #3D65E8 | 介面、強調文字、按鈕 |
| 淺色全域背景 | #EBEFF7 | 內容幻燈片背景、橫幅 |
| 米白背景(漸層基底) | #F8F9FB | 帶漸層的幻燈片與頁面基底 |
| 表面、卡片 | #FFFFFF | 卡片、區塊、框 |
| 淺色表面區塊 | #F0F2F7 | 網格中的卡片 |
| 主要文字 | #111827 | 正文、深色標題 |
| 次要文字 | #6B7280 | 標籤、說明、元資料 |
| 狀態綠色 | #22C55E | 正向指示器 |
每種媒體僅使用一個強調色等級:主要色。
2. 背景漸層
柔和的徑向漸層,應用於淺色表面和幻燈片。保持細膩:第一眼應不明顯。
background: radial-gradient(
ellipse at 85% 10%,
rgba(180, 215, 245, 0.55) 0%,
rgba(200, 230, 252, 0.25) 35%,
transparent 65%
), #F8F9FB;
/* 對角變化 */
background:
radial-gradient(ellipse at 90% 5%, rgba(165, 210, 245, 0.45) 0%, transparent 50%),
radial-gradient(ellipse at 5% 95%, rgba(165, 210, 245, 0.25) 0%, transparent 45%),
#F8F9FB;
在 PPTX 中:幻燈片背景 #F8F9FB,右上角徑向漸層填滿,起始顏色 #B4D7F5 透明度 55%,漸變至透明。
3. 元件
按鈕
- 主要操作:藥丸形(圓角 999 px)、主要色背景、白色文字、右側箭頭圖示。
- 次要操作:藥丸形、白色背景、細邊框、深色文字、右側箭頭圖示。
卡片
- 白色或淺色表面背景、圓角 16 px、輕微陰影、無明顯邊框。
- 元資料:以次要文字顯示年份,後接點分隔符(例如「2024 · 專案名稱」)。
- 標題 SemiBold、正文 Regular、底部連結以次要文字顯示。
4. 字體
| 用途 | 字體 | 字重 |
|---|---|---|
| 主要標題 | Inter | Black 900 或 ExtraBold 800 |
| 副標題、標籤 | Inter | SemiBold 600 |
| 正文 | Inter | Regular 400 |
| 元資料、說明 | Inter | Regular 400、次要文字 |
首選後備字體:Public Sans。系統後備:Geist、SF Pro、Helvetica Neue。禁止使用襯線或裝飾字體。
5. 圖示
Phosphor Icons 或 Lucide,根據上下文使用 Regular 或 Light 字重。交付成果中禁止使用表情符號。
6. 標誌
專案標誌隨專案提供:此技能不附帶任何標誌檔案。適用於任何標誌的使用規則:
- 幻燈片、有色背景封面: 左上角放置標誌組合,若有白色版本則使用白色版本,符號高度 36 到 40 px。
- 內容幻燈片、淺色背景: 僅使用符號或完整的標誌組合,置於頁尾,高度 20 到 24 px,次要文字,左下角對齊。
- Word 文件: 第一頁頁首左側放置標誌組合,高度 28 到 32 px,勿拉伸。
- 網頁元件: 內聯 SVG 符號,32 px,附帶指向網站的連結。
- 保護邊距: 標誌兩側至少保留符號高度 1 倍的空間,區域內不得有文字或圖形元素。
- 避免: 變形或拉伸標誌、使用非標誌顏色或白色以外的顏色重新著色、使用模糊或低解析度版本、放置在對比度不足的背景上。
7. 外部溝通語氣
- 同儕對等,絕不居高臨下,絕不商業化。
- 精確且具體:真實案例、指標、可觀察機制。
- 易於理解但不失專業。專業性體現在精確度,而非誇大詞彙。
- 同時應用
sober-writing以輔助寫作姿態,若為法文文本則應用francais-parfait。
所有外部文件中禁止使用:「充滿熱情」、「結果導向」、「價值創造者」、自我吹噓的第三人稱傳記、缺乏背景或證明的技能清單、承諾多於說明的廣告語氣。
8. 交付成果結構
商業提案、一頁式文件
- 客戶的背景與挑戰,不先介紹自己。
- 介入的角度與機制。
- 交付成果與里程碑。
- 價格與條款。
- 相關參考案例(類似案例)。
案例研究
- 初始情況:指標、限制、組織。
- 所做的決定及其原因。
- 可衡量的結果。
- 可以做得不同的地方。
專業傳記(80 到 100 字)
- 以角色和區別角度開頭。
- 兩到三個具體證據:客戶、成果、背景。
- 以目前可用性或專業領域結尾。
開發信件:針對收件人的特定主旨;正文 80 到 120 字,包含對其情況的觀察、直接提案和明確的行動呼籲。
Word 文件:頁首放置標誌組合、頁尾包含專案聯絡資訊、正文使用 Inter 或 Public Sans、標題使用 SemiBold、僅使用一個強調色、無裝飾浮誇元素。
9. 與 slides 和 pptx 結合
三項技能、三個角色:
| 技能 | 角色 |
|---|---|
brand-system(此技能) | 識別:調色板、字體、漸層、元件、標誌、語氣 |
slides | 版面配置:十五種版面配置、敘事結構、標題 |
pptx(Anthropic 的技能,需另外安裝) | 技術性 .pptx 檔案生成 |
產生簡報的步驟:
- 讀取
brand-system以設定標記(或使用專案標記取代)。 - 讀取
slides以選擇簡報結構與版面配置,並套用這些標記。 - 讀取
pptx以生成檔案,套用前兩項的值。 - 逐張幻燈片檢查結果(匯出為圖片),並使用
slides進行驗證。
10. 所有交付成果前的檢查
- 定位基於證據,而非形容詞。
- 語氣為同儕對等,而非商業化。
- 標誌遵守使用規則與邊距。
- 標誌顏色與介面強調色不同:#295FEC 用於標誌,#3D65E8 用於介面。
- 僅使用 Inter 或 Public Sans 字體。
- 無表情符號、無長破折號、無空洞流行詞。
- 已套用
sober-writing,若為法文文本則已套用francais-parfait。