品牌識別系統

說明

品牌識別系統定義享哥內容產品的 CIS 第一版，包含品牌架構、Logo 使用、色彩、字體、圖像風格與跨載體套用規則。

這份文件補足 Design System 中原本偏資訊架構、缺少視覺識別規範的部分。第一版目標不是一次做出完整品牌手冊，而是建立 Blog、Course、Notion 講義、互動式教學網站、PDF 講義與 AI Playbook 都能共用的視覺基準。

閱讀方式

人類先看色票、品牌卡與標注區塊，快速掌握視覺方向；AI Agent 則保留表格、規則、Checklist 與 Prompt Example 作為精確規格。

Why

享哥接下來會同時經營個人品牌、IDEA Academy、線上課程、Notion 講義、互動式教學網站與 AI Playbook。如果沒有 CIS 規範，每個載體會各自長出不同顏色、Logo、字體與視覺語氣，學員會不容易建立一致印象，AI Agent 也很難穩定產出符合品牌的素材。

CIS 的目的不是讓畫面變花，而是讓所有內容一看就知道屬於同一套教學系統。

Brand Architecture

目前品牌架構分三層：

Personal Brand

徐享（享哥）

信任來源、講師身份、顧問專業。視覺優先使用人像、姓名與專業標籤。

講師信任 AI 應用規劃

Course Brand

IDEA Academy

課程、學習路徑與作品成果。視覺優先使用燈泡、IDEA 橘與成果感。

課程品牌作品成果

Method System

AI Playbook

人類與 AI Agent 共用的 source of truth。視覺優先使用文件、索引與流程感。

文件規範可執行

Layer	Brand	Role	Visual Priority
個人品牌	徐享（享哥）	信任來源、講師身份、顧問專業	人像、姓名、專業標籤
課程品牌	IDEA Academy	線上課程、學習路徑、作品成果	系統化、作品感、學習階段
方法論文件	AI Playbook	內部規範、Agent source of truth	文件感、索引感、可執行

使用原則：

對外招生與課程銷售優先使用 IDEA Academy。
講師介紹、顧問合作與社群信任優先使用享哥個人品牌。
文件規範、Prompt、Workflow 與 Agent 讀取優先使用 AI Playbook。
三者可以同頁出現，但只能有一個主品牌，避免視覺焦點分裂。

Logo System

第一版先定義 Logo 使用邏輯與品牌關係。IDEA Academy 已有第一版識別資產可參考，享哥個人品牌 Logo 則仍在概念設計階段，不應直接拿 AI 產圖當正式商標。

Logo 分工原則

IDEA Academy 用燈泡承接課程品牌；享哥個人品牌用「享」字變形承接講師與顧問識別；AI Playbook 用文件與流程感承接規範入口。

Primary Wordmark

主要標誌與文字標：

徐享 Sean Hsu
IDEA Academy
AI Playbook

使用情境：

Blog、簡報封面、講師介紹：優先 徐享 Sean Hsu。
Course、Notion 講義、互動網站：優先 IDEA Academy。
文件網站、Agent 規範、內部流程：優先 AI Playbook。

Brand Mark Direction

Route A

享 × 系統節點

享哥個人品牌主 icon 候選

IDEA Academy

燈泡 × 電路節點

課程品牌與學習成果

AI Playbook

文件 × 索引 × 流程

人類與 AI 的規範入口

Brand	Mark Direction	Notes
徐享 Sean Hsu	`享` 字變形 + 系統節點 / 對話提示	代表 AI 應用規劃、教學陪跑與可執行工作流
IDEA Academy	燈泡 + 電路節點	代表把想法變作品、把作品變系統
AI Playbook	文件 / 索引 / 流程符號	代表人類與 AI Agent 共用的規範入口

享哥個人品牌不應直接沿用 IDEA Academy 的燈泡主標，避免個人品牌與課程品牌混淆。享哥 Logo 可以借用 IDEA 橘作為品牌連結，但圖形語意應更偏「規劃、系統、對話、顧問」。

享哥個人品牌 Logo 的細部設計規格應參考 brand/xiang-logo-design-brief.md。

Lockup

建議組合：

IDEA Academy
把想法變作品，把作品變系統

徐享 Sean Hsu
AI 應用規劃師

AI Playbook
Human + Agent Working Manual

Logo Rules

Logo 周圍至少保留一個字高的留白。
不要把三個品牌標誌並排成同等權重。
不要任意拉伸、旋轉或加陰影。
不要把 Logo 放在低對比背景上。
享哥個人品牌在正式向量檔完成前，優先使用乾淨文字標，不臨時做複雜圖案。
AI 生成圖只能作為概念方向，不可直接作為正式商標或對外 Logo 檔。

Color System

第一版色彩以「IDEA 橘、深色科技底、淺色文件底、成功綠、資訊藍、警示橘」為主。這與目前 IDEA Academy Logo 與課程網站視覺一致，也保留課程成果、AI 工作系統與教學文件的延展性。

Core Palette

IDEA Orange idea-orange #F59E0B Logo、CTA、重點

Brand Dark brand-dark #111827 深色主視覺

Neutral 50 neutral-50 #F8FAFC 文件與講義底色

Success Green success-green #10B981 成果與完成

Info Blue info-blue #3882F6 流程與導航

Warning Orange warning-orange #F97316 注意與限制

Neutral 900 neutral-900 #0F172A 主要文字

Brand Red brand-red #EF4444 高風險警示

