Colour Palette

Main brand colours are used throughout the site to tie into the brand identity.

Primary

$primary-colorHEX:

Secondary

$secondary-colorHEX:

Tertiary

$tertiary-colorHEX:

Accent colours are alternate colours that complement the brand identity colours.

Active/Hover

$color-highlightHEX:

Accent 1

$accent--1HEX:

Accent 2

$accent--2

HEX:

Accent 3

$accent--3HEX:

Foundation colours are default foundation colours for interactive elements such as buttons.

Alert

$alert-colorHEX:

Success

$success-colorHEX:

Warning

$warning-colorHEX:

Black

$color-defaultHEX:

Light Gray

$light-grayHEX:

Medium Gray

$medium-grayHEX:

Dark Gray

$dark-grayHEX:

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"

p class="title-secondary"

p class="lead"

p class="caption"

Callout Boxes

Callout Default

This is a callout

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

Callout Dark

This is a callout

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

Callout Note

This is a callout

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

Callout Alert

This is a callout

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

Callout Success

This is a callout

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

Callout Warning

This is a callout

<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>