Brand Assets

Take the logo, wordmarks and colours from this page when making event materials, social cards, slides or print, so that the sites under anoni.net and everything made around them share one visual identity. Choose a variant below by background colour and purpose, and do not recolour or reshape the mark.

The anoni.net logo is three hexagons, redrawn and coloured from the Material hexagon-multiple-outline icon, standing for a network of nodes and layered observation. From top to bottom the hexagons correspond to the three reading layers the community works across: concepts, tools, and regional context.

V3 cyan tonal (primary)

From top to bottom the hexagons are cyan-300, cyan-500, and cyan-700, and the shading gives the nodes depth. This is the default on white and light backgrounds, ordinary docs pages, and slide interiors.

Download logo-tonal.svg

V3 mono white (on brand colour and dark backgrounds)

Pure white, for the highest contrast on brand colours (cyan-500, cyan-900) and dark blocks. The docs site uses it in its blue header, as do OG images, social cards, and event banners on cyan.

Download logo-white.svg

V3 mono black (print and single-colour)

Pure black, for print, fax, and single-colour stencils where colour is unavailable. It is rarely used online and is kept here for completeness.

Download logo-black.svg

Wordmark (the logo with the name)

The three variants above are the mark on its own, without the community name. Where the name needs to be read at a glance, use a wordmark instead: slide headers, business cards, event backdrops, posters, roll-up banners. Keep the icon-only versions for places that are either very small or already carry the name nearby, such as favicons, chat avatars, and slide corners.

The lettering is converted to paths, so it renders identically whether or not the device has the fonts installed, and no character can silently fall back to a different typeface. The Chinese subtitle is always the Traditional Chinese 匿名網路社群; there is no Simplified Chinese version.

Six layouts

Filename	Layout	Where to use it
logo-wordmark-*	Horizontal, logo plus anoni.net	The default. Slide headers, site header, business cards
logo-wordmark-zh-*	Horizontal with the Chinese subtitle 匿名網路社群	Chinese-language settings, where the Chinese name should be visible
logo-wordmark-en-*	Horizontal with the English subtitle Anonymity Network Community	International settings such as Global Gathering or ETHTaipei
logo-wordmark-fullname-*	Single line, 匿名網路社群 anoni.net	Long banners and backdrop headers in Chinese-language settings
logo-wordmark-stack-*	Stacked, logo above the name	Posters, roll-up banners, exhibition boards
logo-wordmark-stack-zh-*	Stacked with the Chinese subtitle	As above, in Chinese-language settings

Each layout comes in tonal, white, and black, following the same selection rules as the icon-only variants above.

The four horizontal layouts, cyan tonal on white

The same four in mono white, on cyan-900

Stacked, for posters and roll-up banners

Proportions and clear space

The proportions are fixed. To change the size, scale the whole lockup; do not adjust one part on its own.

• Horizontal: the logo height is 1.35 times the visual height of the anoni.net lettering, and the gap between them is 0.40 times the logo width
• Stacked: the logo height is 1.90 times the type size, with the lettering centred under the mark
• Clear space: 0.25 times the logo height on all four sides. The SVG viewBox already includes it, so do not crop inwards when placing the file

The lettering is Public Sans SemiBold and the Chinese subtitle is Noto Sans TC Medium, the same faces as the social cards on the docs site's English and Traditional Chinese editions. In the tonal variant, .net uses cyan-700, matching the lowest hexagon; the mono variants are a single colour throughout.

Minimum size

Below these heights the lettering blurs. Drop a wordmark with a subtitle to the version without one, and a wordmark without a subtitle to the icon-only mark.

Layout	Minimum height
No subtitle (logo-wordmark-*, logo-wordmark-fullname-*)	18 px
Chinese subtitle (-zh-)	32 px
English subtitle (-en-)	40 px

In print terms, 18 px at 300 dpi is roughly 1.5 mm; in practice the horizontal version is safe at 8 mm high and above.

Downloads

Layout	cyan tonal	mono white	mono black
Horizontal	SVG	SVG	SVG
Horizontal, Chinese subtitle	SVG	SVG	SVG
Horizontal, English subtitle	SVG	SVG	SVG
Single line, full name	SVG	SVG	SVG
Stacked	SVG	SVG	SVG
Stacked, Chinese subtitle	SVG	SVG	SVG

Colour tokens

Align derivative work to these values. The docs site's extra.css already defines them as CSS variables, so use var(--brand-cyan-500) rather than an inline hex code.

Brand cyan, nine steps

Token	Hex	Use
--brand-cyan-50	#e0f4ff	Lightest background, card fill, admonition fill
--brand-cyan-100	#b3e3ff	Light background, selection state
--brand-cyan-200	#80d1ff	Dividers, borders, disabled text
--brand-cyan-300	#4dbfff	Secondary links, tag borders, top logo hexagon
--brand-cyan-400	#26b3ff	Hover state
--brand-cyan-500	#00aeff	Brand base, middle logo hexagon
--brand-cyan-600	#009ee6	Primary hover and active, the New announcement tag
--brand-cyan-700	#0089bf	Primary text on light backgrounds, bottom logo hexagon
--brand-cyan-800	#006d99	Emphasis text, dark variants
--brand-cyan-900	#003e57	Dark mode background contrast

