品牌素材¶
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 的文字已经转成路径，打开的设备有没有装字体都长一样，也不会因为缺字而换成别的字体。中文副标固定用正体的「匿名網路社群」，跟文件站三个语系共用的 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（绿，跟个人隐私指引同色，视觉关联弱可接受）
不要这样用¶
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 年度路线图：三大主题与时程