Style Book

The purpose of this page is to display styled components and sections in one place, so that changes to global styling can be seen and reviewed on here and then the site can be built by coping the sections from here.

Typography

This is the Title 1 font and font size.
This is the Title 2 font and font size.
This is the Title 3 font and font size.
This is the Title 4 font and font size.
This is the Title 5 font and font size.
This is the Title 6 font and font size.
This is the Title 7 font and font size.

This is the Subheading font and font size.

This is the Accent font and font size.
This is the Body font and font size.
This is the Body Bold font and font size.
This is the Body Big font and font size.
This is the Body Small font and font size.

Colours

Branding Colours

The colours provided by the client.
Primary

Notes

Notes

Secondary

Notes

Notes

Tertiary

Notes

Notes

Utility Colours

These are commoly used colour options that have been set up in the global settings.
Accent

Notes

Notes

Section Background 1

Notes

Notes

Section Background 2

Notes

Notes

Text - Dark Background

Notes

Notes

Text - Light Background

Notes

Notes

White

Notes

Notes

Black

Notes

Notes

Transparent

Notes

Notes

Image Overlay - Neutral

Notes

Notes

Image Overlay - Colour

Notes

Notes

Derived Colours

Complementary

Notes

Notes

Triadic 1

Notes

Notes

Triadic 2

Notes

Notes

Shades

Primary Dark 1

Notes

Notes

Primary Dark 2

Notes

Currently used for Button 1, 3 and 5 hover colour.

Primary Dark 3

Notes

Notes

Primary Dark 4

Notes

Notes

Secondary - Dark

Notes

Usually used for hover and active effects.

Tertiary - Dark

Notes

Usually used for hover and active effects.

Tints

Primary Light 1

Notes

Notes

Primary Light 2

Notes

Notes

Primary Light 3

Notes

Notes

Primary Light 4

Notes

Notes

Secondary - Light

Notes

Usually used for hover and active effects.

Tertiary - Light

Notes

Usually used for hover and active effects.

Buttons

Full Width

Things to adjust:

  1. Colour
  2. Alignment (Advanced > Align Self)

Group

Below is an example. What matters is that the container for the buttons below is set to “Row – Horizontal” (aka Flex Rows).

Images

Below are some examples of images which have been added as global widgets

On the left the images have a ratio of 3:4 and on the right they are 4:3. This is not enforced in the global widgets but it is used as a default for most images.

Image size: Images are being sized by putting a limit on their height. The width is left as auto and is determined by the aspect ratio of the image. If you prefer a different height for most images across the site, create a new global widget.

Things to edit:

  • Border Radius
  • Border Shadow

Height: 750px

Volunteer students sitting on park path, smiling and throwing colourful origami in the air.

Height: 500px

Volunteer students sitting on park path, smiling and throwing colourful origami in the air.
Volunteer students sitting on park path, smiling and throwing colourful origami in the air.

Height: 350px

Volunteer students sitting on park path, smiling and throwing colourful origami in the air.
Volunteer students sitting on park path, smiling and throwing colourful origami in the air.

Height: 250px

Lorem ipsum

Volunteer students sitting on park path, smiling and throwing colourful origami in the air.
Volunteer students sitting on park path, smiling and throwing colourful origami in the air.

Profile Images

Lorem ipsum

Volunteer students sitting on park path, smiling and throwing colourful origami in the air.
Volunteer students sitting on park path, smiling and throwing colourful origami in the air.
Volunteer students sitting on park path, smiling and throwing colourful origami in the air.
Volunteer students sitting on park path, smiling and throwing colourful origami in the air.

Galleries

Lorem ipsum

Grid

Carousel