16 px (favicon)24 px (sidebar)32 px64 px96 px (panel)on skyon light
-
+
+
+
-
Hermes brand
-Mark, palette, name, tone. One page so client builds, add-on - chrome, screenshots and third-party press stay consistent without a - design review.
+Brand kit
+Mark, logo lockups, avatars, banners, social cards, palette, voice. One page + so client builds, add-on chrome, screenshots and third-party press stay consistent.
@@ -70,124 +82,228 @@
The name
In English the product is Hermes — after the Greek god of messengers, travellers, and crossings. In modern Greek the same name is Ermis - (Ἑρμῆς). Both pronunciations are correct; written form is always Hermes - outside Greek contexts.
-The keyboard shortcut inside Theseus is Ctrl+Shift+E —
- E for Ermis, and off the collision path with Chrome's own Ctrl+Shift+M
- ("switch profile").
The keyboard shortcut inside Theseus is Ctrl+Shift+E
+ — E for Ermis, off the collision path with Chrome's own Ctrl+Shift+M.
The mark
-A winged helmet (petasos) — the mythological signature
- of Hermes, the messenger god. Picked over a literal envelope because the
- envelope is generic (every mail client uses it) and because an envelope
- doesn't say fast. Works monochrome, scales from 16 px (sidebar icon)
- to 160 px (hero) without legibility loss. SVG uses
- currentColor so it inherits whatever text
- colour it sits in.
A tilted winged envelope — a letter mid-flight. Vector, scales + cleanly from favicon to hero. Ships as one SVG with the sky-blue fill plus + dark inner cutouts for the flap V-fold.
-
+
-
- 16 px — simplified stroke variant
+ 16 px (favicon)
+ 24 px (sidebar)
+ 32 px
+ 64 px
+ 96 px (panel)
+ on sky
+ on light
+
+
+
+
+
+16 px (favicon)24 px (sidebar)32 px64 px96 px (panel)on skyon lightLogo lockups
+Mark + wordmark for use when context needs more than the icon alone. + Three surfaces: default dark, inverted for sky-blue backgrounds, light-background variant.
+ +
+
+ 
+ horizontal — default
-
+ horizontal — default
-
- 32 px — standard
+
+ 
+ horizontal — on sky
-
+ horizontal — on sky
-
- 64 px — on panel
+
+ 
+ horizontal — on light
-
+ horizontal — on light
-
- on acid green
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
diff --git a/hermes/branding/logo-horizontal-light.svg b/hermes/branding/logo-horizontal-light.svg
new file mode 100644
index 0000000..3b3021d
--- /dev/null
+++ b/hermes/branding/logo-horizontal-light.svg
@@ -0,0 +1 @@
+
diff --git a/hermes/branding/logo-horizontal-on-sky.svg b/hermes/branding/logo-horizontal-on-sky.svg
new file mode 100644
index 0000000..26aba6b
--- /dev/null
+++ b/hermes/branding/logo-horizontal-on-sky.svg
@@ -0,0 +1 @@
+
diff --git a/hermes/branding/logo-horizontal.svg b/hermes/branding/logo-horizontal.svg
new file mode 100644
index 0000000..0c34916
--- /dev/null
+++ b/hermes/branding/logo-horizontal.svg
@@ -0,0 +1 @@
+
diff --git a/hermes/branding/logo-stacked-on-sky.svg b/hermes/branding/logo-stacked-on-sky.svg
new file mode 100644
index 0000000..e1257de
--- /dev/null
+++ b/hermes/branding/logo-stacked-on-sky.svg
@@ -0,0 +1 @@
+
diff --git a/hermes/branding/logo-stacked.svg b/hermes/branding/logo-stacked.svg
new file mode 100644
index 0000000..dab37bb
--- /dev/null
+++ b/hermes/branding/logo-stacked.svg
@@ -0,0 +1 @@
+
diff --git a/hermes/branding/og-card-sky.png b/hermes/branding/og-card-sky.png
new file mode 100644
index 0000000..449c1b6
Binary files /dev/null and b/hermes/branding/og-card-sky.png differ
diff --git a/hermes/branding/og-card.png b/hermes/branding/og-card.png
new file mode 100644
index 0000000..0feb049
Binary files /dev/null and b/hermes/branding/og-card.png differ
diff --git a/hermes/branding/poster-square.png b/hermes/branding/poster-square.png
new file mode 100644
index 0000000..b8a804c
Binary files /dev/null and b/hermes/branding/poster-square.png differ
diff --git a/hermes/branding/wordmark-navy.svg b/hermes/branding/wordmark-navy.svg
new file mode 100644
index 0000000..2ea5ec0
--- /dev/null
+++ b/hermes/branding/wordmark-navy.svg
@@ -0,0 +1 @@
+
diff --git a/hermes/branding/wordmark.svg b/hermes/branding/wordmark.svg
new file mode 100644
index 0000000..9476ebc
--- /dev/null
+++ b/hermes/branding/wordmark.svg
@@ -0,0 +1 @@
+
+ 
+ stacked — default
-
+ stacked — default
-
- amber (unread badge)
+
+ 
+ stacked — on sky
+
+
+ stacked — on sky
+
+ 
+ wordmark only
+ wordmark only
- ⬇️ mark.svg (main — the signin / top-bar icon)
- ⬇️ mark-wings-both.webp (variant — full upper + lower wings)
+ ⬇️ logo-horizontal.svg
+ ⬇️ logo-horizontal-on-sky.svg
+ ⬇️ logo-horizontal-light.svg
+ ⬇️ logo-stacked.svg
+ ⬇️ logo-stacked-on-sky.svg
+ ⬇️ wordmark.svg
+ ⬇️ wordmark-navy.svg
+
+
+
+
Avatars
+1000×1000 PNG, square, mark centred. Use the dark variant on + Twitter / Discord / Nostr / Telegram where the default surface is dark; + use the light variant for light-themed platforms.
+ +
+
+
+
+ 
+ avatar-dark.png
1000×1000 +
+
+ avatar-dark.png1000×1000 +
+ 
+ avatar-light.png
1000×1000 +
+
+ avatar-light.png1000×1000 +
+ 
+ avatar-sky.png
1000×1000 +
+ avatar-sky.png1000×1000 +
Banners
+Social-platform headers + website hero. Rendered at native + aspect ratios so no cropping on upload.
+ +
+ 
+
+
+
+ banner-twitter.png — 1500×500 (X, LinkedIn, Facebook header)
+
+ 
+
+
+
+
+ banner-hero.png — 2000×700 (website / landing hero)
+ Social cards + posters
+Open Graph card for link previews (every chat / search engine + renders this when hermes.x is shared), plus a square Instagram-style poster.
+ +
+ 
+
+
+
+ og-card.png — 1200×630 (OG image / Twitter card)
+
+ 
+
+
+
+ og-card-sky.png — 1200×630 (sky-background variant)
+
+ 
+
+
+
+
+ poster-square.png — 1080×1080 (Instagram / Mastodon)
+ Usage
| Do | Don't | ||
|---|---|---|---|
| Keep the helmet upright, wings symmetrical. | -Rotate, mirror only one wing, or detach them from the helmet. | +Keep the envelope tilted, wing on the back-left. | +Mirror the mark or tilt it the opposite direction. |
| Let the mark inherit text colour (currentColor). | -Hard-code a colour inside the SVG; it limits reuse. | -||
| Use the stroke variant below 24 px display size. | -Scale the standard mark below 20 px — feathers merge. | +Use the dark-fill variant against sky-blue surfaces. | +Place the sky-blue mark on a sky-blue background. |
| Pair with the wordmark "Hermes" when context is unclear. | Apply to a product with a different protocol or trust model. | ||
| Scale the vector mark freely — it's crisp at any size. | +Rasterise and re-upscale; use the SVG as the source of truth. | +
Palette
-Hermes rides on Silent Mode's colour system — same acid green, - same deep panels — so it never looks like a separate app glued on. - Warm amber and orange are extra accents for Hermes-specific moments - (unread badge, winged-sandals nod).
+Hermes rides on a sky-blue primary — fast, airborne, legible + on both dark and light. The deep navy background is the natural pairing; + the dim tones are for muted type.
bg
#0b0e14 — primary surfacepanel
#141a24 — cards, sidebaracid
#d6ff3d — primary actionamber
#f4c430 — Hermes accent, unreadsky
#38BDF8 — primary accent (mark)sky-soft
#60A5FA — hover, secondarysky-deep
#0EA5E9 — pressed / activeorange
#FF6D00 — alternate accentorange-light
#FF8C1A — hover, secondaryorange-deep
#E65100 — pressed / activeink
#e7eaf1 — body textmut
#8b98a9 — muted textwarn
#ffc75f — warnings, unread accentsVoice
-
-
- Blunt about limits. "Relays still see recipient and timing" is the - tone, not "fully anonymous messaging". Say what the design does and does - not solve. -
- No evangelism about Nostr. Nostr is the transport, not the - product. Mention it where it matters (relays, pubkeys, NIP-17) and don't - elsewhere. -
- "Message by name" is the one-line pitch. Everything else is - supporting detail. -
- Lowercase for product nouns in body copy (hermes, messages - panel). Capital Hermes for titles and the first mention per page. +
- Blunt about limits. + "Relays still see recipient and timing" is the tone, not "fully + anonymous messaging". Say what the design does and does not solve. +
- No evangelism about Nostr. + Nostr is the transport, not the product. Mention it where it + matters (relays, pubkeys, NIP-17) and don't elsewhere. +
- "Message by name" is the one-line pitch. + Everything else is supporting detail. +
- Lowercase for product nouns in body copy. + hermes.x, messenger, panel. Capital Hermes for titles and the first + mention per page.
Attribution + reuse
-Mark + palette are MPL-2.0 along with the rest of the Hermes client - source. Use for reviews, press, interoperability docs and the client's own - chrome. Don't apply to products not actually Hermes (that includes forks - with different protocols or trust models).
+Mark + palette + brand kit assets are MPL-2.0 along with the rest of the + Hermes client source. Use for reviews, press, interoperability docs and the + client's own chrome. Don't apply to products that aren't actually Hermes + (forks with different protocols or trust models included).