Brand Assets

The anoni.net logo is three hexagons, evoking a network of nodes and layered observation, derived and coloured from the Material hexagon-multiple-outline icon. The three hexagons sit top, middle, and bottom, corresponding to the three reading layers the community works across: concepts, tools, and regional context.

When making event materials, social cards, slides, or print, take one of the three variants below according to your background colour and situation, rather than recolouring or reshaping the mark.

V3 cyan tonal (primary)

The three hexagons in cyan-300, cyan-500, and cyan-700, giving the nodes depth. Default use: white and light backgrounds, general documentation, slide interiors.

Download logo-tonal.svg

V3 mono white (on brand colour)

Pure white, for the highest contrast on brand colours (cyan-500, cyan-900) and dark blocks. The site header logo uses it against the blue navigation bar, 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 fixed as 匿名網路社群 in Traditional Chinese, matching the site name shared across all three editions.

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 body text on the 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, so switch 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 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, "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, background roles
--neutral-border	#cdcdcd	Image and card borders

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
• Category tags and section markers
• Not for general calls to action or decoration

Announcement tags (inline tags on the home page and blog announcements)

• New uses --brand-cyan-600
• Event uses --accent-action
• Updated uses --cat-privacy, sharing a colour with the privacy track, where the weak visual association is acceptable

How each site uses the brand

Three 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 three 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	Each page sits inside one thin-line frame, cyan as the only hue	static/css/site.css in anoni-net/www
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, docs, news, so the three are easy to tell apart side by side.

Thin lines on the top-level site

The top-level site (home, about, join, projects, services and the other community pages) keeps the look of the home page as it was before the October 2026 redesign: white background, 1px lines and a single hue. New page types follow this spec and don't bring in filled blocks or a second hue.

Element	Spec
Frame	1px --brand-cyan-500 line with a 4px --brand-cyan-50 halo, 8px corners, at most 42rem wide
Dividers	1px --brand-cyan-100, for the line trailing each section heading, list rows and the footer
Fill	Only --brand-cyan-50, and only on the cards for the two content projects, Docs and News
Card hover	A 3px ring of --brand-cyan-500 at 25% opacity
Keyboard focus	2px --brand-cyan-500 outline, 2px from the element
Text	Body #1d2b31, secondary #52646b, links --brand-cyan-800
Dark mode	Background #00202d, lines in --brand-cyan-600, links in --brand-cyan-200

Colours used only on the docs site

• Guide category colours (--guide-*) identify sections in the docs sidebar and appear nowhere else
• Structural secondaries (--cat-*, the green, purple and orange) are also limited to the docs site. The top-level site stays single-hue and marks the three tracks with outlined circular icons instead of colour
• 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 site's visual guide.

What not to do

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 the CSS variable

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
• Community services: Matrix, CryptPad, Etherpad, SearXNG, Send, and Formbricks
• 2026 roadmap: the three tracks and the schedule