Compass Style Guide

Visual Styles

Color Palette:

#009cdb

#1281bf

#efeff0

Logo:

Compass Logo on Blue Background Compass Logo on White Background

Buttons:

Information Box

Fonts

Font Family: Roboto

Weights: 400, 500, 700

Header Level 1: weight 700, 2.1rem

Header Level 2: weight 700, 1.5rem

Header Level 3: weight 700, 1.2rem


This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, mollitia, animi. Inventore magni adipisci beatae recusandae quam consequuntur.

This is a Link.

Layouts

wireframe of mobile main page wireframe of mobile login page wireframe of mobile vibalance page wireframe of mobile reloading page wirefram of mobile reload success page

Voice

Our voice is straightforward and professional without being too wordy or overly complex. The main priority and goal of our target demographics are people only go on the website to perform a specific task and find specific information about the Compass card and/or services. We want to make things easy to understand for the even the least tech-savvy person, as the target users come from a wide range of demographics. Information and processes should be worded in an easily digestible way and not bore the user with too many convoluted details and descriptions.


Compass' voice is:

  • Informative but not boring or dry
  • Helpful but not patronizing
  • Friendly but not overly emotional or casual
  • Smart but not pretentious

Tone

It is important to consistently maintain a professional, yet friendly tone that does not get monotonous or overly complicated. Use language that will express a level of authority and knowledge to the user, but avoid “talking down” to them.


People that use the Compass website come from a wide range of demographics, so to avoid confusion and any potential linguistic issues, refrain from using any slang (especially words and phrases that only select demographics will understand).