品牌素材
本页内容
制作活动宣传材料、社交分享卡、幻灯片与印刷品时，从这一页取用 logo、wordmark 与色票，让 anoni.net 底下的网站与各种宣传材料保持一致的视觉识别。依背景色与用途选择下方的变体，不要自行改色或变形。
匿名网络社区 anoni.net 的 logo 由三个六角形组成，从 Material 的 hexagon-multiple-outline 图标改绘并定色，代表节点组成的网络与多层级的观测。三个六角形由上而下对应三层阅读路径：概念、工具与本地脉络。
V3 cyan tonal（主视觉）
三个六角形由上而下分别用 cyan-300、cyan-500、cyan-700 上色，以深浅表现节点的层次。白底与浅色背景、文档站的一般页面与幻灯片内页都默认用这个版本。
白底
643216暗底
643216cyan-500 底
643216cyan-900 底
643216V3 mono white（品牌色块与深色底）
纯白色版本，放在品牌色（cyan-500、cyan-900）或深色色块上时对比最高。文档站页首蓝底上的 logo 用的就是这个版本，cyan 底的 OG 图、社交分享卡与活动 banner 也用它。
白底（不建议）
643216暗底
643216cyan-500 底
643216cyan-900 底
643216V3 mono black（印刷与单色场合）
纯黑色版本，用在印刷品、传真、单色 stencil 这类无法上色的场合。网页上几乎用不到，收在素材库备用。
白底
643216暗底（不建议）
643216cyan-500 底（不建议）
643216cyan-900 底（不建议）
643216Wordmark（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 在白底
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，与文档站英文版、正体中文版社交分享卡的字体相同。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 年度路线图：三大主题与时程