diff --git a/hermes/branding/index.html b/hermes/branding/index.html index c498328..922d6dd 100644 --- a/hermes/branding/index.html +++ b/hermes/branding/index.html @@ -1,194 +1,194 @@ - - - - - -Hermes — brand — Silent Mode - - - - - - - - -
- -

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.

-
- -
- -
-

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

- -
-
-
Hermes
- 16 px — simplified stroke variant -
-
-
Hermes
- 32 px — standard -
-
-
Hermes
- 64 px — on panel -
-
-
Hermes
- on acid green -
-
-
Hermes
- amber (unread badge) -
-
- -
- ⬇️ mark.webp (main — the signin / top-bar icon) - ⬇️ mark-wings-both.webp (variant — full upper + lower wings) -
- - - - - - - - - - - - - - - - - - - - - -
DoDon't
Keep the helmet upright, wings symmetrical.Rotate, mirror only one wing, or detach them from the helmet.
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.
Pair with the wordmark "Hermes" when context is unclear.Apply to a product with a different protocol or trust model.
-
- -
-

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

- -
-
bg#0b0e14 — primary surface
-
panel#141a24 — cards, sidebar
-
acid#d6ff3d — primary action
-
amber#f4c430 — Hermes accent, unread
-
orange#FF6D00 — alternate accent
-
orange-light#FF8C1A — hover, secondary
-
orange-deep#E65100 — pressed / active
-
ink#e7eaf1 — body text
-
mut#8b98a9 — muted text
-
-
- -
-

Voice

- -
- -
-

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

-
- -
- - - - - + + + + + +Hermes — brand — Silent Mode + + + + + + + + +
+ +

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.

+
+ +
+ +
+

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

+ +
+
+
Hermes
+ 16 px — simplified stroke variant +
+
+
Hermes
+ 32 px — standard +
+
+
Hermes
+ 64 px — on panel +
+
+
Hermes
+ on acid green +
+
+
Hermes
+ amber (unread badge) +
+
+ +
+ ⬇️ mark.svg (main — the signin / top-bar icon) + ⬇️ mark-wings-both.webp (variant — full upper + lower wings) +
+ + + + + + + + + + + + + + + + + + + + + +
DoDon't
Keep the helmet upright, wings symmetrical.Rotate, mirror only one wing, or detach them from the helmet.
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.
Pair with the wordmark "Hermes" when context is unclear.Apply to a product with a different protocol or trust model.
+
+ +
+

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

+ +
+
bg#0b0e14 — primary surface
+
panel#141a24 — cards, sidebar
+
acid#d6ff3d — primary action
+
amber#f4c430 — Hermes accent, unread
+
orange#FF6D00 — alternate accent
+
orange-light#FF8C1A — hover, secondary
+
orange-deep#E65100 — pressed / active
+
ink#e7eaf1 — body text
+
mut#8b98a9 — muted text
+
+
+ +
+

Voice

+ +
+ +
+

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

+
+ +
+ + + + + diff --git a/hermes/branding/mark.svg b/hermes/branding/mark.svg index 9ab5c74..4e464d5 100644 --- a/hermes/branding/mark.svg +++ b/hermes/branding/mark.svg @@ -1,10 +1 @@ - - Hermes - - - - - - - - +Hermes diff --git a/hermes/favicon.svg b/hermes/favicon.svg new file mode 100644 index 0000000..4e464d5 --- /dev/null +++ b/hermes/favicon.svg @@ -0,0 +1 @@ +Hermes