Token	Hex	Role	Usage
`idea-orange`	`#F59E0B`	主品牌色	IDEA Academy Logo、CTA、重點、課程價值
`brand-dark`	`#111827`	深色科技底	Hero、Footer、深色主視覺、影片封面
`neutral-50`	`#F8FAFC`	淺色背景	文件、Notion、講義頁
`success-green`	`#10B981`	成功與完成	學員成果、完成狀態、可執行流程
`info-blue`	`#3882F6`	資訊與導航	學習地圖、目前步驟、輔助連結
`warning-orange`	`#F97316`	警示與注意	風險提醒、限制、重要注意事項
`neutral-900`	`#0F172A`	主要文字	淺色模式正文
`brand-red`	`#EF4444`	高風險警示	個資、安全、法律、禁止事項

Surface Mapping

Surface	Background	Accent	Notes
Blog	淺色或深色皆可	IDEA Orange / Success Green	人物信任與專業文章優先
Course Site	`brand-dark` / `neutral-50`	IDEA Orange / Info Blue	建立 AI 工作系統與成果感
Notion 講義	Notion 原生底色	IDEA Orange / Warning Orange / Red	少量 callout，不追求重視覺
互動式教學網站	Light workspace 或 Dark tool	Info Blue / Success Green	以操作狀態與流程清楚為主
PDF 講義	White / Deep Dark	IDEA Orange / Info Blue	投影與列印都要清楚
AI Playbook	Starlight default	Info Blue / Success Green	文件可讀性優先

Color Rules

重點

IDEA 橘不是裝飾色，而是品牌主行動色。資訊藍與成功綠用來說明流程與狀態，紅色只留給高風險警示。

一個畫面只選一個主色與一個強調色。
IDEA 橘是主品牌色，只用於 Logo、主要 CTA、課程價值與重要重點。
紅色只用於高風險、錯誤、禁止事項與個資安全提醒。
資訊藍與成功綠用於流程、狀態與學習地圖，不要取代主品牌色。
Notion 與文件頁不要過度使用深色背景，避免閱讀疲勞。
深色背景上文字對比必須優先於品牌氣氛。

Typography

第一版字體以跨平台穩定與繁體中文可讀性為優先。

Recommended Stack

font-family:
  Inter,
  ui-sans-serif,
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  "Noto Sans TC",
  sans-serif;

Typography Roles

Role	Usage	Rule
Display	Course hero、PDF 封面	只用於封面或第一屏
Heading	文件 H1 / H2、課程段落	清楚分層，不使用過度字距
Body	長文、講義、說明	行距充足，避免太小
Mono	Prompt、程式碼、檔名	只用於可複製內容

Type Rules

不用過度書法感或裝飾字體。
課程與講義標題可以有力量，但內文要安靜易讀。
Prompt 區塊必須用 monospace 或明確 code block。
行動版按鈕文字不可擠壓或換行失控。

Image and Graphic Style

享哥內容產品的圖像風格應偏「教學實戰」與「AI 工作系統」，不要只做抽象科技背景。

建議方向：

真實講師人像：建立信任。
工具畫面與流程圖：建立可操作感。
AI 工作台截圖：展示學員會怎麼用。
深色科技主視覺：用於 Course hero 或大型課程封面。
淺色流程圖：用於 PDF、Notion、Playbook。

避免方向：

過度抽象的 AI 光球、背景線條或無意義科技圖。
每頁都使用不同風格插畫。
讓人物照被大量 icon 或文字遮擋。
只用工具 Logo 堆疊，不呈現實際學習成果。

Component Identity

常用元件應有一致視覺角色：

Primary Action

CTA Button

使用 IDEA Orange，只給最重要的下一步。

Workflow

Step / Status

使用 Info Blue 與 Success Green，讓流程、目前步驟、完成狀態容易掃讀。

Safety

Warning Callout

使用 Brand Red 或 Warning Orange，固定對應個資、安全、法律與限制。

Component	Visual Role	Notes
CTA Button	IDEA Orange primary	只給主要行動
Secondary Button	Neutral outline	用於次要連結
Level Badge	IDEA Orange / Info Blue	對應 IDEA Academy 學習階段
Workflow Step	Success Green / Info Blue	對應流程、系統、Automation
Prompt Block	Neutral + Mono	以可複製為主
Warning Callout	Red	個資、安全、法律風險
Success / Output Card	Success Green or IDEA Orange	學員成果、完成狀態

Do

應該強化

先判斷主品牌。
固定使用色票角色。
用人像、工具畫面、流程圖建立可信度。

應該避免

三個品牌同權重並排。
讓享哥 Logo 與 IDEA 燈泡混淆。
用過度科技裝飾取代內容可讀性。

先判斷該頁主品牌是享哥、IDEA Academy 或 AI Playbook。
使用固定色票，不要每個素材重新選色。
IDEA Academy 優先使用既有燈泡識別，享哥個人品牌優先使用文字標與 享 字概念。
用人像、工具畫面、流程圖與成果截圖建立可信度。
讓 Notion、互動網站與 PDF 使用同一套色彩角色。
安全提醒固定使用紅色系，不要混用其他狀態色。

Don’t

不要把 AI Playbook 做成享哥個人官網。
不要同時放三個同權重 Logo。
不要讓享哥 Logo 與 IDEA Academy Logo 都使用同一個燈泡主符號。
不要用太多漸層、光效或科技裝飾。
不要在尚未確定 Logo 前臨時創造複雜標誌。
不要讓色彩壓過內容可讀性。
不要把深色科技風套到所有文件與講義。

Checklist

Prompt Example

請依品牌識別系統，為下列課程主題產生一份視覺方向建議。

課程主題：
{{course_topic}}

主品牌：
{{brand_layer}}

輸出：
- 主品牌與副品牌
- 建議色彩 token
- Logo 使用方式
- 字體層級
- 圖像風格
- 元件視覺角色
- 不應使用的視覺方向