Home/Brand
Brand assets

hostmy.blog
brand assets

Two marks: the Logotype, horizontal, and the Symbol, square. SVG is the master format. Use PNG only where SVG is refused.

01 / Logotype

Logotype

hostmy.blog set in Fraunces semibold, lowercase, full stop in coral. There is no picture mark.

hostmy.blog
Logotype, plum on light

Cream, white and other light backgrounds.

hostmy.blog
Logotype, cream on dark

Plum, black and photographic backgrounds. The dot stays coral.

Naming
In prose
Host My Blog, three words, each capitalised.
Logotype and web address
hostmy.blog, one lowercase string.
02 / Symbol

Symbol

A lowercase h and the coral dot in a rounded square. Two variants, plum and cream. The Symbol is the favicon.

Symbol, plum

Cream, white and other light backgrounds. This is the favicon.

h
Symbol, cream

Plum, black and photographic backgrounds.

The SVG files carry live text, not outlined shapes. They render in Fraunces where it is available and fall back to Georgia. Use PNG where the fonts cannot be controlled.

03 / Clear space

Clear space

Clear space on all sides is equal to the height of the h.

hostmy.blog
04 / Colour

Colour

The three brand colours. Click a swatch to copy its hex.

05 / Typography

Typography

Fraunces, Geist and Geist Mono. All three load from Google Fonts.

Fraunces Display, headings, Logotype

We look after the boring parts.

Weight 600 for headings and the Logotype. Letter-spacing -0.022em. Fallback: Georgia, serif.

Geist Body, buttons, interface

Body copy is set in Geist at 17px, line height 1.6.

Weights 300 to 700. Fallback: system-ui, -apple-system, sans-serif.

Geist Mono Code, eyebrows, small labels

$ wp core update --version=6.8
ABCDEFGHIJKLM 0123456789

Weights 400 to 600. Uppercase with 0.18em tracking for eyebrows. Fallback: ui-monospace, SF Mono, monospace.

06 / Misuse

Misuse

Do not

  • Recolour the dot. It is coral in every application.
  • Use the house icon. It is still in the theme and it is not the Symbol.
  • Place the cream Logotype on light, or the plum Logotype on dark.
  • Stretch, squash, rotate or skew either mark.
  • Swap the Logotype coral for the interface coral.
  • Add a shadow, outline, gradient or effect.
  • Rebuild the Logotype by typing it out.
  • Write HostMyBlog as one word in prose.