Colour Palette

Main brand colours are used throughout the site to tie into the brand identity.
Primary
$primary-color
HEX:
Secondary
$secondary-color
HEX:
Tertiary
$tertiary-color
HEX:
Accent colours are alternate colours that complement the brand identity colours.
Active/Hover
$color-highlight
HEX:
Accent 1
$accent--1
HEX:
Accent 2
$accent--2
HEX:
Accent 3
$accent--3
HEX:
Foundation colours are default foundation colours for interactive elements such as buttons.
Alert
$alert-color
HEX:
Success
$success-color
HEX:
Warning
$warning-color
HEX:
Black
$color-default
HEX:
Light Gray
$light-gray
HEX:
Medium Gray
$medium-gray
HEX:
Dark Gray
$dark-gray
HEX:

Font Families

Open Sans and Open Sans Condensed are the standard approved fonts. The web-safe version is supplied by Google Fonts, and only a limited amount of weights and styles have been included for performance.

View Open Sans and Droid Serif on Google Fonts


Aa Body text
Aa Headings Primary
Aa Headings Secondary

Headings

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use a CSS custom class to override the default size. Colours can be changed in the editor.

Heading 1

The main page header of this guide is an <h1> element. Please reserve h1 for individual page titles only.


Heading 2

The header above is an <h2> element, which may be used for any form of page-level header which falls below the <h1> header in a document hierarchy. More than one may be used per page.


Heading 3

The header above is an <h3> element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy. More than one may be used per page.


Heading 4

The <h4> elements should always fall below an <h3> element.


Heading 5

The <h5> elements should always fall below an <h4> element.


Heading 6

The <h6> elements should always fall below an <h5> element and should be reserved for legalese or fine-print.



Text Colouring

For special use cases only. Use sparingly.

An h4 with primary text

.color-primary


An h4 with secondary text

.color-secondary


An h4 with Accent 1 text

.color-accent-1


An h4 with Accent 2 text

.color-accent-2


An h4 with Accent 3 text

.color-accent-1


An h4 with success text

.color-warning


An h4 with alert text

.color-alert


An h4 with reversed text

.color-default-reversed


An h4 with secondary reversed text

.color-disabled-reversed


An h4 with dark gray text

.color-darkgray


An h4 with medium gray text

.color-mediumgray



Blockquote

Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov


Custom Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

p class="title"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

p class="title-secondary"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

p class="lead"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

p class="caption"

Callout Boxes

Callout Default

This is a callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<table class="callout--default"> <tbody> <tr> <td>content here</td> </tr> </tbody> </table>

Callout Dark

This is a callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<table class="callout--dark"> <tbody> <tr> <td>content here</td> </tr> </tbody> </table>

Callout Note

This is a callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<table class="callout--note"> <tbody> <tr> <td>content here</td> </tr> </tbody> </table>

Callout Alert

This is a callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<table class="callout--alert"> <tbody> <tr> <td>content here</td> </tr> </tbody> </table>

Callout Success

This is a callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<table class="callout--success"> <tbody> <tr> <td>content here</td> </tr> </tbody> </table>

Callout Warning

This is a callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<table class="callout--warning"> <tbody> <tr> <td>content here</td> </tr> </tbody> </table>

Buttons

Primary Sml Primary Primary Lrg
<a class="button--small">Primary Sml</a>  <a class="button--default">Primary</a>  <a class="button--large">Primary Lrg</a>
Secondary Sml Secondary Secondary Lrg
<a class="button--secondary--small">Secondary Sml</a>  <a class="button--secondary--default">Secondary</a>  <a class="button--secondary--large">Secondary Lrg</a>
Alternate Sml Alternate Alternate Lrg
<a class="button--alternate--small">alternate Sml</a>  <a class="button--alternate--default">alternate</a>  <a class="button--alternate--large">alternate Lrg</a>
REVERSED SML REVERSED REVERSED LRG
<a class="button--reversed--small">reversed Sml</a>  <a class="button--reversed--default">reversed</a>  <a class="button--reversed--large">reversed Lrg</a>