品牌素材

製作活動文宣、社群分享卡、簡報與印刷品時，從這一頁取用 logo、wordmark 與色票，讓 anoni.net 底下的網站與各種文宣維持一致的視覺識別。依背景色與用途選擇下方的變體，不要自行改色或變形。

匿名網路社群 anoni.net 的 logo 由三個六角形組成，從 Material 的 hexagon-multiple-outline 圖示改繪並定色，代表節點組成的網路與多層級的觀測。三個六角形由上而下對應三層閱讀路徑：概念、工具與在地脈絡。

V3 cyan tonal（主視覺）

三個六角形由上而下分別用 cyan-300、cyan-500、cyan-700 上色，以深淺表現節點的層次。白底與淺色背景、文件站的一般頁面與簡報內頁都預設用這個版本。

下載 logo-tonal.svg

V3 mono white（品牌色塊與深色底）

純白色版本，放在品牌色（cyan-500、cyan-900）或深色色塊上時對比最高。文件站頁首藍底上的 logo 用的就是這個版本，cyan 底的 OG 圖、社群分享卡與活動 banner 也用它。

下載 logo-white.svg

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

純黑色版本，用在印刷品、傳真、單色 stencil 這類無法上色的場合。網頁上幾乎用不到，收在素材庫備用。

下載 logo-black.svg

Wordmark（logo 加文字）

上面三個變體只有圖案，沒有社群名稱。需要讓人一眼讀到 anoni.net 的場合改用 wordmark，例如簡報頁首、名片、活動背板、海報與易拉展。圖案版留給空間很小或旁邊已有社群名稱的位置，例如 favicon、聊天室頭像與投影片頁角。

wordmark 的文字已經轉成路徑，不論開啟的裝置有沒有安裝字型，顯示結果都相同，也不會因為缺字而換成其他字型。

六種版型

檔名	版型	建議場合
logo-wordmark-*	橫式，logo 加 anoni.net	預設版本，用在簡報頁首、網站頁首與名片
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 在白底

同樣四種的 mono white，放在 cyan-900 底上

直式堆疊，海報與易拉展用

幾何比例與淨空區

比例固定，改變尺寸時整份等比縮放即可，不要單獨調整某一邊。

• 橫式：logo 高度是 anoni.net 字樣視覺高度的 1.35 倍，兩者間距是 logo 寬度的 0.40 倍
• 直式：logo 高度是字級的 1.90 倍，字樣對齊 logo 中線
• 淨空區：四周留 logo 高度的 0.25 倍。SVG 的 viewBox 已包含這段留白，取用時不要再往內裁切

字樣用 Public Sans SemiBold，中文副標用 Noto Sans TC Medium，與文件站英文版、正體中文版社群分享卡的字型相同。cyan tonal 版的 .net 用 cyan-700，與 logo 最下方的六角形同色，單色版本整組只用一個顏色。

最小尺寸

低於下表的高度時文字會模糊。帶副標的版本改用無副標的版本，無副標的版本改用只有圖案的 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) 取用，不要直接寫 hex 色碼。

品牌主色 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	次要文字、公告的 更新 tag
--neutral-border	#cdcdcd	圖片、卡片邊框

網頁上的深淺版本

品牌的綠與橘在白底上的對比不到 4.5:1，用在文字、細線或白字按鈕的底色都不夠清楚。社群首頁採用下表的版本，文件站與其他網頁也照這張表。--accent-action 是白字按鈕的底色，所以淺色與深色模式相同。印刷、簡報與大面積色塊仍用上方的品牌原色。

Token	品牌原色	淺色模式	深色模式
--accent-action	#ef6c00	#c25400	#c25400
--accent-emergency	#d32f2f	#d32f2f	#e57373
--cat-privacy	#4caf50	#2e7d32	#81c784
--cat-relay	#7b1fa2	#7b1fa2	#ce93d8
--cat-payments	#ef6c00	#c25400	#ffa040

Logo 專用

顏色	Hex	用途
純白	#ffffff	mono white logo 填色（限品牌色塊上）
純黑	#000000	mono black logo 填色（限印刷）

配色使用守則

主色 cyan

• 需要呈現品牌一致性的位置，例如 hero、logo 旁與主要 CTA 的邊框
• 主要連結、文件站導覽列的 highlight

Accent action（橘 #ef6c00）

• 讀者要採取行動的按鈕，例如「立即報名」、「訂閱」、「加入」
• 活動公告（COSCUP、工作坊）

Accent emergency（紅 #d32f2f）

