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

各站的视觉分工

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)

接下来