Housecall Pro logo

Housecall Pro Design Language

Brand Principles

At Housecall Pro, we’re building a platform to change the home services space. Our mission is to make every step of the home services chain better for homeowners and services pros alike.

Get pros, keep pros

We, as a company, are customer advocates first and foremost. Everything that we build, write, design, and create should be done intentionally, and always in service of finding, onboarding, and keeping our customers. Whenever possible, use research and feedback to inform your decision-making so your ideas can translate to how real pros think and work.

Empower but don’t overwhelm

Housecall Pro is a powerful tool that simplifies how service pros run their business. Even though our product is complicated, using it should feel effortless. We can accomplish this by removing unnecessary steps and explanations to make sure people understand exactly what they’ll need to do throughout the experience.

Build an efficient and cohesive experience

Housecall should feel like a cohesive experience to service pros, no matter where they are in the product, across all platforms and devices. We want to use consistent language, patterns, and components across all interfaces to make it easy for a busy office admin to explain to each of her team members, both in the office and in the field, how to get something done. Our end goal should always be to streamline and optimize workflows, in order to intelligently anticipate needs to help people work better, smarter, and faster.

Be refined but not ornamental; Enhance, don’t embellish

Housecall should look good and feel like a professional, premier experience, but not for the sake of being pretty. Every aesthetic decision—from how we design layouts and components to choices about color—should be purposeful.

Color

The use of color should help bring attention to what matters most. Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Use restraint.

Color creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change. It separates elements and groupings in a layout and plays a crucial role in accommodating all types of users.

Our Color Palette

Blue500

#2196F3

Blue Primary

Blue700

#1976D2

Blue Secondary

Red Primary

#FF5252

Red Primary

Grey100

#F5F5F5

Grey100

Grey200

#EEEEEE

Grey200

Grey300

#E0E0E0

Grey300

Grey400

#BDBDBD

Grey400

Grey500

#9E9E9E

Grey500

Grey600

#757575

Secondary Text

Grey700

#616161

Grey700

Grey800

#424242

Grey800

Grey900

#212121

Primary Text

Accessibility

We want our product to be accessible to everyone, including the 9.1% of adults with vision trouble [Source: Disability and Functioning, CDC], and 8% of men and 0.5% of women who are color blind [Source: Color Blind Awareness]. Whenever possible, strive to meet all web accessibility standards, including the minimum contrast ratios that the WCAG 2.0 specifies for text and background colors according to their AA level.

Typography

Typography is the atomic element of good interface design. Good type is invisible. When type is well set, the user can focus on what you’re trying to say rather than how you’re saying it.

Typeface

Lora is our marketing content header typeface. This typeface is only used in H1 and H2 use-cases.

Open Sans is our marketing content copy typeface. This typeface is used for copy on website and advertisements. It holds, displays, and organizes information with intentional neutrality and never attempts to outshine the content.

Typescale

The styles defined in the typographic scale are the primary way to communicate visual hierarchy in text. By using a type scale, you fulfill users’ expectations by giving order to how things should be communicated and how they should appear. This scale is a design tool, but not a guarantee. Good type still relies on designers to apply aesthetic sensibility to their overall layout in a way that addresses user needs.

This is a sentence.

Display Title

Font-family: Lora

Font-size: 3.125em

Font-weight: 700

This is a sentence.

Title

Font-family: Lora

Font-size: 2.75em

Font-weight: 700

This is a sentence.

Heading

Font-family: Open sans

Font-size: 2.25em

Font-weight: 500

This is a sentence.

Body

Font-family: Open sans

Font-size: 1em

Font-weight: 400

This is a sentence.

Caption

Font-family: Open sans

Font-size: 0.875em

Font-weight: 400

Voice & Tone

Housecall’s voice is a reflection of who we are. We should always sound like Housecall, but our tone adapts appropriately to the context and situation. The best way to decide what tone to use is to ask yourself what a pro is likely feeling when they encounter your message so you can decide how to respond.

Friendly - Write like a human

Housecall’s voice is human. It’s familiar, friendly, and straightforward. Our priority is explaining our products and helping our users get their work done so they can get on with their lives. Don’t be afraid to break a few rules if it makes your writing more relatable.

Educate - Expert but not Bossy

Tell readers what they need to know, not just what we want to say. Give them the exact information they need, along with opportunities to learn more. Remember that you’re the expert, and readers don’t have access to everything you know. We want to educate people without patronizing or confusing them.

Conversational - Informal but not sloppy

Our service pros can often have down and dirty jobs, but they’re still business owners who’ve worked hard to get to where they are. We want to be accessible and conversational, but never clumsy or careless in our grammar and word choice.

Write for a 7th grade reading level

Our pros are busy people who are running their business in addition to managing their family life, and doing a million other things. Writing for a grade 7 reading level doesn’t mean dumbing content down. It’s about making sure language is straightforward and communicates concepts as efficiently as possible.