• 緊急求救頁的入口
• 安全警告（帳號被盜、跟蹤騷擾應對）
• 不用在非緊急的情境，例如一般的「請點按鈕」提示

結構性次色（綠、紫、橘）

• 三大主題對應的卡片圖示色，社群首頁另外擴充成八類（見「圖示的分類色」）
• 分類 tag、章節區隔的視覺標記
• 不用在一般 CTA 或裝飾

公告 tag（社群動態列表、首頁「最新動態」與文件站 blog 公告區的 inline tag）

• 新增 用 --brand-cyan-600（cyan 系的強調色），標示專案或服務上線
• 活動 用 --accent-action（橘），標示活動公告與回顧
• 更新 用 --neutral-muted（灰），標示工作進度。原本與個人隱私指引同用綠色，由於主網站同時有主題卡片，讀者容易誤以為兩者相關。2026-10 起改成灰色，文件站目前仍是綠色，之後調整配色時一併修改
• 社群的觀點、立場與經驗不加標籤
• 網頁上的小字用「網頁上的深淺版本」那張表的色值，新增 的小字用 --brand-cyan-800

各站的視覺分工

anoni.net 底下有四個網站，共用同一組 logo 與上方的色票。各站以頁首的顏色區分，讀者換到另一個網站時可以看出自己的位置。四個網站都只用 --brand-cyan-* 一個色相當主色，不另外新增色相。

網站	頁首	版面	樣式的位置
anoni.net	白底，logo 加 anoni.net	全站對齊同一組左右邊界，文件頁右側放本頁內容。結構用中性灰階，cyan 留給互動與識別	anoni-net/www 的 static/css/site.css
anoni.net/gears	--brand-cyan-50 底、深色字，logo 加「檔案工作台」與 Gears 標記，深色模式改用比背景亮一階的藍灰	自行開發的工具介面，左側是暫存區，工具的圖示圈用分類色	anoni-net/gears 的 src/styles.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

頁首顏色由淺到深依序是頂層網站、檔案工作台、文件站、新聞導讀，並排時一眼就能分辨。

社群首頁的配色與版面

頂層網站（首頁、關於、參與、專案、服務等社群頁面）的品牌色只有 cyan，依用途分工。2026-10 以前 cyan 同時用在標題、導言、連結與所有邊框，讀者分不出哪裡可以點、哪裡是區塊的邊界，看久了也累，之後改成下表的分工。

用途	顏色	用在哪裡
結構	中性灰階 --n-50 到 --n-300	分隔線、卡片與截圖的邊框，提示框、摺疊區、程式碼、表頭與頁尾的底色
層級	標題 #13232a，內文 #1d2b31，次要文字 #52646b	標題、小標題、導言
互動	連結 --brand-cyan-800，目前位置 --brand-cyan-600，焦點與滑過 --brand-cyan-500	連結、線框按鈕、導覽列的目前位置、鍵盤焦點、滑過的卡片
識別	cyan tonal 的 logo 與 --brand-cyan-700	頁首與首頁主視覺
分類與資料	結構性次色、圖示的分類色、公告 tag、cyan 九階	圖示圈與議程標籤、動態標籤、觀測圖表

中性灰階從 --neutral-muted（#546e7a）那一系延伸，帶一點藍，跟 cyan 放在一起不顯得髒。區塊之間靠淡底色區分，少用線框。

Token	淺色模式	深色模式	用途
--n-50	#f3f6f7	#082b3a	提示框、摺疊區、程式碼、表頭與頁尾的底色
--n-100	#e3e9ec	#133847	分隔線
--n-200	#cdd6da	#234757	卡片與截圖的邊框
--n-300	#a7b5bb	#3c6070	待辦清單的勾選框、步驟的編號圈

元素	規格
外框	沒有框線，頁首、內容與頁尾在每一頁對齊同一組左右邊界，最寬 58.5rem
文件頁	文章、指南、活動、動態與觀測資料，內容欄 42rem 加右側 13rem 的「本頁內容」。段落、表格與圖表填滿內容欄，文字不另外限制寬度
目錄頁	首頁與各區入口用滿整個外框，卡片與列表在桌機排成兩到三欄
標題層級	h1 1.8rem、h2 1.25rem、h3 1.05rem。h2 右側接一條延伸到內容欄邊緣的 --n-100 細線，開頭 2.5rem 用識別色 --brand-cyan-700（深色模式 --brand-cyan-300）加粗成 3px，跟卡片框線與列表分隔線區分
頁首	桌機排成一列，下方一條 --n-100 細線
頁尾	整列 --n-50 底色
手機	一律單欄，「本頁內容」收在標題下方
滑過卡片	框線換成 --brand-cyan-500
鍵盤焦點	2px --brand-cyan-500 外框，與元素相距 2px
深色模式	底色 #00202d，連結 --brand-cyan-200，目前位置與焦點 --brand-cyan-400，灰階用上表的深色模式

