Style Guide (Compasscard.ca)

Voice and Tone :

Compass is designed to be professional, easy to use, simple, and visually appealing. There are no areas with unneeded information because the goal is to visually identify where you need to go quickly without using the help section. Since it is a website designed around your compass card, it is best that it is effective in the sense that you do not have to navigate through a lot of pages to get where you need to be. It should be pleasant enough that youre eyes do not want to engage the colors or not want to look around.

These colors are used in this project :

The font which is used in this project is :

font-family: 'Source Sans Pro', sans-serif;

Only use these font weights of this font family : 300, 400, 700

Sign in page


.sign-in{
	height: 65%;
	background-color: #2b4a6b;
	display: flex;
	flex-direction: column;
	margin: 5% auto;
}
				

.sign-in > *{
	color: #d8d8d8;
	margin-bottom: 4%;
	margin-left: 5%;
}
				

background-color: white;
margin-left: 0;
padding: 5%;
color: #2b4a6b;
font-size: 2em;
font-weight: 700;
				

.sign-in p:nth-of-type(1){
	font-size: 1.5em;
	font-weight: 300;
	margin-bottom: 1.5%;
}
				

.sign-in p:nth-of-type(2){
	font-size: .95em;
	font-weight: 300;
	padding-left: 1%;
	color: #5da77a;
	letter-spacing: 1.5px;
}
				

.sign-in p:nth-of-type(2) a{
	text-decoration: none;
	color: #d8d8d8;
}
				

form{
	width: 70%;
	border: solid 1px #d8d8d8;
}

label{
	font-size: 1.2em;
	font-weight: 300;
	margin-bottom: 1%;	
	color: #d8d8d8;
}

label[for="email"],
label[for="password"]{

	margin-left: 5%;
}

input.sign-in{
	display: inline-block;
	margin-left: 2%;
	width: 40%;
	height: 6%;
	margin-bottom: 3%;
	background-color: #d8d8d8;
}

input[type="email"]{
	margin-left: 5.5%;
	margin-top: 5%;
}

input[type="txt"]{

	margin-left: 10%;
}

input:not([type="submit"]):focus{
	outline: none;
	border: solid 1px #5da77a;
}

button[type="submit"] {
	width: 15%;	
	padding-top: 1%;
	padding-bottom: 1%;
	background-color: #d8d8d8;
	border: solid 5px #5da77a;
	font-size: 0.9em;
	float: right;
	margin-right: 10%;
	margin-bottom: 2%;
	cursor: pointer;
}

.submit-form{
	text-decoration: none;
	font-weight: 300;
	color: #2b4a6b;
}
				

UPass 01 page : Where the user input the school information


