品牌素材¶

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 的文字已经转成路径，打开的设备有没有装字体都长一样，也不会因为缺字而换成别的字体。中文副标固定用正体的「匿名網路社群」，跟文件站三个语系共用的 site_name 一致，简体版不另做一份。

六种版型¶

文件名	版型	建议场合
`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（绿，跟个人隐私指引同色，视觉关联弱可接受）

社群分享卡（Open Graph）¶

把文件站的任何一页贴到 Mastodon、LinkedIn、X、Bluesky 或聊天室，对方看到的预览图由构建流程自动生成，三个语系各一份，不需要人工做图。

版面沿用这一页的色票。cyan-900 当底色，左缘三段色块由上而下是 cyan-300、cyan-500、cyan-700，对应 logo 三个六角形的层次。左上角是 mono white logo 与站名，中间是页面标题，下方依序是页面描述与网址。页面 front matter 有 icon 时，那个图示会放大成 10% 透明的底纹摆在右侧，没有的话用 material/hexagon-multiple-outline，也就是 logo 的来源图示。

底色没有用品牌主色 cyan-500，理由是读得到字。白字放在 cyan-500 上对比只有 2.5:1，缩到社交平台的预览尺寸就糊成一团，换到 cyan-900 之后是 11.5:1。描述用 cyan-100，对比 8.4:1，页尾网址用 cyan-300，对比 5.6:1。

版式文件是 docs/layouts/anoni.yml，三个语系共用同一份。语系差异只有字体（Noto Sans TC、Noto Sans SC、Public Sans）与版面上显示的站名，分别写在 mkdocs.yml、mkdocs_cn.yml、mkdocs_en.yml。要调整版面就改那一份版式，不要各语系各存一份。

中文标题的换行¶

生成卡片的插件只在空白处换行。一整句中文没有空白，会被当成一个词，超过一行就切在画布边缘，连省略号都不会有。改版之前，站上最长的那个文章标题只显示得出前半段。

现在的作法是在全角逗号、顿号、冒号、句号、感叹号、问号后面补一个半角空白，给换行算法可以断的位置，补上的空白落在行尾就会被吃掉。代价是句子中间偶尔看得到多出来的空隙，换来的是三个语系目前每一则标题与描述都完整显示。标题 14 字以内不处理，那个长度本来就放得下一行。

单页换掉卡片内容¶

某一页需要不一样的标题、描述或底色时，在该页 front matter 覆写：

social:
  cards_layout_options:
    title: 卡片上要显示的标题
    description: 卡片上要显示的描述
    background_color: "#003e57"

底图也走同一个选项。background_image 的路径相对于执行 mkdocs 的目录，也就是 docs/，写成 zh-TW/assets/images/xxx.png 这种形式，文件找不到时构建会失败。只填底图的话，底色自动变成 80% 的 cyan-900 遮罩，白字在任何一张图上都读得到。想要原图直出就多填一行 background_color: transparent，代价是浅色的图会让标题与页尾网址消失。

整张图要自己做的场合（活动主视觉、互动区）走另一种写法，front matter 填 og.enabled: true 与 og.image，文件站的模板会改用指定的图片，并跳过自动生成的那一张。COSCUP 活动页与互动区目前就是这样做。

不要这样用¶

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.svg 双重格式文件
手写 SVG：版型规则的图，例如矩阵、分层、时间轴。直接写比在画布上拖拉快，文件也小一到两个数量级

两种都是 SVG，浏览器、mkdocs、IPFS 镜像、Onion 镜像都直接渲染。

图档放在 assets.anoni.net¶

图档不进 docs/<lang>/assets/images/。三个语系的 assets/images/ 是三份各自独立的实体文件，同一张图要复制三次，漏掉一个语系就是一页破图，而且构建不会报错。zh-CN 的七张 drawio 图就是这样坏了一段时间都没有人发现。

东西	位置
原始文件（进版控，可 review、可回溯）	`docs/diagrams/`
发布出去的副本	m6 的 `/srv/images-anoni-net/diagrams/`
文章里引用的网址	`https://assets.anoni.net/diagrams/<文件名>`

docs/diagrams/ 不在 docs_dir 底下（docs_dir 设成各语系自己的目录），所以它不会被构建成产物，纯粹是原始文件的存放处。

读者不会直接连到 assets.anoni.net。mkdocs-material 的 privacy 插件在构建时把外部资产抓成本地文件，产物里的 img src 是 assets/external/assets.anoni.net/... 这样的相对路径。Onion 版与 IPFS 镜像照样自足，不会有读者向 clearnet 发请求。

代价是构建时 assets.anoni.net 必须连得到。privacy 插件下载失败时仍会把该文件登记进 files，接着 copy_static_files 找不到文件就让整个构建失败，插件本身没有重试。

文件名带语系¶

图里有中文字就要分语系，文件名写成 <slug>.<lang>.svg：

anonymity-visibility-matrix.zh-TW.svg
anonymity-visibility-matrix.zh-CN.svg
anonymity-visibility-matrix.en.svg

图里只有英文术语或完全没有文字，三个语系共用一份，文件名就不带语系，写成 <slug>.svg。

还没补齐三个语系的图，先让另外两个语系引用 zh-TW 那一份，站上至少看得到图。docs/diagrams/ 底下带 .zh-TW. 的文件被 zh-CN 或 en 的页面引用，就代表那张还没补。

发布¶

./tools/publish_diagrams.sh --dry-run   # 只检查 SVG 语法
./tools/publish_diagrams.sh             # 检查、上传、验证每个网址回 200

顺序不能反过来。先发布图、确认网址回得了 200，才改 Markdown 的引用。反过来做会让下一次构建直接失败。