圖示的分類色

首頁、參與、關於與專案頁的列表與卡片，前面有一個圓形圖示，圖示圈的顏色代表這一項屬於哪一類工作。2026-10 以前只有三大主題有顏色，其他項目一律灰色，看不出灰色代表什麼，所以擴充成八類。前三類沿用三大主題的結構性次色，後五類在 OKLCH 色彩空間用相近的明度與彩度補出色相，八色在白底與深色底的對比都在 4.5 以上。這組顏色用在社群首頁與檔案工作台，文件站沿用 Material 的配色。

Token	類別	淺色模式	深色模式	用在哪裡
--cat-privacy	個人隱私	#2e7d32	#81c784	個人隱私指引、文件站，檔案工作台的清除中繼資料、網址檢查與 QR code，服務的 SearXNG
--cat-relay	Tor 與中繼	#7b1fa2	#ce93d8	Tor Relay 校園建立，架設 Relay、WebTunnel 與 .onion 服務的指南，參與 Tor Project
--cat-payments	匿名支付	#c25400	#ffa040	匿名支付
--cat-observe	網路觀測	#026a9d	#69c1fc	Tor 中繼節點觀測、OONI 觀測涵蓋率、觀測季報、AI 助理的 Tor 節點查詢、OONI 網站檢測清單
--cat-content	內容與寫作	#02736e	#3ed0c8	新聞導讀、寫作風格規範、文件站的寫作與翻譯
--cat-dev	開發與技術	#4d57b7	#a3b2fe	參與開發的環境準備、IPFS 鏡像的 pin 節點
--cat-secure	機敏與安全	#a53453	#f996a9	提供機敏資料，檔案工作台的遮蔽、加密、解密與密語產生器，服務的 CryptPad 與 Send
--cat-community	社群與治理	#786101	#d3b555	治理章程、組織合作、品牌素材，服務的 Matrix、Etherpad 與 Formbricks

在圖示、整個列表或卡片加上 cat-<類別> 的 class 就會套用，資料檔用 cat 欄位指定。不屬於任何一類的項目不加，維持中性灰。顏色只是輔助，每一項都要有圖示與標題，不能只靠顏色分辨。

只在文件站用的顏色

• 指南分類色（--guide-*）是文件站側欄的導覽識別色，只在文件站出現
• Material 的介面色（亮色模式頁首改用 --brand-cyan-800 那組）只跟 Material 主題有關

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

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

錯誤用法

Logo

• 不要放在過飽和的螢光色或多色漸層背景上，六角形的邊界會變得模糊
• 不要與 Tor、OONI、EFF 等合作對象的官方 logo 緊鄰並排，視覺上會互相干擾
• 不要在白底上用 mono white，也不要在 cyan 底上用 cyan tonal，對比會消失
• 不要把 mono black 當主視覺或用在網頁上，那是印刷專用的版本
• 不要自行調整六角形的排列、間距與圓角，會降低辨識度
• 不要把單一個六角形抽出來另作他用，三個六角形是一組
• 不要單獨調整 wordmark 裡 logo 與文字的間距或大小，需要改尺寸時整份等比縮放
• 不要把 wordmark 的副標換成活動名稱或其他字串。需要這種組合時另外排版，把 wordmark 當成一個元件放進去
• 帶副標的 wordmark 低於最小尺寸時換成無副標的版本，模糊的副標比沒有副標更難辨識

色彩

• 不要任意選用 Material 的預設色（brown、lime、indigo）做裝飾
• 不要用多色漸層當背景（經過規劃的 hero 視覺實驗除外）
• 不要用過飽和的顏色（純紅 #ff0000、純綠 #00ff00）
• 不要寫 inline 的 style="color: #...;"，改用 CSS 變數，例如 var(--brand-cyan-500)

接下來

• 文件站的視覺規範：指南分類色、示意圖的製作方式與社群分享卡
• 貢獻者百科：整體貢獻流程、PR 規範、翻譯流程
• 服務：社群自架的 Matrix、CryptPad、Etherpad、SearXNG、Send、Formbricks 的入口與帳號需求
• 2026 年度路線圖：三大主題與時程