Accent, for calls to action and emergencies

Token	Hex	Use
--accent-action	#ef6c00	Call-to-action buttons, event announcements
--accent-emergency	#d32f2f	Emergency help, security warnings

Structural secondaries, for the three 2026 tracks (category tags only)

Token	Hex	Use
--cat-privacy	#4caf50	Personal privacy guide
--cat-relay	#7b1fa2	Tor relays on campus
--cat-payments	#ef6c00	Anonymous payments, sharing the accent action colour

Neutrals

Token	Hex	Use
--neutral-text	Material default	Body text
--neutral-muted	#546e7a	Secondary text, the Update announcement tag
--neutral-border	#cdcdcd	Image and card borders

Web variants

The brand green and orange fall short of 4.5:1 contrast on white, which is not enough for text, thin lines or the background of a button with white text. The community site uses the variants below, and the docs site and other web pages should follow the same table. --accent-action is the background of buttons with white text, so it is the same in both modes. Print, slides and large colour blocks keep the brand colours above.

Token	Brand colour	Light mode	Dark mode
--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 fills

Colour	Hex	Use
White	#ffffff	mono white fill, on brand-colour blocks only
Black	#000000	mono black fill, print only

Using the colours

Brand cyan

• Brand-consistent surfaces: hero areas, alongside the logo, primary call-to-action borders
• Primary links and navigation highlights

