品牌素材¶
anoni.net 的 logo 由三個六角形組成，呼應「節點網路」與「多層級觀測」的意象，從 Material hexagon-multiple-outline 圖示衍生定色而成。三個六角形排列成上、中、下，分別對應社群關注的「概念」、「工具」與「在地脈絡」三層閱讀路徑。
製作活動文宣、SNS 卡片、簡報、印刷品時，請依背景色與情境從下方三個變體取用，避免另自定色或變形。
V3 cyan tonal（主視覺）¶
三個六角形分別用 cyan-300、cyan-500、cyan-700 上色，營造節點層次感。預設使用情境：白底、淺底背景、文件站一般展示、簡報內頁。
白底
643216暗底
643216cyan-500 底
643216cyan-900 底
643216V3 mono white（品牌色塊上的露出）¶
純白色版本，用在品牌色（cyan-500、cyan-900）或深色背景塊上時對比最高。文件站 header logo（藍色 nav 底）就是用這個版本，OG 圖、SNS 卡片、活動 banner 在 cyan 背景上也用它。
白底（不建議）
643216暗底
643216cyan-500 底
643216cyan-900 底
643216V3 mono black（印刷與單色場合）¶
純黑色版本，用在印刷品、傳真、單色 stencil 等不能上色的場合。線上幾乎不會用到，先收進素材庫備用。
白底
643216暗底（不建議）
643216cyan-500 底（不建議）
643216cyan-900 底（不建議）
643216Wordmark（logo 加文字）¶
上面三個變體只有圖案，沒有社群名稱。需要讓人一眼看到「anoni.net」的場合改用 wordmark，例如簡報頁首、名片、活動背板、海報、易拉展。圖案版留給空間很小、或旁邊已經有社群名稱的地方，例如 favicon、聊天室頭像、投影片頁角。
wordmark 的文字已經轉成路徑，開啟的裝置有沒有裝字型都長一樣，也不會因為缺字而換成別的字型。
六種版型¶
| 檔名 | 版型 | 建議場合 |
|---|---|---|
logo-wordmark-* |
橫式，logo 加 anoni.net | 預設版本。簡報頁首、網站 header、名片 |
logo-wordmark-zh-* |
橫式加中文副標「匿名網路社群」 | 中文場合，需要讓人知道社群中文名時 |
logo-wordmark-en-* |
橫式加英文副標 Anonymity Network Community | 國際場合，例如 Global Gathering、ETHTaipei |
logo-wordmark-fullname-* |
橫式單行「匿名網路社群 anoni.net」 | 中文語境的長條橫幅、活動背板頂部 |
logo-wordmark-stack-* |
直式堆疊，logo 在上、字在下 | 海報、易拉展、展板主視覺 |
logo-wordmark-stack-zh-* |
直式堆疊加中文副標 | 同上，中文場合 |
每種版型都有 tonal、white、black 三個配色，選用規則跟上面的圖案版一樣。
橫式四種，cyan tonal 在白底
logo-wordmark
logo-wordmark-zh
logo-wordmark-en
logo-wordmark-fullname
同樣四種的 mono white，放在 cyan-900 底上
logo-wordmark-white
logo-wordmark-zh-white
logo-wordmark-en-white
logo-wordmark-fullname-white
直式堆疊，海報與易拉展用
logo-wordmark-stack
logo-wordmark-stack-zh
stack-zh mono white
stack mono white
幾何比例與淨空區¶
比例固定，換尺寸時整份等比縮放就好，不要單獨調某一邊。
- 橫式：logo 高度是「anoni.net」字樣視覺高度的 1.35 倍，兩者間距是 logo 寬度的 0.40 倍
- 直式：logo 高度是字級的 1.90 倍，字樣對齊 logo 中線
- 淨空區：四周留 logo 高度的 0.25 倍。SVG 的 viewBox 已經含這段留白，取用時不要再往內裁
字樣是 Public Sans SemiBold，中文副標是 Noto Sans TC Medium，跟文件站英文版與正體中文版的內文字型同一套。.net 用 cyan-700，跟 logo 最下面那個六角形同色，單色版本則整組同一個顏色。
最小尺寸¶
低於這個高度文字會糊掉，改用只有圖案的版本。
| 版型 | 最小高度 |
|---|---|
無副標（logo-wordmark-*、logo-wordmark-fullname-*） |
18 px |
中文副標（-zh-） |
32 px |
英文副標（-en-） |
40 px |
印刷品換算：300 dpi 下 18 px 大約是 1.5 mm，實務上橫式版印到 8 mm 高以上都很安全。
下載¶
| 版型 | cyan tonal | mono white | mono black |
|---|---|---|---|
| 橫式 | SVG | SVG | SVG |
| 橫式加中文副標 | SVG | SVG | SVG |
| 橫式加英文副標 | SVG | SVG | SVG |
| 橫式單行全名 | SVG | SVG | SVG |
| 直式堆疊 | SVG | SVG | SVG |
| 直式堆疊加中文副標 | SVG | SVG | SVG |
配色 Token¶
製作衍生視覺時請對齊以下色票。文件站 extra.css 已將下方 token 寫成 CSS 變數，內文用 var(--brand-cyan-500) 即可取用，不要 inline hex code。
品牌主色 cyan（9 階）¶
| Token | Hex | 用途 |
|---|---|---|
--brand-cyan-50 |
#e0f4ff |
最淡背景、卡片底色、admonition 底 |
--brand-cyan-100 |
#b3e3ff |
淺背景、選取狀態 |
--brand-cyan-200 |
#80d1ff |
分隔線、邊框、disabled 文字 |
--brand-cyan-300 |
#4dbfff |
次要連結、tag 邊框、logo 上層六角 |
--brand-cyan-400 |
#26b3ff |
hover 狀態 |
--brand-cyan-500 |
#00aeff |
品牌主色 BASE、logo 中層六角 |
--brand-cyan-600 |
#009ee6 |
主色 hover / active、公告「新增」tag |
--brand-cyan-700 |
#0089bf |
主色文字（淺背景）、logo 下層六角 |
--brand-cyan-800 |
#006d99 |
強調文字、深色版本 |
--brand-cyan-900 |
#003e57 |
暗色模式背景對比 |
Accent（CTA 與緊急）¶
| Token | Hex | 用途 |
|---|---|---|
--accent-action |
#ef6c00 |
CTA 按鈕、活動公告（COSCUP、工作坊） |
--accent-emergency |
#d32f2f |
緊急求救、安全警告 |
結構性次色（2026 三大主題，限分類標籤）¶
| Token | Hex | 用途 |
|---|---|---|
--cat-privacy |
#4caf50 |
個人隱私指引 |
--cat-relay |
#7b1fa2 |
Tor Relay 校園建立 |
--cat-payments |
#ef6c00 |
匿名支付（跟 --accent-action 同色） |
中性色¶
| Token | Hex | 用途 |
|---|---|---|
--neutral-text |
（Material default） | 一般文字 |
--neutral-muted |
#546e7a |
次要文字、背景角色（如首頁「我們關注的參與者」卡片） |
--neutral-border |
#cdcdcd |
圖片、卡片邊框 |
Logo 專用¶
| 顏色 | Hex | 用途 |
|---|---|---|
| 純白 | #ffffff |
mono white logo 填色（限品牌色塊上） |
| 純黑 | #000000 |
mono black logo 填色（限印刷） |
配色使用守則¶
主色 cyan
- 品牌一致性露出（hero、logo 旁、主要 CTA 邊框）
- 主要連結、文件站 nav highlight
Accent action（橘 #ef6c00）
- 「立即報名」、「訂閱」、「加入」這類使用者要採取行動的按鈕
- 活動公告（COSCUP、工作坊）
Accent emergency（紅 #d32f2f）
- 緊急求救頁的入口
- 安全警告（帳號被盜、跟蹤騷擾應對）
- 不要用在「這個按鈕請點」等非緊急情境
結構性次色（綠 / 紫 / 橘）
- 三大主題對應的卡片圖示色
- 分類 tag、章節區隔的視覺標記
- 不要用在一般 CTA 或裝飾
公告 tag（首頁、blog 公告區的 inline tag）
新增→--brand-cyan-600（cyan 系強調）活動→--accent-action（橘）更新→--cat-privacy（綠，跟個人隱私指引同色，視覺關聯弱可接受）
不要這樣用¶
Logo
- 別在過飽和的螢光色或多色漸層背景上使用，會讓六角形邊界糊掉
- 別跟 Tor、OONI、EFF 等合作對象的官方 logo 緊鄰並排，視覺會打架
- 別在白底場合用 mono white、別在 cyan 底用 cyan tonal，對比會消失
- 不要把 mono black 拿來當主視覺、Web 用途，那是印刷專用版本
- 別自行調整六角形的排列、間距、圓角，影響識別性
- 不要把單個六角形抽出來當其他用途，三個是一組
- 別自己重排 wordmark 裡 logo 與文字的間距或大小，要改就整份等比縮放
- 別把 wordmark 的副標換成活動名稱或其他字串，需要那種組合請另外排版，把 wordmark 當一個元件擺進去
- 帶副標的 wordmark 低於最小尺寸就換成無副標版本，副標糊掉比沒有副標更難看
色彩
- 別任意挑 Material 預設色（brown、lime、indigo）做裝飾
- 別用多色漸層作為背景（除非是經規劃的 hero 視覺實驗）
- 別用過飽和的色（純紅
#ff0000、純綠#00ff00） - 別 inline
style="color: #...;"，請改用 CSS 變數var(--brand-cyan-500)
用 drawio 貢獻技術圖示¶
文件站的所有技術圖示（流程圖、架構圖、時間軸）都用 drawio 製作，存成 .drawio.svg 雙重格式檔。這個格式同時是：
- 合法的 SVG：瀏覽器、mkdocs、IPFS 鏡像、Onion 鏡像都直接渲染
- drawio 可重編的 source：將來任何人想改顏色、改文字、加元素，可在 drawio Desktop 雙擊打開重新編輯
關鍵差別在於 drawio.svg 在 <svg> 根標籤上多了一個 content="..." 屬性，裡面是 escape 過的 drawio mxfile XML。drawio 會讀這個 XML 重建原本的結構化編輯體驗。沒有它，drawio 只能把 SVG 視為一堆獨立的 path / rect / text 散件，幾乎沒辦法重編。
如何儲存才會有 embedded XML¶
drawio Desktop 的 Save 對話框有兩個關鍵欄位：
| 欄位 | 設定 |
|---|---|
| Filename | xxx.drawio.svg（雙副檔名，業界慣例） |
| Format dropdown | Editable Vector Image (.drawio.svg) |
Format dropdown 才是決定性的設定。如果 Filename 取 xxx.drawio.svg 但 Format 選了「SVG (.svg)」，會得到一個檔名長得像 .drawio.svg、但實際沒 XML 的純 SVG。最容易踩的雷。
drawio Desktop 預設 format 通常是 .drawio（純 XML，瀏覽器看不到圖），新建檔時記得手動切到「Editable Vector Image」。或在 Preferences 改 Default save format 永久預設 .drawio.svg。
不要用 Export¶
drawio 有兩個寫檔動作：
- File → Save（Cmd+S）：寫回原檔，保留 XML（前提是 format 是
.drawio.svg） - File → Export As → SVG：產生新的純 SVG，剝掉 XML
進 repo 的圖示只用 Save、不要用 Export。Export As 是給「需要丟給 Photoshop 或其他 SVG viewer」這類場合用，不會放回文件站。
如何驗證有 XML¶
存完之後，終端機執行：
grep -c mxfile your-diagram.drawio.svg
預期出現 1 或更多。如果是 0，這個檔沒 embedded XML、不能重編，請開回 drawio Desktop 重存（記得 format dropdown 選對）。
配色一致性：drawio palette 預設¶
新圖示用本頁上方的 brand cyan 9 階色票。建議在 drawio Desktop Extras → Configuration 貼上下方 JSON，把品牌色設為 picker 預設：
{
"presetColors": [
"00aeff", "009ee6", "0089bf", "006d99", "003e57",
"4dbfff", "26b3ff", "80d1ff", "b3e3ff", "e0f4ff",
"ef6c00", "d32f2f", "4caf50", "7b1fa2", "546e7a", "cdcdcd"
],
"defaultColors": [
"00aeff", "009ee6", "ef6c00", "d32f2f",
"4caf50", "7b1fa2", "546e7a", "ffffff"
]
}
設一次永久存入，畫圖時 picker 直接挑品牌色，不會誤用 Material 預設色。
套到 markdown 文章¶
新圖示存到 docs/zh-TW/assets/images/<name>.drawio.svg（或對應語系），在 markdown 引用：
<figure markdown="span">
<img class="brand-frame" src="../../assets/images/<name>.drawio.svg" alt="圖示說明">
</figure>
.brand-frame 是 anoni.net 圖示的 utility class（cyan 邊框 + 軟陰影），所有技術圖示都套這個保持視覺一致。相對路徑 ../../assets/images/... 是從 basics/、tools/、scenarios/、advanced/、community/ 這層深度引用的標準寫法。
純 SVG / PNG export 的場合¶
如果某張圖也要做 SNS 卡片、印刷品、外部投影片用（不需要重編能力），再多 Export 一份純 SVG 或 PNG 即可。這份 export 不要進 repo（避免重複），放本機或社群素材庫即可。
接下來¶
- 貢獻者百科：整體貢獻流程、PR 規範、翻譯流程
- 社群自架服務：Matrix、Cryptpad、Etherpad、SearXNG、Send、Formbricks 的入口與帳號需求
- 2026 年度路線圖：三大主題與時程