WEB DESIGN

Website Style Guide

Rottnest Island, Little Salmon Bay

Colour palette

Primary

Body text copy,
Main menu background

Footer background

Form input focus
label and border

Section background

Section background

Section background,
Reverse text copy

Secondary

Form input incorrect,
Extreme highlight,
Danger

Main menu link
hover or highlight

Subtle column or
cell background

Light border

Light border hover

Form input
label and border

Form input correct,
Success

Primary CTA button hover

Main title,
Text copy links

Primary CTA button

Main title lighter
background layer

Text border highlight

Neptune

Main title ampersand
lighter background layer

Main title ampersand

Typography

Typefaces

Font weights and styles

300
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
700
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
200i
Italic
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
400
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
400i
Italic
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
700
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
700
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>$€£¢:;,.*

Font sizes and usage

Heading 1

Description: Level 1 heading. Single use for each page.
Markup:
<h1 class="page-heading"></h1>

Heading 2

Subheading - optional supporting text

Description: Level 2 heading. Significant vertical sections.
Markup:
<h2 class="section-heading"></h2>
Description: Level 3 subheading (optional supporting text).
Markup:
<h3 class="subheading"></h3>

Heading 3

Description: Level 3 heading.
Markup:
<h3 class="heading-3"></h3>

Heading 4

Description: Level 4 heading.
Markup:
<h4 class="heading-4"></h4>
Heading 5
Description: Level 5 heading.
Markup:
<h5 class="heading-5"></h5>

Lead intro text

Body copy text content. The width of each line of text should be limited to 56 - 60 characters.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis sapien at tellus hendrerit volutpat. Aliquam vitae accumsan libero. Mauris gravida mi at lectus sollicitudin consectetur. Donec quis augue ut risus tempus cursus. Suspendisse auctor nunc elit.

Phasellus pulvinar tellus eget ligula congue malesuada. Aliquam leo felis, fermentum nec luctus quis, tempus sed augue.

In laoreet massa nec velit faucibus consequat. Maecenas a sollicitudin justo, nec vestibulum justo.

Maecenas efficitur odio at egestas rutrum. Pellentesque laoreet commodo tellus vitae venenatis. Nam fringilla dictum diam.

Description: Paragraph lead introduction text line (optional).
Markup:
<p class="lead"></p>
Description: Paragraph. Body text copy.
Markup:
<p></p>
Description: Paragraph 'bold' text.
Markup:
<p><strong></strong></p>
Description: Paragraph 'italic' text.
Markup:
<p><i></i></p>
Description: Paragraph 'inline hyperlink'.
Markup:
<p><a href="#"></a></p>

Call to action

Buttons

Primary button

Primary CTA
State: Default
Primary CTA
Pseudo states: :hover, :active, :focus

Secondary button

Secondary CTA
State: Default
Secondary CTA
Pseudo states: :hover, :active, :focus