改同名文件还要清 Cloudflare 缓存，edge 的 max-age 是 12 小时。设好 CF_ZONE_ID 与 CF_PURGE_TOKEN 环境变量，发布脚本会顺手清掉。

没清缓存就推 docs 分支的后果比「站上暂时看到旧版」严重。CI 构建时 privacy 插件是从 edge 抓图，抓到的旧版会被烘进 S3 产物，之后 edge 缓存自己过期也不会修正站上的内容，因为站上读的是产物那一份。

补救也比想像中难。清掉 edge 缓存再重新构建一次是救不回来的：CI 另外缓存了 docs/.cache/plugin/privacy（理由见 build_docs.yml 的注释），同一个网址在那里已经有文件，privacy 插件就不会再去下载。要靠清缓存解决，得把 GitHub Actions 上全部 mkdocs-privacy-* 的项目删掉，restore-keys 会 fallback 所以只删最新的没有用，而代价是下一次构建要重新对十几个外部主机碰运气。

所以规则是不要覆盖同名文件。图有实质改动就换一个文件名，连同 Markdown 的引用一起改，整条路径上没有任何一层会取得旧的。

这一轮在 2026-08-28 完整踩过：矩阵图的配色改过并重新上传，edge 还在 max-age 内，推了 docs 之后站上是旧版。清掉 edge 缓存、workflow_dispatch 重建一次，站上仍是旧版，因为 CI 的 privacy 缓存命中，产物内容没变连上传都被跳过。最后把文件名从 anonymity-vs-privacy-matrix 换成 anonymity-visibility-matrix 才修好。

如何储存才会有 embedded XML¶

drawio.svg 与纯 SVG 的关键差别，在于 drawio.svg 的 <svg> 根标签上多了一个 content="..." 属性，里面是 escape 过的 drawio mxfile XML。drawio 会读这个 XML 重建原本的结构化编辑体验。没有它，drawio 只能把 SVG 视为一堆独立的 path / rect / text 散件，几乎没办法重编。

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 默认色。

手写 SVG 的规则¶

手写的图是被 img 标签引用的独立文件，取不到页面的 CSS 变量，颜色只能写死 hex，色票照本页上方那一组。

画布宽度上限 940。图在页面上会被内容栏缩小，画布越宽缩得越多，字看起来就越小。量过文档站的内容栏，1920 的视窗是 855，1280 与 1440 都是 668，正文字级 16 到 17.6px。940 的画布上，12.5px 的字实际渲染成 11.4px 与 8.9px，跟站上既有的图一致。同一张图放到 1240，会掉到 6.7px，读不了。

英文版排不下的时候让图长高，不要让图变宽。三个语系共用同一组栏位坐标，长度差异靠折行吸收。数据里一句就是一句，断行的位置交给版面算，手写断行加上折行会长出 the、on 这种单字孤行。

定稿前用 headless 浏览器量一次实际渲染宽度。只看 SVG 文件本身量不出来，字级要乘上缩放比才是读者看到的大小。

深色模式在 SVG 内用 @media (prefers-color-scheme: dark) 自己处理，站上 palette 切换的状态不会传进独立的 SVG 文件。深色那一组把主色提亮，例如 cyan-700 #0089bf 换成 cyan-300 #4dbfff。

色块里的文字用中性深色 #212121 或白色，不要拿主色当文字色。#ef6c00 与 #4caf50 这类颜色在白底的对比度不到 4.5:1，语意靠框色与文字本身表达就够了。

<style> 区块里不要出现尖括号，连注释里都不行。注释写了带角括号的标签名，整份文件就不是合法 XML，而浏览器照样显示得出来，只有 XML parser 抓得到。publish_diagrams.sh 会挡这个。

手写的图自带外框与内距，不要再套 .brand-frame，那会变成双框。drawio 导出的图没有外框，维持套 .brand-frame。

图里的文字一样适用写作规范，但 docs_style_lint.py 只收 .md 与 .js，扫不到 SVG。文字定稿之前先自己对一次规范，口语词那几条最容易漏。发布之后才发现要改，就得换文件名，因为覆盖同名文件会撞上 edge 缓存。

套到 markdown 文章¶

drawio 图，套 .brand-frame：

<figure markdown="span">
    <img class="brand-frame" src="https://assets.anoni.net/diagrams/<name>.zh-TW.drawio.svg" alt="图示说明">
</figure>

手写 SVG，自带外框，改用 figcaption：

<figure markdown="span">
    <img src="https://assets.anoni.net/diagrams/<name>.zh-TW.svg" alt="把图的内容用文字说完整">
    <figcaption>一句话说明这张图在讲什么</figcaption>
</figure>

.brand-frame 是 anoni.net 图示的 utility class（cyan 边框加软阴影）。

alt 要把图的内容说完整，不要只写「示意图」三个字。语音朗读、Onion 版的低带宽情境、图抓不到的时候，读者手上只剩这一段文字。

示意图不要包 <a> 做点击放大。SVG 在页面里本来就看得清楚，而 <a href> 不会被 privacy 插件改写，Onion 版的读者点下去会跳出 Tor 连到 clearnet。截图那类需要放大的图才包 <a>，那些本来就是 PNG。

纯 SVG / PNG export 的场合¶

如果某张图也要做 SNS 卡片、印刷品、外部投影片用（不需要重编能力），再多 Export 一份纯 SVG 或 PNG 即可。这份 export 不要进 repo（避免重复），放本机或社群素材库即可。

接下来¶

贡献者百科：整体贡献流程、PR 规范、翻译流程
社群自架服务：Matrix、Cryptpad、Etherpad、SearXNG、Send、Formbricks 的入口与账号需求
2026 年度路线图：三大主题与时程