#24221f紙墨黑 Ink
--ink主要文字、實心按鈕底、暗版區塊。
不要用純黑 #000，會太硬、跟暖底打架。
建議搭配文字 #fffaf1 · 15.26 AAA
AI Creative OS
一座分好類的 CIS 素材庫：色彩、字體、尺度、動態、封面、模板各成一區，token 可複製，而且做成了 AI 讀得懂的格式。
規範12
元件18
動畫9
模板6
Brand Files
品牌基礎
色彩、字體、語氣、排版、AI 預設反例。
Motion Recipes
動畫庫
格子選取、資料夾翻開、流程圖、隧道前進。
Next Components
元件檔案
每個效果都拆成 React component，之後可以複製到不同頁面。
01 · 色彩系統 · Colors
每個顏色都有名字、數值，和一條不要這樣用的規則
對比度全部用 WCAG 2.1 相對亮度公式實際計算，不是估的。看到 Fail 就是真的不能那樣配。
品牌色 Brand
#f7f2e9暖紙白 Paper
--paper網站主背景。像乾淨桌面，不刺眼也不冷。
不要用純白 #fff 當大面積底，會失去溫度。
建議搭配文字 #24221f · 14.23 AAA
#ffb43f琥珀指令 Amber
--amber只給主要動作：Create、Copy、Run、Export，以及 active 底線。
⚠️ 絕對不要在琥珀上放白字（僅 1.77，不合格）。一律用墨字。
建議搭配文字 #24221f · 8.95 AAA
#e5622e赤陶生成 Terra
--terraAI 生成中／處理中狀態，封面平塗強色。
不要拿來當大面積底或內文色（對紙底僅 3.08）。
建議搭配文字 #ffffff · 3.43 AA Large
暖中性灰階 Neutral（不是純灰，帶暖調才不會跟紙底打架）
50
1.04:1
#faf7f1卡片底1.04:1
100
1.07:1
#f0ebe1區塊底1.07:1
200
1.21:1
#e3ddd1分隔線1.21:1
300
1.49:1
#cfc8ba停用邊框1.49:1
400
2.35:1
#a89f90placeholder2.35:1
500
3.44:1
#8a8175圖示 / 大字註解3.44:1
600
4.87:1
#6f6961次要內文 ✅4.87:1
700
6.94:1
#57524b內文6.94:1
800
10.61:1
#3a3733小標10.61:1
900
14.23:1
#24221f主文字 / ink14.23:1
語意色 Semantic（全部降到暖色調，不用現成的鮮紅鮮綠鮮藍）
成功 Success
--success · 苔綠完成、通過驗收、已複製。
對紙底 4.95 AA · 白字在上 5.52 AA
資訊 Info
--info · 藍墨說明、連結、進行中。
對紙底 6.76 AA · 白字在上 7.54 AAA
警示 Warning
--warning · 土黃需要注意但不阻擋。
對紙底 5.01 AA · 白字在上 5.58 AA
錯誤 Danger
--danger · 磚紅失敗、刪除、不可用範例。
對紙底 6.05 AA · 白字在上 6.74 AA
對比度實測 · 常用組合
| 組合 | 比值 | 等級 | 判讀 |
|---|---|---|---|
| A墨字 / 紙底 | 14.23:1 | AAA | 內文主組合，最安全 |
| A次要文字 gray-600 / 紙底 | 4.87:1 | AA | 內文可用 |
| A舊 muted #77716a / 紙底 | 4.32:1 | AA Large | ⚠️ 差一點，已改用 gray-600 |
| A墨字 / 琥珀底 | 8.95:1 | AAA | ✅ 琥珀按鈕的正解 |
| A白字 / 琥珀底 | 1.77:1 | Fail | ❌ 絕對不要這樣配 |
| A紙白字 / 墨底 | 15.87:1 | AAA | 暗版區塊主組合 |
| A白字 / 赤陶底 | 3.43:1 | AA Large | 只能用在 18px+ 大字 |
:root{
/* 品牌 */
--ink:#24221f; /* 主要文字、實心按鈕底 */
--paper:#f7f2e9; /* 網站主背景 */
--paper-strong:#fffaf1;
--amber:#ffb43f; /* 主要動作。⚠️ 只配墨字，不配白字 */
--terra:#e5622e; /* AI 生成中狀態、封面強色 */
/* 暖中性灰階 */
--gray-50:#faf7f1; --gray-100:#f0ebe1; --gray-200:#e3ddd1;
--gray-300:#cfc8ba; --gray-400:#a89f90; --gray-500:#8a8175;
--gray-600:#6f6961; --gray-700:#57524b; --gray-800:#3a3733;
--gray-900:#24221f;
/* 語意色（暖色調，不用鮮紅鮮綠鮮藍）*/
--success:#5b6f45; /* 苔綠 */
--info:#41566f; /* 藍墨 */
--warning:#8a600e; /* 土黃 */
--danger:#9c3d2a; /* 磚紅 */
/* 別名 */
--muted:var(--gray-600); /* 次要內文，4.87 AA */
--line:rgba(36,34,31,.12);
}字體系統
品牌主要三套字：饅頭黑體當大標題、粉圓當內文、新蒂金鐘體只給金句／引言；扁桃體字缺較多，只列為少量重點的備選。點下面的樣式，上面的大字範例就換一種呈現。
Type Specimen
AI 教學品牌，要親切也要有工具感。
目前樣式 饅頭黑大標 · MantouSans 饅頭黑體 · clamp 64–120px · 字距 -0.01em
03 · 尺度系統 · Scale
字多大、留多少白、圓幾度、陰影多深，都有名字
層級不靠 font-weight（三套字都是單一字重），而是換字體 + 換字級。間距一律 4 的倍數。
字級階層 Type Scale
--text-displayclamp(56–122px) · 行距 0.98 · 饅頭黑
AI Creative OS
Hero 主視覺，一頁一次
--text-h1clamp(34–68px) · 行距 1.1 · 饅頭黑
色彩系統
區塊大標
--text-h2clamp(28–46px) · 行距 1.1 · 饅頭黑
品牌色 Brand
次標
--text-h3clamp(20–26px) · 行距 1.3 · 粉圓 700
琥珀指令色
小標、卡片標題
--text-quoteclamp(28–56px) · 行距 1.35 · 金鐘體
把想法，養成一套系統。
金句、引言，一頁最多一次
--text-lead18px · 行距 1.75 · 粉圓
每個顏色都說清楚它什麼時候用。
區塊導言
--text-body16px · 行距 1.75 · 粉圓
這是內文，長段落讀起來不累。
內文
--text-small14px · 行距 1.6 · 粉圓
註解文字，補充但不搶戲。
註解、輔助說明
--text-label12px · 行距 1.3 · mono
01 · COLORS
eyebrow、標籤，字距 0.28em
間距 Spacing（4px 基準）
--space-14px · 圖示與文字之間
--space-28px · 標籤內距
--space-312px · 小元件間隙
--space-416px · 卡片內距（小）
--space-524px · 卡片內距（標準）
--space-632px · 卡片之間
--space-748px · 區塊內分組
--space-864px · 區塊之間
--space-996px · 大區塊上下留白
圓角 Radius
--radius-sm
6px
標籤、小方塊
--radius-md
10px
按鈕、輸入框
--radius-lg
16px
卡片（標準）
--radius-xl
22px
大面板、區塊容器
--radius-pill
999px
藥丸按鈕、玻璃選單
陰影 Shadow（全部帶暖調，不用純黑）
--shadow-card
文件卡、浮起卡片
--shadow-soft
大面板、舞台
--shadow-glass
玻璃藥丸選單（三層）
:root{
/* 字級 */
--text-display:clamp(56px,9vw,122px); --text-h1:clamp(34px,5vw,68px);
--text-h2:clamp(28px,3.4vw,46px); --text-h3:clamp(20px,1.6vw,26px);
--text-quote:clamp(28px,4vw,56px); --text-lead:18px;
--text-body:16px; --text-small:14px; --text-label:12px;
/* 行距 */
--leading-display:.98; --leading-heading:1.1; --leading-quote:1.35;
--leading-body:1.75; --leading-tight:1.3;
/* 字距（中文一律 0，不硬擠）*/
--tracking-tight:-.01em; --tracking-normal:0; --tracking-label:.28em;
/* 間距 4px 基準 */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
/* 圓角 */
--radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
/* 陰影（全部帶暖調，不用純黑）*/
--shadow-card:0 18px 44px rgba(70,49,24,.16);
--shadow-soft:0 24px 80px rgba(70,49,24,.16);
--shadow-glass:0 0 0 1px rgba(10,10,10,.06),inset 0 1px 0 rgba(255,255,255,.7),0 10px 30px rgba(0,0,0,.07);
}流程圖動畫是素材庫的說明引擎
它解釋一個需求如何流過品牌規則、動畫模式、介面元件，最後變成可發布素材。
你決定方向，開口交辦
超級助理拆解任務 · 指派員工 · 驗收成果
內容企劃排程 · 發佈 · 追蹤社群成效
剪輯師產出長片與短影音
分析師彙總成效與回寫
知識管理員素材歸位與索引
FlowchartReveal
路徑亮起：讓人看到素材正往哪裡走。
NodeWake
節點發光：流程走到哪站，那站就醒來。
SignalPulse
琥珀訊號沿線流動：把抽象處理流程變成看得到的東西。
走廊前進，適合什麼場景？
這個「往消失點前進」的方格走廊，適合用在需要速度感與探索感的地方：素材庫／資源頁的入口動畫、載入或轉場的過場、產品「一路往前看下去」的引導段落。 它張力強，所以只當亮點用一次，別鋪滿整頁；靜態或內文區塊不要用。
素材庫入口載入／轉場探索引導單次亮點
06 · 編輯封面系統 · Covers
封面不是配圖，是把標題的張力畫出來
方法借自 Every 的 editorial concept cover：先從標題抽隱喻，再選一個人文物件與一個軟體物件， 用同一套材質語言（雕版半色調＋單一平塗色）組成。換主題不換材質，所以整批看起來是同一個品牌。
STEP 1抽標題關鍵字最具體的名詞或動詞
STEP 2找出張力最意外的矛盾是什麼
STEP 3選人文符號人的世界的物件
STEP 4選軟體符號機器世界的物件
STEP 5定一個強色承載情緒，不是品牌色
當 AI 幫你寫完，人還剩下什麼判斷？
一個人，也能開一間公司。
成本正在燒，而你還沒設上限。
留下來的，是願意被驗收的流程。
工具會變，判斷不會。
【固定規格 · 每次原封不動帶入】 16:9，surreal editorial collage； 主體用「雕版印刷 / halftone 網點質感的黑白」去背處理； 只用一個平塗飽和色；背景是單純平面色、乾淨無漸層無光暈； 高對比、印刷顆粒感、剪貼邊緣；單一主體置中偏右、填滿畫面；語意物件 ≤3。 嚴禁：AI glow、發光邊框、neural network 背景、通用機器人臉、 模糊漸層、任何文字或字母。 【每篇填空】 概念（標題的內在張力）：________ 人文符號（人的世界）：________ 軟體符號（機器的世界）：________ 平塗強色：#E5622E 赤陶 / #FFB43F 琥珀 / #1E4BD7 藍 / #0C7866 綠 背景：#A8A49B 暖灰 / #F7F2E9 暖米白 【需要放標題時額外加】 主體只放右半邊，左側 45% 保持純背景色留白，不可有物件跨入。
07 · 場景模板 · Templates
同一組 token，換一層皮膚就換一個場景
間距、字級、色票命名、版面骨架都共用；差別在版面結構與材質。所以刊物風與工作區風看起來很不一樣， 卻仍然是同一個設計系統長出來的。
AI Creative OSISSUE 01 · 2026
FIG. 1
報頭線＋期數、襯線大標、窄欄長文、無圓角。圖版是從標題抽隱喻生成：「員工／上工」→ 打卡鐘＋一排待命的琥珀色打卡卡片（卡片其實是螢幕模組）＝ 機器被放進人類的出勤制度裡。
08 · 品牌素材 · Assets
每包素材都有分類，不是抓一個放一個
參考成熟 CIS 的架構：色彩、字體、組件、視覺模式、對照、模板各自成庫，可搜尋、可預覽、可複製。
色彩 · 字體
色票、字級、字體組合、語氣規則、反 AI 預設。
組件
主選單、卡片、按鈕、標籤、編輯器、程式碼區塊。
視覺 · 動態
資料夾翻開、流程圖、走廊前進、格子選取 recipe。
模板 · 案例
AI app landing page、課程頁、工具頁、資源庫。
09 · 給 AI 用 · For Agents
怎麼讓 AI 知道要照這套規範做？
設計系統寫得再好，AI 不讀就沒用。這裡提供三種接法，從最快到最自動；規範本身也做成了機器可讀格式，放在 cis.ai-hua.org。
WAY 01
貼 System Prompt
適用：ChatGPT / Claude / Midjourney 等對話工具
把右邊那段規範貼進對話開頭或自訂指令。最直接，不需要任何設定。
WAY 02
給網址讓它自己讀
適用：有讀網頁能力的 AI（Claude、ChatGPT search、Perplexity）
把 cis.ai-hua.org/llms.txt（8 條速讀）或 /cis.json（完整機器可讀規範）的網址丟給它。
WAY 03
放進專案讓它自動讀
適用：Claude Code / Cursor / Copilot 等 coding agent
repo 根目錄的 AGENTS.md 已寫好指向規範的規則，agent 開專案就會讀到。
你在為「AI Creative OS」這個品牌做設計產出。嚴格遵守以下規範。 【底色與文字】 - 背景用暖米白 #f7f2e9（卡片 #fffaf1），不要純白 #fff - 文字用墨黑 #24221f，不要純黑 #000 - 次要文字用 #6f6961（更淺會不達 AA） 【琥珀規則 · 最常被違反】 - 主要動作色琥珀 #ffb43f - 琥珀底上「絕對不能放白字」（對比僅 1.77，不合格） - 琥珀底一律配墨字 #24221f（對比 8.95 AAA） 【字體】 - 大標題：MantouSans 饅頭黑體 - 內文：jf open 粉圓 huninn - 金句／引言：新蒂金鐘體（只用在金句，不用於介面或內文） - 刊物風（every.to 調性）的標題改用粉圓，不用饅頭黑 - 三套字都是單一字重 → 不要調 font-weight，層級靠「換字體 + 換字級」 - 全站 font-synthesis: none - 中文標題用 line-break:strict + text-wrap:balance + overflow-wrap:break-word （不要用 word-break:keep-all，長句會衝出視窗） 【字級】display clamp(56-122px) / h1 clamp(34-68px) / h2 clamp(28-46px) / h3 clamp(20-26px) / lead 18px / body 16px / small 14px / label 12px 【行距】標題 1.1、內文 1.75、金句 1.35 【間距】4px 倍數：4/8/12/16/24/32/48/64/96 【圓角】6 / 10 / 16 / 22 / 999 【陰影】一律帶暖棕調，不用純黑陰影 【語意色 · 全部暖色調】 成功 #5b6f45 苔綠 / 資訊 #41566f 藍墨 / 警示 #8a600e 土黃 / 錯誤 #9c3d2a 磚紅 禁止鮮紅鮮綠鮮藍。這套系統裡沒有紫色。 【動態】easing cubic-bezier(0.33, 1, 0.68, 1)；必須支援 prefers-reduced-motion； 動畫要解釋流程，不是裝飾。 【封面（如果要做圖）】 先從「標題」抽關鍵字 → 找張力 → 選一個人文符號 + 一個軟體符號 → 定一個平塗強色。 材質固定：16:9、雕版半色調黑白主體、單一平塗飽和色、乾淨平面底、印刷顆粒感、語意物件≤3。 【反 AI 預設 · 絕對不要】 generic AI glow、發光邊框、neural network 背景、通用機器人臉、 無意義漸層球、純裝飾 UI 截圖框、冷色 SaaS 三欄編輯器介面。