.upass01{
	height: 55%;
	background-color: #2b4a6b;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}
				

.upass01 > *{
	color: #d8d8d8;
	margin-bottom: 4%;
	margin-left: 5%;
}
				

.upass01 p{
	font-size: 1.5em;
	font-weight: 300;
	margin-top: 5%;
	margin-bottom: 3%;	
}
				

<div class="banner-logout">
			
	<div class="log-out">
	<ul >
		<li> Hello, Faezeh 
		<li> log out 
	</ul>
	</div><!--  end of log-out -->

	<img class="image-banner" src="imgs/upass-desktop.png">
</div><!-- end of banner-logout -->
				

.banner-logout{
	margin-top: 3%;
	margin-bottom: 0;
	position: relative;
}

.log-out{
	position: absolute;
	right: 0;
	height: 12%;
	width: 100%;
}

.log-out ul{
	display: flex;
	margin-left: auto;

}

.banner-logout .log-out li:nth-of-type(1){
	padding-left: 2%;
	color: #5da77a;
	margin-right: auto;
	padding-top: 1.5%;
	font-weight: 400;
	font-size: 1.1em;
}

.log-out li:nth-of-type(2){
	padding-right: 2%;
	cursor: pointer;
	color: #2b4a6b;
	padding-top: 1.5%;
	font-weight: 400;
	font-size: 1.1em;
}

.banner-logout img{
	max-width: 100%;
}
				

.sub-menue{
	margin-top: 1%;
}

.sub-menue ul{
	display: flex;
}

.sub-menue li{
	padding: 1.5%;
	background-color: #d8d8d8;
	flex: 1;
}

.sub-menue a{
	text-decoration: none;
	font-weight: 300;
	color: #2b4a6b;
	width: 100%;
	display: block;
	text-align: center;
}

.sub-menue li:nth-of-type(1){
	background-color: #2b4a6b;
}

.sub-menue .upass {
	color: #d8d8d8;
}
				

form.upass-enter {
	border: solid 1px #d8d8d8;
	width: 70%;
	height: 64%;
}

form.upass-enter label{
	font-size: 1.2em;
	font-weight: 300;
	margin-bottom: 1%;	
	color: #d8d8d8;
}

label[for="email"],
label[for="password"],
label[for="school"],
label[for="studentnumber"]{
	margin-left: 5%;
}

input{
	display: inline-block;
	width: 40%;
	height: 4.5%;
	margin-bottom: 3%;
	background-color: #d8d8d8;
	font-size: 1em;
	padding-left: 1%;
}

 input.upass01{
	height: 13%;
	margin-left: 10.5%;
	display: inline-block;
	width: 40%;
	margin-bottom: 3%;
	background-color: #d8d8d8;
	font-size: 1em;
	padding-left: 1%;
}

input[type="text"].upass01{
	height: 13%;
	margin-left: 11.3%;
}

input:not([type="submit"]):focus{
	outline: none;
	border: solid 1px #5da77a;
}

select{
	display: inline-block;
	margin-left: 2%;
	width: 40%;
	height: 14%;
	margin-bottom: 3%;
	margin-top: 6%;
	background-color: #d8d8d8;
}

select:focus{
	outline: none;
	border: solid 1px #5da77a;
}

button[type="save"] {
	width: 15%;	
	padding-top: 1%;
	padding-bottom: 1%;
	background-color: #d8d8d8;
	border: solid 5px #5da77a;
	font-size: 0.9em;
	float: right;
	margin-right: 10%;
	margin-bottom: 2%;
	cursor: pointer;
}

.submit-form{
	text-decoration: none;
	font-weight: 300;
	color: #2b4a6b;
}
				

UPass 02 page : Where the user request UPass for each month


.upass02{
	height: auto;
	background-color: #2b4a6b;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	color: #d8d8d8;
}
				

.upass02 p{
	font-size: 1.5em;
	font-weight: 300;
	margin-top: 5%;
	margin-left: 8%;
}
				

.upass02 p:nth-of-type(2){
	margin-top: 2%;
}
				

.upass02 p:nth-of-type(2){
	margin-top: 2%;
}
				

form.request-upass{
	border: solid 1px #d8d8d8;
	width: 70%;
	height: auto;
	margin: 3% auto;
	margin-left: 8%;
}

label[for="month"],
label[for="eligible"],
label[for="request"]{
	margin-left: 2%;
	padding-right: 15%;
	padding-top: 2%;
	color:  #5da77a;
}

label[for="april"],
label[for="processed"]{
	margin-left: 2%;
	padding-right: 15%;
	margin-top: 2%;
}

label[for="yes"]{
	padding-right: 22%;
}

input[type="checkbox"]{
	padding-right: 3%;
	width: 10%;
}
label[for="able to request"]{
	padding-left: 6%;

}
				

<form class="notification" action="#" method="post">
    <p> Choose to receive notifications via email, SMS text to your mobile phone, or both :</p>
    <label for="contact">Contact</label><br>
		<input class="upass02-in01" type="txt" id="contact" name="student-contact" placeholder="Please enter your email address">
		<h6>To change, enter in a new email and click 'Save'. </h6>

	<label for="phone">Phone Number</label><br>
    <input class="upass02-in02" type="txt" id="phone" name="student-phone" placeholder="Please enter your phone number">
    <h6>To change, enter a new number and click 'Save.</h6>
    
    <label for="days">When do you want to receive reminders?</label><br>
    <input class="upass02-in03" type="txt" id="days" name="days-inadvanced" placeholder="Enter up to 10"><span>days in advance</span><br>

	<button class="button-notification" type="save"><a class="submit-notification" href="index.html">Save</a></button>
</form>
				

form.notification{
	border: solid 1px #d8d8d8;
	width: 70%;
	height: auto;
	margin: 3% auto;
	margin-left: 8%;
}

.notification p{
	margin: 3%;
	color: #5da77a;
	font-size: 1.1em;
}

label[for="contact"],
label[for="phone"],
label[for="days"]{
	margin-left: 3%;
}

input{
	height: 4.5%;
}

input[type="txt"].upass02-in01 {
	width: 30%;
	font-size: 0.8em;
	padding-left: 0.1%;
	margin-left: 3%;
	margin-top: 2%;
	margin-bottom: 1.5%;
}

input[type="txt"].upass02-in02 {
	width: 30%;
	font-size: 0.8em;
	padding-left: 0.1%;
	margin-left: 3%;
	margin-top: 2%;
	margin-bottom: 1.5%;
}

input[type="txt"].upass02-in03 {
	width: 30%;
	font-size: 0.8em;
	padding-left: 0.1%;
	margin-left: 3%;
	margin-top: 2%;
	margin-bottom: 1.5%;
}


.submit-notification{
	text-decoration: none;
	font-weight: 300;
	color: #2b4a6b;
}

.notification h6{
	font-size: 0.8em;
	font-weight: 300;
	margin-bottom: 3%;
	margin-left: 3%;
	color: #5da77a;
}

.notification span{
	font-weight: 300;
	font-size: 0.9em;
	padding-left: 1%;
}
				

<div class="contacts-messages">
	<table class="table02">
		<thead>
			<tr>
				<th> Request Help 
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><img class="icon" src="imgs/support-icon.png"> Live Chat - va href="#"> Click Here </a></td>
			</tr>
			<tr>
				<td><img class="icon" src="imgs/email-icon.png"><a href="#"> Support@support.com </a></td>
			</tr>
			<tr>
				<td><img class="icon" src="imgs/live-chat-icon.png"><a href="#"> 604-999-1234 </a></td>
			</tr>
		</tbody>
</table>
				

.contacts-messages{
	display: flex;
}

table{
	border: solid 1px #d8d8d8;
	width: 70%;
	height: 20%;
	margin: 3% auto;
	margin-left: 8%;
	color: #d8d8d8;
}

thead{
	background-color: #5da77a;
	color: black;
}

table th{
	padding: 3%;
}

table td{
	text-align: center;
	padding-top: 3%;
	font-weight: 300;
}

table.table02{
	width: 30%;

}

table.table02 td{
	text-align: left;
	padding-left: 5%;
}

table.table02 td a{
	text-decoration: none;
	color: #d8d8d8;
	cursor: pointer;
}
img.icon {
	width: 10%;
	height: 25%;
	margin-right: 5%;
}
				

.messages{
	width: 30%;
	margin-right: 22%;
	margin-top: 3%;
	border: solid 1px #d8d8d8;
}

.messages h3{
	font-size: ;
	background-color: #5da77a;
	padding: 3%;
	color: black;
	text-align: center;
}

button.accordion {
  	background-color: #2b4a6b;
    color: #d8d8d8;
    cursor: pointer;
    padding: 6% 4%;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 0.9em;
    transition: 0.4s;
    font-weight: 300;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
    color: #2b4a6b;
}

button.accordion:after {
    content: '\002B';
    color: #5da77a;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
button.accordion.hover:after{
	color: #5da77a;
	content: '\002B';
}

button.accordion.active:after {
    content: "\2212";
    color: #5da77a;
}

div.panel {
    padding: 0 18px;
    background-color: #ddd;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel p{
	font-size: 1em;
	color: #2b4a6b;
	text-align: left;
	margin-left: 0;
	margin-bottom: 2%;
	line-height: 25px;
}