跳转至

品牌素材

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（避免重复），放本机或社群素材库即可。

接下来