跳轉到

品牌素材

anoni.net 的 logo 由三個六角形組成，呼應「節點網絡」與「多層級觀測」的意象，從 Material hexagon-multiple-outline 圖示衍生定色而成。三個六角形排列成上、中、下，分別對應社群關注的「概念」、「工具」與「在地脈絡」三層閱讀路徑。

製作活動文宣、SNS 卡片、簡報、印刷品時，請依背景色與情境從下方三個變體取用，避免另自定色或變形。

V3 cyan tonal（主視覺）

三個六角形分別用 cyan-300、cyan-500、cyan-700 上色，營造節點層次感。預設使用情境：白底、淺底背景、文件站一般展示、簡報內頁。

白底

64
32
16

暗底

64
32
16

cyan-500 底

64
32
16

cyan-900 底

64
32
16

下載 logo-tonal.svg

V3 mono white（品牌色塊上的露出）

純白色版本，用在品牌色（cyan-500、cyan-900）或深色背景塊上時對比最高。文件站 header logo（藍色 nav 底）就是用這個版本，OG 圖、SNS 卡片、活動 banner 在 cyan 背景上也用它。

白底（不建議）

64
32
16

暗底

64
32
16

cyan-500 底

64
32
16

cyan-900 底

64
32
16

下載 logo-white.svg

V3 mono black（印刷與單色場合）

純黑色版本，用在印刷品、傳真、單色 stencil 等不能上色的場合。線上幾乎不會用到，先收進素材庫備用。

白底

64
32
16

暗底（不建議）

64
32
16

cyan-500 底（不建議）

64
32
16

cyan-900 底（不建議）

64
32
16

下載 logo-black.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 用途，那是印刷專用版本
  • 別自行調整六角形的排列、間距、圓角，影響識別性
  • 別把單個六角形抽出來當其他用途，三個是一組

色彩

  • 別任意挑 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（避免重複），放本機或社群素材庫即可。

接下來