Header, logo, and font
Guidelines to bring applications closer to the Region of Peel brand.
Basic header
The Region of Peel logo
The logo is availabe in white or black depending on the background on which they are to be placed on. The dimensions are 200px wide by 53px tall. Do not resize the logo.
Font
Currently we are using Open Sans with weights of 300,400, and 600.
- Light (we only use for intro text): 300
- Normal body text: 400
- Bold: 600
Sizes
Base font:
Should be the equivalent of 16px / 1em / 100% of browser default
body{
font-size: 100%;
color: #333;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
Heading 1:
h1{
font-size: 2.25em;
font-weight: 600;
margin: 13px 0 5px;
line-height: 1.25em;
color: #000;
}
Heading 2:
h2{
color: #1F1F1F;
font-size: 1.5em;
font-weight: 600;
margin: 40px 0 20px;
}
Heading 3:
h3{
font-size: 1.175em;
font-weight:600;
}
Element colours
| Colour | Name | HEX | RGB | HSL | Sample use |
|---|---|---|---|---|---|
| Dark blue | #01468c | rgb(1 70 140) | hsl(210deg 99% 28%) | Header and footer should use this | |
| Light blue | #f3f8fd | rgb(243 248 253) | hsl(210deg 71% 97%) | Callout-box background | |
| Light blue border | #6e91b4 | rgb(110 145 180) | hsl(210deg 32% 57%) | Callout-box and border |
