Files use sRGB. Have your printer convert to its required press profile and proof the color on the final stock. For larger output, choose the vector. White artwork needs a dark background or a printer capable of white ink.

Web Ready600, 1200 and 2400 px · PNG, WebP and JPG

Transparent PNG and lossless WebP for websites, email and presentations. The 1200 px JPG has a solid background.

Download ZIP 403 KB

Full color

PNG · 1200 px WebP · 1200 px JPG · solid

All black

PNG · 1200 px WebP · 1200 px JPG · solid

All white

PNG · 1200 px WebP · 1200 px JPG · solid

More sizes: 600 px and 2400 px

Full color

PNG · 600 px WebP · 600 px PNG · 2400 px WebP · 2400 px

All black

PNG · 600 px WebP · 600 px PNG · 2400 px WebP · 2400 px

All white

PNG · 600 px WebP · 600 px PNG · 2400 px WebP · 2400 px

For a logo displayed 300 pixels wide on a high-density screen, choose a 600 px image. Use PNG if your email or presentation tool does not accept SVG.

Site IconsRoof symbol · Apple touch icons, Safari, SVG, PNG and ICO

The roof from Logo #1, without the wordmark, for small square placements.

Download ZIP 150 KB

Full color

All black

All white

Apple touch icons

Opaque PNGs for iPhone and iPad. The ZIP includes full color, black and white options.

152 × 152 PNG 167 × 167 PNG 180 × 180 PNG

Also included: 57, 60, 72, 76, 114, 120 and 144 px; a 1024 px master; and a default 180 px apple-touch-icon.png.

Browsers & Safari

Multi-size ICO, SVG, transparent and solid PNGs from 16 to 1024 px, a black Safari mask and a web app manifest.

Favicon ICO Safari mask SVG Installation markup

Use opaque PNGs for Apple touch icons. Keep the manifest and its PNG files together. ICNS is for native macOS applications. Setup references: Apple touch icons and Safari pinned tabs.

Logo #1 instructions Go to Logo #2 →

Wide wordmark

Logo #2

Blue #36AAFF with white lettering, all black or all white. Use all white in the top navigation and blue with white lettering in the footer.

Download Logo #2 kit 3.7 MB

Full colorTransparent background

All blackTransparent background

All whiteTransparent background

Checkerboards show transparency and are not included in the files. Full color and white artwork need a dark background.

Quick downloadsFull color PNG Black PNG White PNG

Open a category for individual files and more sizes.

Large PrintSVG vectors for signs, banners and large displays

SVG vectors converted from the supplied PNG, with outlined lettering. No font installation is required.

Download ZIP 39 KB

Full color

SVG · transparent SVG · solid

All black

SVG · transparent SVG · solid

All white

SVG · transparent SVG · solid

Logo #2 is a vector conversion of the supplied image, not an original designer vector. Review it at the final sign size. Solid backgrounds are navy for full color and white artwork, and white for black artwork.

Print Ready6000 × 2000 px · 300 ppi · PNG, TIFF and JPG

Print up to 20 × 6.67 inches at 300 ppi. PNG and TIFF preserve transparency; JPG uses a solid background.

Download ZIP 2.6 MB

Full color

PNG · transparent TIFF · transparent PNG · solid JPG · solid

All black

PNG · transparent TIFF · transparent PNG · solid JPG · solid

All white

PNG · transparent TIFF · transparent PNG · solid JPG · solid

Web Ready600, 1200 and 2400 px · PNG, WebP and JPG

Transparent PNG and lossless WebP for websites, email and presentations. The 1200 px JPG has a solid background.

Download ZIP 493 KB

Full color

PNG · 1200 px WebP · 1200 px JPG · solid

All black

PNG · 1200 px WebP · 1200 px JPG · solid

All white

PNG · 1200 px WebP · 1200 px JPG · solid

More sizes: 600 px and 2400 px

Full color

PNG · 600 px WebP · 600 px PNG · 2400 px WebP · 2400 px

All black

PNG · 600 px WebP · 600 px PNG · 2400 px WebP · 2400 px

All white

PNG · 600 px WebP · 600 px PNG · 2400 px WebP · 2400 px

For a logo displayed 300 pixels wide on a high-density screen, choose a 600 px image. Use PNG if your email or presentation tool does not accept SVG.

Site IconsRoof symbol · Apple touch icons, Safari, SVG, PNG and ICO

The roof from Logo #2, without the wordmark, for small square placements.

Download ZIP 239 KB

Full color

All black

All white

Apple touch icons

Opaque PNGs for iPhone and iPad. The ZIP includes full color, black and white options.

152 × 152 PNG 167 × 167 PNG 180 × 180 PNG

Also included: 57, 60, 72, 76, 114, 120 and 144 px; a 1024 px master; and a default 180 px apple-touch-icon.png.

