anoni.net

品牌素材

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

Wordmark（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（綠，跟個人隱私指引同色，視覺關聯弱可接受）

各站的視覺分工

anoni.net 底下有三個網站，共用同一組 logo 與上面的色票，各自用頁首的顏色區分，讀者從一個網站換到另一個時看得出自己在哪裡。三個網站都只用 --brand-cyan-* 這一個色相當主色，不另外新增色相。

網站 頁首 版面 樣式的位置
anoni.net 白底，logo 加 anoni.net 整頁裝在一張細線外框裡，只用 cyan 一個色相 anoni-net/www 的 static/css/site.css
anoni.net/docs --brand-cyan-800 底、白字 Material for MkDocs，側欄用指南分類色 anoni-net/docs 的 docs/*/stylesheets/extra.css
anoni.net/news --brand-cyan-900 底、白字，墨色調 自己寫的單欄版面，標題用明體 anoni-net/news 的 static/css/news.css

顏色由淺到深是頂層、文件站、新聞導讀，三者並排時一眼分得出來。

頂層網站的細線

頂層網站（首頁、關於、參與、專案、服務等社群頁面）沿用 2026-10 改版前那一頁首頁的樣式：白底、1px 細線、單一色相。之後新增的頁型照這組規格，不要引入色塊或第二個色相。

元素 規格
外框 1px --brand-cyan-500 線，外加 4px --brand-cyan-50 外光暈，圓角 8px，最寬 42rem
分隔線 1px --brand-cyan-100，用在小標題右側延伸的線、列表的上下線與頁尾
填色 只有 --brand-cyan-50 一種，只給文件與新聞導讀兩個專案的卡片
滑過卡片 外圍加一圈 3px、25% 透明度的 --brand-cyan-500
鍵盤焦點 2px --brand-cyan-500 外框，離元素 2px
文字 內文 #1d2b31，次要文字 #52646b，連結 --brand-cyan-800
深色模式 底色 #00202d，線改用 --brand-cyan-600，連結改用 --brand-cyan-200

只在文件站用的顏色

  • 指南分類色（--guide-*）是文件站側欄的導覽識別色，只在文件站出現
  • 結構性次色（--cat-*）的綠、紫、橘也限定在文件站。頂層網站要維持單色，三大主題在頂層用圓形線框圖示區分，不套顏色
  • Material 的介面色（亮色模式頁首改用 --brand-cyan-800 那組）只跟 Material 主題有關

新聞導讀與頂層網站要用到 accent 的時候，照上面的「配色使用守則」，緊急紅只用在緊急情境。

指南分類色、Material 介面色、示意圖用色與社群分享卡的規格寫在文件站的文件站的視覺規範。

不要這樣用

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)

接下來