Accent action (orange #ef6c00)

• Buttons where the reader takes an action: register, subscribe, join
• Event announcements

Accent emergency (red #d32f2f)

• The entry point to the emergency help page
• Security warnings such as account compromise and stalking response
• Not for "click this button" in non-urgent contexts

Structural secondaries (green, purple, orange)

• Card icon colours for the three tracks, extended to eight categories on the community site (see Icon category colours)
• Category tags and section markers
• Not for general calls to action or decoration

Announcement tags (inline tags in the community updates list, the home page's latest updates and the docs site's blog announcements)

• New uses --brand-cyan-600, for a project or service going live
• Event uses --accent-action, for event announcements and recaps
• Update uses --neutral-muted (grey), for progress reports. It used to share the privacy track's green, but the community site also shows the track cards, so readers could take the two as related; it switched to grey in October 2026. The docs site still uses green and will follow when its colours are revised
• Posts sharing the community's views, positions or experience carry no tag
• Small text on the web uses the values in the web variants table; New in small text uses --brand-cyan-800

Visual roles of the sites

Four sites live under anoni.net. They share the logo and the tokens above, and each is told apart by the colour of its header, so readers moving between them can see where they are. All four use --brand-cyan-* as the only main hue and add no others.

Site	Header	Layout	Where the styles live
anoni.net	White, logo plus anoni.net	Every page aligns to the same left and right edges, with an "On this page" column on document pages. Structure in neutral greys, cyan kept for interaction and identity	static/css/site.css in anoni-net/www
anoni.net/gears	--brand-cyan-50 with dark text, logo plus "File Workbench" with a Gears badge; a blue-grey one step above the background in dark mode	A hand-written tool interface with the file tray on the left and tool icons in the category colours	src/styles.css in anoni-net/gears
anoni.net/docs	--brand-cyan-800 with white text	Material for MkDocs, sidebar in the guide category colours	docs/*/stylesheets/extra.css in anoni-net/docs
anoni.net/news	--brand-cyan-900 with white text, an ink tone	A hand-written single-column layout with serif headings	static/css/news.css in anoni-net/news

From light to dark the headers run top level, File Workbench, docs, news, so the sites are easy to tell apart side by side.

Colour and layout of the community site

The top-level site (home, about, join, projects, services and the other community pages) has cyan as its only brand hue, with each use given its own role. Until October 2026 cyan did everything at once, from headings and leads to links and every border, so readers couldn't tell what was clickable or where one block ended, and long pages were tiring to read. The roles are now split as below.

Role	Colour	Where
Structure	Neutral greys --n-50 to --n-300	Dividers, borders on cards and screenshots, and the backgrounds of admonitions, collapsible blocks, code, table headers and the footer
Hierarchy	Headings #13232a, body #1d2b31, secondary #52646b	Headings, section headings, leads
Interaction	Links --brand-cyan-800, current location --brand-cyan-600, focus and hover --brand-cyan-500	Links, outlined buttons, the current item in the navigation, keyboard focus, hovered cards
Identity	The cyan tonal logo and --brand-cyan-700	Header and the home page hero
Categories and data	Structural secondaries, icon category colours, update tags, the nine cyan steps	Icon rings and session tags, update tags, measurement charts

The greys extend from --neutral-muted (#546e7a) and carry a little blue, so they sit next to cyan without looking muddy. Blocks are told apart by a light background rather than outlines.

Token	Light mode	Dark mode	Use
--n-50	#f3f6f7	#082b3a	Backgrounds of admonitions, collapsible blocks, code, table headers and the footer
--n-100	#e3e9ec	#133847	Dividers
--n-200	#cdd6da	#234757	Borders on cards and screenshots
--n-300	#a7b5bb	#3c6070	Task-list checkboxes, step number circles

Element	Spec
Frame	No outline. Header, content and footer align to the same left and right edges on every page, at most 58.5rem wide
Document pages	Articles, guides, events, updates and measurement pages: a 42rem content column plus a 13rem "On this page" column. Paragraphs, tables and charts fill the content column, with no separate limit on text width
Index pages	The home page and the section landing pages use the full width, with cards and lists in two or three columns on desktop
Heading levels	h1 1.8rem, h2 1.25rem, h3 1.05rem. Each h2 is followed by a thin --n-100 line running to the edge of the content column; its first 2.5rem is 3px thick in the identity colour --brand-cyan-700 (--brand-cyan-300 in dark mode), which sets it apart from card borders and list dividers
Header	One row on desktop, with a --n-100 line underneath
Footer	A full-width --n-50 band
Mobile	Always one column, with "On this page" folded under the title
Card hover	The border turns --brand-cyan-500
Keyboard focus	2px --brand-cyan-500 outline, 2px from the element
Dark mode	Background #00202d, links --brand-cyan-200, current location and focus --brand-cyan-400, greys from the dark-mode column above

Icon category colours

Lists and cards on the home, Take part, About and Projects pages start with a round icon, and the colour of its ring says which kind of work the item belongs to. Until October 2026 only the three tracks had colours and everything else was grey, which told readers nothing, so the set was extended to eight categories. The first three reuse the structural secondaries of the three tracks. The other five were derived in OKLCH at a similar lightness and chroma, and all eight reach at least 4.5:1 against both the light and the dark background. These colours are used on the community site and in File Workbench; the docs site keeps Material's palette.

Token	Category	Light mode	Dark mode	Used for
--cat-privacy	Privacy	#2e7d32	#81c784	Personal privacy guidance, the docs site, and the metadata stripper, link checker and QR code tools in File Workbench, and the SearXNG service
--cat-relay	Tor and relays	#7b1fa2	#ce93d8	Tor relays on campus, the guides to running a relay, WebTunnel bridge and .onion service, taking part in the Tor Project
--cat-payments	Anonymous payments	#c25400	#ffa040	Anonymous payments
--cat-observe	Network measurement	#026a9d	#69c1fc	Tor Relay Watch, OONI Coverage, quarterly reports, Tor relay lookup for AI assistants, maintaining the OONI test list
--cat-content	Content and writing	#02736e	#3ed0c8	News, the writing style guide, writing and translating for the docs site
--cat-dev	Development	#4d57b7	#a3b2fe	Development environment setup, the IPFS pin node
--cat-secure	Sensitive material and safety	#a53453	#f996a9	Sending us sensitive material, and the redaction, encryption, decryption and passphrase tools in File Workbench, and the CryptPad and Send services
--cat-community	Community and governance	#786101	#d3b555	Governance charter, working with organizations, brand assets, and the Matrix, Etherpad and Formbricks services

Adding a cat-<category> class to an icon, a whole list or a card applies the colour, and data files set it with a cat field. Items that fit no category get no class and stay neutral grey. Colour only supports the label: every item still needs its icon and title, and nothing should be told apart by colour alone.

Colours used only on the docs site

• Guide category colours (--guide-*) identify sections in the docs sidebar and appear nowhere else
• Material interface colours (the set that moves the light-mode header to --brand-cyan-800) only concern the Material theme

When News or the top-level site needs an accent, follow "Using the colours" above, and keep the emergency red for emergencies.

The guide category colours, the Material interface colours, the diagram palette and the social cards are specified in the Docs Visual Guide.

Incorrect use

Logo

• Do not place it on oversaturated fluorescent colours or multicolour gradients, which blur the hexagon edges
• Do not set it immediately adjacent to partner logos such as Tor, OONI, or EFF, where the marks compete
• Do not use mono white on white, or cyan tonal on cyan, where the contrast disappears
• Do not use mono black as a primary mark or on the web, since it is the print variant
• Do not adjust the hexagons' arrangement, spacing, or corner radius
• Do not extract a single hexagon for another purpose. The three are one mark
• Do not re-space or resize the logo and lettering inside a wordmark independently; scale the whole lockup
• Do not swap a wordmark's subtitle for an event name or other text. Lay that out separately and place the wordmark into it as one element
• Below the minimum size, drop to the version without a subtitle. A blurred subtitle reads worse than none

Colour

• Do not pick arbitrary Material defaults (brown, lime, indigo) for decoration
• Do not use multicolour gradients as backgrounds, outside a deliberate hero experiment
• Do not use oversaturated colours such as pure red #ff0000 or pure green #00ff00
• Do not write style="color: #...;" inline. Use a CSS variable such as var(--brand-cyan-500)

Next

• Docs Visual Guide: guide category colours, how to make diagrams, and social cards
• Contributor Handbook: the overall contribution process, PR conventions, and translation workflow
• Services: the Matrix, CryptPad, Etherpad, SearXNG, Send, and Formbricks instances the community hosts, with entry points and account requirements
• 2026 roadmap: the three tracks and the schedule