Style Guide

The most important part of this application is that it is user friendly. We want to make sure that this system is easy to follow by reducing confusion. To do this, we are going to be enforcing a certain look and feel so that the whole application is cohesive. We do not want a user to have to search around looking for a button because they expect it to be one color when it is another.

Fonts:

SegoeUI
Roboto
Arial

Colors:

(Please make sure you use only black, white, and the following colors)

#5C629C

#343A40

#868E96

#B2B2B2

#E9ECEF

#F7F7F7

#DC3545

To make sure that interacting with the buttons looks the same across the application, we have created the following classes for the different types of button.

Element	Class
Submit/Create/Back Buttons	cpca
Secondary Grey Buttons (Print)	btn-secondary
Secondary White Buttons	btn-outline-secondary
Delete Buttons	btn-outline-danger

If you are confused about which category a button falls under, or have any other style questions, please feel free to contact us through the web-app slack channel.