This is an old revision of the document!
Table of Contents
OARC Branding
This page is designed to serve as a guide to our visual identity, including our logos, colour palette, and font information. The page is intended to help us represent ourselves consistently across all our communications
Colour Pallets
OARC Blue
<style type="text/css">
/* Palette color codes */
/* Feel free to copy&paste color codes to your application */
.primary-1a { background-color: #2185FC }
.primary-2a { background-color: #0878FF }
.primary-0a { background-color: #005FD1 }
.primary-3a { background-color: #00479C }
.primary-4a { background-color: #00387A }
/* end */
body {
margin:0; padding: 2em;
background: #fff;
color: #000;
font: 12px/1.33 "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
text-align:left;
}
h1 {
margin: 0.5em 0;
font-size: 200%;
}
p {
margin: 0.5em 0;
}
.color-table {
margin: 2em 2em 5em;
border-collapse:collapse;
border:none;
border-spacing:0;
font-size:100%;
}
.color-table th {
padding: 0 1em 0 0;
text-align: right;
vertical-align: middle;
font-size: 100%;
font-weight: normal;
border: none;
}
.color-table td.sample {
width:6em; height:6em;
padding: 10px;
text-align:center;
vertical-align:middle;
font-size:90%;
border: 1px solid white;
white-space:nowrap;
}
.color-table td.sample-0 {
width:18em;
}
.color-table.small td.sample {
width:3em; height:3em;
padding:0;
border:none;
}
.color-table.small td.sample-0 {
width:9em;
}
.color-table .white { margin-bottom:0.2em; color:white }
.color-table .black { margin-top:0.2em; color:black }
hr {
margin: 2em 0 1em 0;
border:none;
border-bottom:1px solid silver;
}
#footer {
padding:1em;
text-align:center;
font-size:80%;
}
</style>
<table class="color-table">
<tbody><tr>
<th>Primary color:</th>
<td class="sample sample-1 primary-1a">
<div class="white">#2185FC</div>
<div class="black">#2185FC</div>
</td>
<td class="sample sample-2 primary-2a">
<div class="white">#0878FF</div>
<div class="black">#0878FF</div>
</td>
<td class="sample sample-0 primary-0a">
<div class="white">#005FD1</div>
<div class="black">#005FD1</div>
</td>
<td class="sample sample-3 primary-3a">
<div class="white">#00479C</div>
<div class="black">#00479C</div>
</td>
<td class="sample sample-4 primary-4a">
<div class="white">#00387A</div>
<div class="black">#00387A</div>
</td>
</tr>
</tbody></table>
<table class="color-table small">
<tbody><tr>
<th>Primary color:</th>
<td class="sample sample-1 primary-1a"></td>
<td class="sample sample-2 primary-2a"></td>
<td class="sample sample-0 primary-0a"></td>
<td class="sample sample-3 primary-3a"></td>
<td class="sample sample-4 primary-4a"></td>
</tr>
</tbody></table>
<style type="text/css">
/* Palette color codes */
/* Feel free to copy&paste color codes to your application */
.primary-1 { background-color: #31B64E }
.primary-2 { background-color: #0AAA2D }
.primary-0 { background-color: #008A1E }
.primary-3 { background-color: #007019 }
.primary-4 { background-color: #004F11 }
/* end */
body {
margin:0; padding: 2em;
background: #fff;
color: #000;
font: 12px/1.33 "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
text-align:left;
}
h1 {
margin: 0.5em 0;
font-size: 200%;
}
p {
margin: 0.5em 0;
}
.color-table {
margin: 2em 2em 5em;
border-collapse:collapse;
border:none;
border-spacing:0;
font-size:100%;
}
.color-table th {
padding: 0 1em 0 0;
text-align: right;
vertical-align: middle;
font-size: 100%;
font-weight: normal;
border: none;
}
.color-table td.sample {
width:6em; height:6em;
padding: 10px;
text-align:center;
vertical-align:middle;
font-size:90%;
border: 1px solid white;
white-space:nowrap;
}
.color-table td.sample-0 {
width:18em;
}
.color-table.small td.sample {
width:3em; height:3em;
padding:0;
border:none;
}
.color-table.small td.sample-0 {
width:9em;
}
.color-table .white { margin-bottom:0.2em; color:white }
.color-table .black { margin-top:0.2em; color:black }
hr {
margin: 2em 0 1em 0;
border:none;
border-bottom:1px solid silver;
}
#footer {
padding:1em;
text-align:center;
font-size:80%;
}
</style>
</head>
OARC Emerald
<table class="color-table">
<tbody><tr>
<th>Primary color:</th>
<td class="sample sample-1 primary-1">
<div class="white">#31B64E</div>
<div class="black">#31B64E</div>
</td>
<td class="sample sample-2 primary-2">
<div class="white">#0AAA2D</div>
<div class="black">#0AAA2D</div>
</td>
<td class="sample sample-0 primary-0">
<div class="white">#008A1E</div>
<div class="black">#008A1E</div>
</td>
<td class="sample sample-3 primary-3">
<div class="white">#007019</div>
<div class="black">#007019</div>
</td>
<td class="sample sample-4 primary-4">
<div class="white">#004F11</div>
<div class="black">#004F11</div>
</td>
</tr>
</tbody></table>
<table class="color-table small">
<tbody><tr>
<th>Primary color:</th>
<td class="sample sample-1 primary-1"></td>
<td class="sample sample-2 primary-2"></td>
<td class="sample sample-0 primary-0"></td>
<td class="sample sample-3 primary-3"></td>
<td class="sample sample-4 primary-4"></td>
</tr>
</tbody></table>
Font Faces
Font Type: Sans-serif
Guidance
Headlines or Titles: 20-36 pt (depending on the size of the document) Subheadings: 14-18 pt Body Text: 10-14 pt Captions or Labels: 8-10 pt
Templates
Logo's and Presentation Files
https://drive.google.com/drive/folders/1c1Dn0bdlIOu-9TssLFQbeUjK6GfRIwCy?usp=sharing