Logo set

JSM Electrical logo

The logo in its original black and grey, with a version for every place it appears: light and dark backgrounds, one-colour jobs, small spaces, browser tabs, phone home screens and social profiles. Every file is in docs/assets/logo/, as SVG (sharp at any size) and PNG.

Colours

Two colours, as on the ute door: black for the letters, grey for the J's tick and the M's diagonal. The grey never moves to other parts.

Black#141414
Grey#9F9F9F
White#FFFFFF, on dark backgrounds

The logo

Use the two-colour logo wherever you can. Pick the version by the background it sits on.

JSM Electrical logo in black and grey

Primary

White and light backgrounds: the website, quotes, invoices, uniforms.

SVGPNG 400PNG 1200
JSM Electrical logo in white and grey

Reversed

Black and dark backgrounds, and dark photos: the current website's black header, the footer.

SVGPNG 400PNG 1200
JSM Electrical logo in black only

One colour, black

When only one colour is possible: single-colour print, stamps, embroidery, engraving.

SVGPNG 1200
JSM Electrical logo in white only

One colour, white

One-colour jobs on dark materials, and faint watermarks on dark surfaces.

SVGPNG 1200
JSM monogram in black and grey

Monogram

"JSM" without "ELECTRICAL", for small spaces where the name appears nearby. Reversed version included.

SVGPNG 800Reversed SVGReversed PNG

Icons

The J alone, white with its grey tick on black, the same idea as the current favicon. It stays readable at 16 pixels, where the full logo can't.

16 px
32 px
Favicon: a white J with a grey tick on a black rounded squareFavicon
App icon: the J on a black square, shown with a phone's rounded maskApp icon (phone mask)
Social profile picture: the reversed logo in a black circleProfile, dark
Social profile picture: the logo in a white circleProfile, light
FileSizeUse
favicon.svg, favicon.icoAny; 16, 32, 48Browser tab icon
app-icon-512.png512 × 512WordPress Site Icon (Settings › General or Customise › Site Identity); Android home screen
app-icon-192.png192 × 192Android home screen (web app manifest)
apple-touch-icon.png180 × 180iPhone and iPad home screen
app-icon.svgAnySource for other icon sizes. The J sits inside the central 80% circle, so masks never crop it
avatar-dark-1080.png, avatar-light-1080.png1080 × 1080Facebook and Instagram profile pictures. The logo stays inside the circle crop

Space and size

Keep clear space around the logo at least the height of the J's grey tick (about 15% of the logo's height) on every side. Nothing else goes inside it.

The logo with its clear space marked around it
  • Full logo: at least 120 px wide on screen, 30 mm in print. Below that, "ELECTRICAL" gets too thin.
  • Monogram: at least 60 px wide, 15 mm in print.
  • Smaller than that: use the J icon.

Don't

  • Change the grey, or move it to other letters.
  • Stretch, rotate, outline, add shadows or recreate "ELECTRICAL" in another font.
  • Put the two-colour logo on a mid-grey background, where the grey disappears. Use a one-colour version.
  • Place it on a busy photo without a dark overlay behind it.
  • Use the old 189 × 80 PNG anywhere it's shown larger than that; it goes blurry.

On the current website

The set works on the live site today, before the revamp:

WhereFile
Header logo (black header)jsm-logo-reversed-400.png, shown at 189 px wide: sharp on high-resolution screens
Site iconapp-icon-512.png as the WordPress Site Icon; WordPress makes the favicon and home-screen sizes from it
Facebook and Instagram profile picturesavatar-dark-1080.png or avatar-light-1080.png