Website Style Guide

Welcome to the City of Greater Geraldton's website style guide. Please use the below template examples as a guide on best practise for use on the website.

Typography | Language and tone | Anchors | Tables | Accordion | Image Sizing | Videos | Tabs | Colour palette

Typography

H1 City of Greater Geraldton Style Guide - Use this only once at the top of the page

H2 heading: Intro Body Text - Use these if you need block headings

H3 heading: Sub-heading - Use these if you have many subheadings

Paragraph heading: Page content

Fonts: The standard font choice for the website is Arial. You can use bold and italics on the website in paragraphs, however, please do not use underline or strikethrough.

[ Back to top ]

Language and tone

The language and tone used on the website should reflect the same standards as any public-facing Council document.

Key considerations include:

  • Protecting confidential and sensitive information related to Council and the public
  • Respecting cultural sensitivities in all content
  • Avoiding the use of copyrighted images unless permission is granted
  • Ensuring factual accuracy and avoiding speculation or assumptions
  • Using respectful and inclusive language, free from discrimination or offensive terms
  • Verifying that any external links comply with these guidelines
  • Making content accessible, especially for people with vision impairments or those with limited English proficiency
  • Avoiding time-sensitive language (e.g., “last year,” “next week,” “recently”) unless the page is regularly updated

If you need to include specific dates, consider setting a recurring reminder to review and update the page—either monthly or annually—to keep the information current.

[ Back to top ]

Anchors

Anchors help users navigate long or complex pages by linking directly to specific sections. They improve usability, accessibility, and SEO when used correctly.

Best practice for when to use anchors include:

  • On long-form content (e.g. FAQs, reports, event pages).
  • To link to specific sections from a table of contents.
  • To reference a section from another page or external source.
  • For accessibility enhancements (e.g. “Skip to content” links).

Conventions for using anchors include:

  • Use lowercase letters
  • Separate words with hyphens (-), not underscores
  • Keep names short descriptive and unique
  • Avoid special characters and spaces

[ Back to top ]

Tables

Heading 1 Heading 2 Heading 3
Title 1
Title 2
Title 3
Title 4

[ Back to top ]

Accordion

To insert a Spark Accordion from Spark CMS, click "Insert" followed by "Insert Spark Accordion." Select how many header items you are after and edit accordion.

Example 1

Example content 1

Example 2

Example content 2

Example 3

Example content 3

Example 4

Example content 4

[ Back to top ]

Image sizing

  • Use consistent image sizing throughout the website.
  • Only add images if they add value to the content of the page.
  • If adding an image, insert it at the top of the page below the webpage title (heading 1).
  • Never add more than 3 images on a page.
  • Use image dimensions 400x265px

Standard image size 400x265 example

[ Back to top ]

Videos

Please do not upload videos directly to web pages as this will slow the loading time for the page to display for users. Instead, please embed videos onto pages. To embed videos, you will need an embed code, which you can usually find on video settings. To embed the video, you will need to access the "Source code" of the page, which can be accessed in the top menu, and paste the embed code on the desired section of the web page, updating the size to fit the page as seen in the example below.

Example video in recommended 460x250 size

[ Back to top ]

Tabs

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

[ Back to top ]

Colour palette

[ Back to top ]