04 | Design

Style Guide

The style guide consists of the different branding assets that we’re curated throughout the whole project. We used the logo to create the main styling components of the website, adding some character by unlinking the houses in the logo and using it to frame the content in the website.

The type that we chose is Raleway for the main title and headers. This type is more stylized with rounder and bolder letters, making it stand out.

Roboto is our main body text. We chose this because of it’s more consistent letter thickness and taller look, making the body text easy on the eyes and readable

For the colors, we used different blue tones, close to the brand guidelines sent to us by our client. We used these as the main colors to follow brand consistensy.

The greens are used to show contrast and make call to actions “pop”, making it easy to guide users to essential pages.

The icons used for the infographic chart are rounded

We stayed consistent with using green as a primarily call to action color. We utilized a more subdued green in drop down menus to provide focus and to show micro interactions.

The drop down menus, arrows and popups all used different shades of blue, to indicate information but not necessarily a call to action.

We made the input boxes big and clear to so users wouldn’t miss it.

Main call to action buttons utilize the green, making it easy to spot and to give color hierarchy to the website.