Style Guide

1. Colour Palette

HEX: #D93A1D

Headers, Sub-headers, Links, Icons, & Buttons

HEX: #BF351C

Buttons Hover/Focus, & Curves Background

HEX: #989898

Body Text & Logo

HEX: #F2F2F3

Form Fields/Background Devider

HEX: #E8E8E8

Borders

2. Typography

Type Weight Size

H1 Header

 Bold 2.4em

H2 Header

 Bold 2em

H3 Header

 Bold 1.5em

H4 Header

 Bold 1.25em
H5 Header
 Bold 1.25em

Sub-header

 Regular 20px

Body Text

 Regular 16px
Buttons Bold 16px

About Source Sans Pro

Source Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

View on Google Fonts
Download Font

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫὰάὲέὴήὶίὸόὺύὼώΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

3. Iconography

Font Awesome

An icon toolkit used throughout the Uniserve website that contains vector icons and social logos.

The icon set used throughout the website is the regular set. Please use the REGULAR style for all current and future iconagraphy.

View Icon Library

4. Buttons

Normal

Button

Hover / Focus

Button 

					
.btn-default {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: none;
	padding: 10px 40px !important;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 7px;
	transition: 
		color 0.15s ease-in-out, 
		background-color 0.15s ease-in-out, 
		border-color 0.15s ease-in-out, 
		box-shadow 0.15s ease-in-out;
	cursor: pointer;
	color: #fff;
	background: #D93A1D;
	position: relative;
	z-index: 2;
}

.btn-default:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 7px;
    background: url('https://uss.pfcd.ca/wp-content/themes/uniserve-personal/img/curves.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    z-index: -1;
}

.btn-default:hover {
    color: #fff !important;
    background: #BC442B;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

5. Fields

Text Field



Select Field



Radio Field



Checkbox Field


Textarea



					
input, select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 12px 10px;
    background: #F2F2F3;
    border: 1px solid #E8E8E8;
    border-radius: 5px;
    color: #989898;
    outline: 0;
}
 
input[type="radio"] {
    height: 10px;
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
    transform: scale(1.5);
}

input[type="checkbox"] {
    height: 10px;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    transform: scale(1.5);
}

textarea {
    height: 200px !important;
}