Skip to content

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.

White

64
32
16

Dark

64
32
16

cyan-500

64
32
16

cyan-900

64
32
16

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.

White (not recommended)

64
32
16

Dark

64
32
16

cyan-500

64
32
16

cyan-900

64
32
16

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.

White

64
32
16

Dark (not recommended)

64
32
16

cyan-500 (not recommended)

64
32
16

cyan-900 (not recommended)

64
32
16

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

logo-wordmark

logo-wordmark-zh

logo-wordmark-en

logo-wordmark-fullname

The same four in mono white, on cyan-900

logo-wordmark-white

logo-wordmark-zh-white

logo-wordmark-en-white

logo-wordmark-fullname-white

Stacked, for posters and roll-up banners

logo-wordmark-stack

logo-wordmark-stack-zh

stack-zh mono white

stack mono white

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

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

Contributing technical diagrams with drawio

Every technical diagram on the site (flowcharts, architecture diagrams, timelines) is made in drawio and saved in the dual .drawio.svg format, which is simultaneously:

  • A valid SVG, rendered directly by browsers, mkdocs, and the IPFS and onion mirrors
  • A re-editable drawio source, so anyone later wanting to change a colour, edit text, or add an element can open it in drawio Desktop

The difference is an extra content="..." attribute on the root <svg> tag, holding escaped drawio mxfile XML. drawio reads that to rebuild the structured editing experience. Without it, drawio sees a pile of independent paths, rectangles, and text, and re-editing is essentially impossible.

Saving so the XML is embedded

Two fields in drawio Desktop's save dialog matter:

Field Setting
Filename xxx.drawio.svg, the conventional double extension
Format dropdown Editable Vector Image (.drawio.svg)

The format dropdown is what decides. A filename ending .drawio.svg saved with the format set to plain SVG produces a file that looks right and has no XML. This is the easiest mistake to make.

drawio Desktop usually defaults to .drawio, which is pure XML that browsers cannot display, so switch the format manually when creating a file, or change the default permanently in Preferences.

Do not use Export

drawio writes files two ways:

  • File → Save: writes back to the original file and keeps the XML, provided the format is .drawio.svg
  • File → Export As → SVG: produces a new plain SVG and strips the XML

Diagrams going into the repository use Save only. Export As is for handing a file to another tool, and the result does not go back into the site.

Verifying the XML is there

After saving:

grep -c mxfile your-diagram.drawio.svg

Expect 1 or more. A result of 0 means the file has no embedded XML and cannot be re-edited, so reopen it in drawio Desktop and save again with the correct format.

Keeping colours consistent

New diagrams use the brand cyan scale above. Pasting this into drawio Desktop under Extras → Configuration makes the brand colours the picker defaults:

{
  "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"
  ]
}

Set once and stored permanently, so the picker offers brand colours rather than Material defaults.

Using a diagram in an article

Save to docs/en/assets/images/<name>.drawio.svg (or the corresponding language directory) and reference it:

<figure markdown="span">
    <img class="brand-frame" src="../../assets/images/<name>.drawio.svg" alt="Description">
</figure>

.brand-frame is the site's utility class for diagrams, giving a cyan border and a soft shadow, applied to every technical diagram for visual consistency. The ../../assets/images/... path is the standard form when referencing from a section directory.

When a plain SVG or PNG is needed

If a diagram also has to work as a social card, in print, or in an external deck, where re-editing does not matter, export a plain SVG or PNG additionally. That export does not go into the repository. Keep it locally or in the community asset library.

Next