From f6440a28f91333830cc10e38be43e65308790f8f Mon Sep 17 00:00:00 2001 From: Local Dev Date: Thu, 22 Oct 2026 00:05:49 +0300 Subject: [PATCH] hermes brand kit: fix asset paths + on-sky mark cell Two bugs the deployed branding page surfaced: 1. site-hermes-x/branding/index.html referenced logo/avatar/banner/og/poster files as same-dir paths, but they actually live in site-hermes-x/assets/. Rewrite 15 asset refs (src= + href= download links) to ../assets/. 2. The "on sky" mark preview cell used mark.svg (sky-blue), which was invisible against the sky background. Add mark-dark.svg (same vector, fills swapped to deep navy) and point the on-sky cell at it. Also noted during deploy: the on-chain s3 record for hermes.x points to bns/hermes/ (same convention as [[theseus-x-sia-bucket]]), not bns/hermes.x/. The VPS systemd sync service was pointing at the wrong bucket and has been corrected to s3://bns/hermes/. --- assets/mark-dark.svg | 1 + branding/index.html | 622 +++++++++++++++++++++---------------------- 2 files changed, 312 insertions(+), 311 deletions(-) create mode 100644 assets/mark-dark.svg diff --git a/assets/mark-dark.svg b/assets/mark-dark.svg new file mode 100644 index 0000000..7ed12b8 --- /dev/null +++ b/assets/mark-dark.svg @@ -0,0 +1 @@ +Hermes diff --git a/branding/index.html b/branding/index.html index 603e4f8..df821d7 100644 --- a/branding/index.html +++ b/branding/index.html @@ -1,311 +1,311 @@ - - - - - -hermes.x — brand kit - - - - - - - - - -
- -

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.

-
- -
- -
-

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 - (Ἑρμῆς). Written form is always Hermes outside Greek contexts.

-

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 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 (favicon)
-
24 px (sidebar)
-
32 px
-
64 px
-
96 px (panel)
-
on sky
-
on light
-
- -
- ⬇️ mark.svg vector master - ⬇️ favicon.svg same, favicon slot -
-
- -
-

Logo 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.

- -
-
- Hermes logo horizontal - horizontal — default -
-
- Hermes logo on sky - horizontal — on sky -
-
- Hermes logo light - horizontal — on light -
-
- Hermes logo stacked - stacked — default -
-
- Hermes logo stacked on sky - stacked — on sky -
-
- Hermes wordmark - wordmark only -
-
- -
- ⬇️ 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.

- -
-
- Hermes avatar dark - avatar-dark.png
1000×1000 -
-
- Hermes avatar light - avatar-light.png
1000×1000 -
-
- Hermes avatar sky - avatar-sky.png
1000×1000 -
-
- -
- ⬇️ avatar-dark.png - ⬇️ avatar-light.png - ⬇️ avatar-sky.png -
-
- -
-

Banners

-

Social-platform headers + website hero. Rendered at native - aspect ratios so no cropping on upload.

- - - - - -
- ⬇️ banner-twitter.png - ⬇️ banner-hero.png -
-
- -
-

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 - ⬇️ og-card-sky.png - ⬇️ poster-square.png -
-
- -
-

Usage

- - - - - - - - - - - - - - - - - - - - -
DoDon't
Keep the envelope tilted, wing on the back-left.Mirror the mark or tilt it the opposite direction.
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 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 surface
-
panel#141a24 — cards, sidebar
-
sky#38BDF8 — primary accent (mark)
-
sky-soft#60A5FA — hover, secondary
-
sky-deep#0EA5E9 — pressed / active
-
orange#FF6D00 — alternate accent
-
orange-light#FF8C1A — hover, secondary
-
orange-deep#E65100 — pressed / active
-
ink#e7eaf1 — body text
-
mut#8b98a9 — muted text
-
warn#ffc75f — warnings, unread accents
-
-
- -
-

Voice

-
    -
  • 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 + 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).

-
- -
- -
-
hermes.x — a Silent Mode project.
-
Named for the messenger of the gods. Ermis in modern Greek. Spelled Hermes in English.
-
- - - + + + + + +hermes.x — brand kit + + + + + + + + + +
+ +

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.

+
+ +
+ +
+

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 + (Ἑρμῆς). Written form is always Hermes outside Greek contexts.

+

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 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 (favicon)
+
24 px (sidebar)
+
32 px
+
64 px
+
96 px (panel)
+
on sky
+
on light
+
+ +
+ ⬇️ mark.svg vector master + ⬇️ favicon.svg same, favicon slot +
+
+ +
+

Logo 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.

+ +
+
+ Hermes logo horizontal + horizontal — default +
+
+ Hermes logo on sky + horizontal — on sky +
+
+ Hermes logo light + horizontal — on light +
+
+ Hermes logo stacked + stacked — default +
+
+ Hermes logo stacked on sky + stacked — on sky +
+
+ Hermes wordmark + wordmark only +
+
+ +
+ ⬇️ 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.

+ +
+
+ Hermes avatar dark + avatar-dark.png
1000×1000 +
+
+ Hermes avatar light + avatar-light.png
1000×1000 +
+
+ Hermes avatar sky + avatar-sky.png
1000×1000 +
+
+ +
+ ⬇️ avatar-dark.png + ⬇️ avatar-light.png + ⬇️ avatar-sky.png +
+
+ +
+

Banners

+

Social-platform headers + website hero. Rendered at native + aspect ratios so no cropping on upload.

+ + + + + +
+ ⬇️ banner-twitter.png + ⬇️ banner-hero.png +
+
+ +
+

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 + ⬇️ og-card-sky.png + ⬇️ poster-square.png +
+
+ +
+

Usage

+ + + + + + + + + + + + + + + + + + + + +
DoDon't
Keep the envelope tilted, wing on the back-left.Mirror the mark or tilt it the opposite direction.
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 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 surface
+
panel#141a24 — cards, sidebar
+
sky#38BDF8 — primary accent (mark)
+
sky-soft#60A5FA — hover, secondary
+
sky-deep#0EA5E9 — pressed / active
+
orange#FF6D00 — alternate accent
+
orange-light#FF8C1A — hover, secondary
+
orange-deep#E65100 — pressed / active
+
ink#e7eaf1 — body text
+
mut#8b98a9 — muted text
+
warn#ffc75f — warnings, unread accents
+
+
+ +
+

Voice

+
    +
  • 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 + 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).

+
+ +
+ + + + +