Browsers & Safari

Multi-size ICO, SVG, transparent and solid PNGs from 16 to 1024 px, a black Safari mask and a web app manifest.

Favicon ICO Safari mask SVG Installation markup

Use opaque PNGs for Apple touch icons. Keep the manifest and its PNG files together. ICNS is for native macOS applications. Setup references: Apple touch icons and Safari pinned tabs.

Logo #2 instructions Original supplied PNG Go to Logo #1 →

Color system

Brand colors

Logo #1 uses #008DD3. Logo #2 uses #36AAFF with white lettering, or its all-black and all-white versions. The supporting palette matches the website. Select a color value to copy it.

Logo #1 blue

RGB 0, 141, 211

Original logo artwork

Logo #2 blue

RGB 54, 170, 255

Wide wordmark roof and Spot lettering

Navy

RGB 15, 63, 104

Headers & primary buttons

Deep navy

RGB 8, 43, 73

Hover & dark surfaces

Accent blue

RGB 54, 170, 255

Highlights on navy

Link blue

RGB 8, 119, 185

Links on white

Ink

RGB 6, 8, 8

Body text

Muted

RGB 98, 114, 134

Secondary text

Line

RGB 220, 228, 235

Borders & dividers

Soft white

RGB 245, 247, 250

Page backgrounds

White

RGB 255, 255, 255

Light surfaces & reverse type

For readable body copy, use ink on white or white on navy. Keep accent blue for emphasis on dark surfaces; use link blue for links on white.

Typography

Two fonts, clear roles

Poppins

Headings and short display statements.

Medium 500 · Semibold 600 · Bold 700

Use 600 for most headings, with compact line spacing around 1.15.

Get Poppins from Google Fonts →

Inter

Body copy, navigation, buttons and form labels.

Regular 400 · Medium 500 · Semibold 600 · Bold 700

Use 400 for paragraphs, with comfortable line spacing around 1.65.

Get Inter from Google Fonts →

Both wordmarks are supplied as outlined artwork. Do not recreate either logo by typing the company name in either font. Use system sans-serif as the fallback for web content.

Consistent every time

How to use the brand

Give the logo room

Leave clear space on every side equal to at least the height of one letter in the wordmark. Keep the proportions locked when resizing.

Suggested minimum: 160 pixels wide on screen or 1.25 inches in print. Check the final output for legibility.

Keep the artwork intact

Use the supplied color, black or white file. Avoid stretching, shadows, outlines, gradients and unapproved colors. Do not crop the house or wordmark.

Use the roof-only icon for small square placements.

Write like myHomeSpot

Write the company name as myHomeSpot and the web address as myHomeSpot.com.

Use clear, helpful language. Name the audience, explain the next step and be specific about the service. Confirm contact details and service claims before publishing.

For websites & digital teams

Web styles & CSS

Use the reusable brand stylesheet for new components, or download the current site stylesheet for a detailed reference.

Download ZIP 9 KB

Brand CSS Current site theme CSS HTML example Brand kit instructions

View the reusable CSS

/* myHomeSpot brand styles, based on the current site and original SVG logo. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');
:root {
  --mhs-logo-blue: #008dd3;
  --mhs-logo-1-blue: #008dd3;
  --mhs-logo-2-blue: #36aaff;
  --mhs-navy: #0f3f68;
  --mhs-navy-dark: #082b49;
  --mhs-accent: #36aaff;
  --mhs-link: #0877b9;
  --mhs-ink: #060808;
  --mhs-muted: #627286;
  --mhs-line: #dce4eb;
  --mhs-surface: #f5f7fa;
  --mhs-white: #ffffff;
  --mhs-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mhs-font-heading: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}
.mhs-brand { font-family: var(--mhs-font-body); color: var(--mhs-ink); line-height: 1.65; }
.mhs-brand :is(h1,h2,h3) { font-family: var(--mhs-font-heading); font-weight: 600; line-height: 1.15; }
.mhs-brand a { color: var(--mhs-link); text-underline-offset: .18em; }
.mhs-brand .mhs-button { display: inline-block; padding: .8rem 1.25rem; border-radius: 8px; background: var(--mhs-navy); color: #fff; font-weight: 600; text-decoration: none; }
.mhs-brand .mhs-button:hover { background: var(--mhs-navy-dark); }
.mhs-brand :focus-visible { outline: 3px solid var(--mhs-link); outline-offset: 4px; }
.mhs-logo { display: block; width: 240px; max-width: 100%; height: auto; }

The reusable file uses mhs- names and a .mhs-brand wrapper to keep styles scoped. The current site theme is a complete reference, including navigation and footer rules. Review it before adding it to a different website.

Ready for your next project?

Keep the complete kit on hand, or return to your employee tools.

Back to Employee Center →