Skip to content

Website Style Kit

This page outlines the current colours, styles and design standards for this website

Brand Colours

Primary
Rich Black
Tan
Tan 100
Body text

Text 2XL

Text XL

Text LG

Text MD (Normal)

Text sm

Text xs

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Topography partials

h1 partial

h2 partial

h3 partial

This is a paragraph using the paragraph partial. Nam liber tempor cum soluta...

This is a caption

Text block heading

Sub Heading

Lede text - eiusmod labore do ad minim aute deserunt irure in id. Incididunt amet ipsum nisi sit consequat et minim anim proident adipisicing irure proident aliquip est.

Brand text - Enim nulla do officia minim et eiusmod veniam velit officia deserunt culpa consequat qui proident.

Minim exercitation esse velit. Nisi nulla consectetur elit dolore labore labore laboris adipisicing labore ut occaecat ex enim. Nulla amet est ipsum elit nisi deserunt. Nisi ad nulla minim consequat esse in aliquip et eu sunt mollit eu nulla reprehenderit sit. Duis officia laborum ad mollit sint pariatur ipsum enim eiusmod ipsum aliqua in ipsum aute ad.

Anim id nostrud et.

“Pull quote”
- Brendyn

Buttons

Primary Primary outline Light Light Outline Inline

Media and text (even)

Sub heading

This is the content

Placeholder image.
Image caption

Media and text (no gap)

Sub heading

This is the content

Placeholder image.
Image Caption

Media and text (no gap)

Sub heading

This is the content

Placeholder image.
Image Caption

Media and text (Edge to centre, a lot of text)

Sub heading

This is the content. Id nulla quis pariatur ea Lorem velit non. Est duis quis voluptate aliquip culpa ea non ipsum et aliquip. Occaecat minim aliquip sit id irure eu ullamco reprehenderit ut ea dolor. Eiusmod ex reprehenderit quis qui enim dolor exercitation. Nostrud enim non amet fugiat reprehenderit elit ut anim velit. Excepteur consectetur laborum laboris minim. Laborum ad irure adipisicing incididunt commodo eiusmod.

Est veniam velit irure voluptate qui non commodo laboris. Consectetur magna nulla eu. Magna eiusmod et cillum laboris nisi magna Lorem labore cillum dolore officia sint. Velit dolor dolore duis ex velit mollit fugiat est quis tempor ex. Veniam quis in cillum incididunt adipisicing dolore laboris excepteur consectetur enim dolor elit ut. Pariatur labore cillum aute culpa ullamco velit ut.

Est veniam velit irure voluptate qui non commodo laboris. Consectetur magna nulla eu. Magna eiusmod et cillum laboris nisi magna Lorem labore cillum dolore officia sint. Velit dolor dolore duis ex velit mollit fugiat est quis tempor ex. Veniam quis in cillum incididunt adipisicing dolore laboris excepteur consectetur enim dolor elit ut. Pariatur labore cillum aute culpa ullamco velit ut.

Placeholder image.
Image caption

Media and text (Edge to centre, a bit of text)

This is the content. Id nulla quis pariatur ea Lorem velit non. Est duis quis voluptate aliquip culpa ea non ipsum et aliquip. Occaecat minim aliquip sit id irure eu ullamco reprehenderit ut ea dolor. Eiusmod ex reprehenderit quis qui enim dolor exercitation. Nostrud enim non amet fugiat reprehenderit elit ut anim velit. Excepteur consectetur laborum laboris minim. Laborum ad irure adipisicing incididunt commodo eiusmod.

Placeholder image.

Columns Block

Sub heading

Eiusmod labore do ad minim aute deserunt irure in id. Incididunt amet ipsum nisi sit consequat et minim anim proident adipisicing irure proident aliquip est. Enim nulla do officia minim et eiusmod veniam velit officia deserunt culpa consequat qui proident.

Est Lorem minim cillum enim. In eiusmod ad laborum dolor proident quis. Laboris id nostrud fugiat est mollit. Duis ullamco mollit consequat proident dolore Lorem exercitation magna ad Lorem magna esse anim cillum.

Cards Block

Two images block

This is text content

Placeholder image.
First image caption
Placeholder image.
Second image caption
Placeholder image.
Placeholder image.

Call to action

Call to action text

CTA button

Long form content block

This is an article block. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Placeholder image.
left image
Placeholder image.
right image

Placeholder image.
Breakout image with caption
Header header column 2 col 3
content content and some content in here......
table caption, smaller breakout

Contact form

Form desctiption

Dark Colour Scheme

Incididunt sit enim voluptate eu qui elit velit nostrud aliqua commodo. Non mollit tempor deserunt officia.

Primary Colour Scheme

Incididunt sit enim voluptate eu qui elit velit nostrud aliqua commodo. Non mollit tempor deserunt officia.