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

Utility Colours

These are commoly used colour options that have been set up in the global settings.
Accent
Section Background 1
Section Background 2
Text - Dark Background
Text - Light Background
White
Black
Transparent
Image Overlay - Neutral
Image Overlay - Colour

Derived Colours

Complementary
Triadic 1
Triadic 2

Shades

Primary Dark 1
Primary Dark 2
Primary Dark 3
Primary Dark 4
Secondary - Dark
Tertiary - Dark

Tints

Primary Light 1
Primary Light 2
Primary Light 3
Primary Light 4
Secondary - Light
Tertiary - Light

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

Social Media Icons

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.

Spacing

4xs

clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem)

3xs

clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem)

2xs

clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem)

xs

clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem)

s

clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem)

m

clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem)

l

clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem)

xl

clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem)

2xl

clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem)

3xl

clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem)

3xl

clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem)

tb-1

clamp(0.5rem, 0.38458rem + 0.513vw, 1rem)

tb-2

clamp(1rem, 0.76915rem + 1.026vw, 2rem)

tb-3

clamp(2rem, 1.76915rem + 1.026vw, 3rem)

tb-4

clamp(3rem, 2.76915rem + 1.026vw, 4rem)

tb-5

clamp(4rem, 3.76915rem + 1.026vw, 5rem)

tb-6

clamp(5rem, 4.76915rem + 1.026vw, 6rem)

tb-8

clamp(7rem, 6.76915rem + 1.026vw, 8rem)

tb-10

clamp(9rem, 8.76915rem + 1.026vw, 10rem)

gap default

clamp(0.313rem, 0.152rem + 0.915vw, 1.25rem)