Style Book v2

Typography

This is the Title 1 font and font size and this is a longer sentence to understand line-height.

This is the Title 2 font and font size and this is a longer sentence to understand line-height.

This is the Title 3 font and font size and this is a longer sentence to understand line-height.

This is the Title 4 font and font size and this is a longer sentence to understand line-height.

This is the Title 5 font and font size and this is a longer sentence to understand line-height.

This is the Title 6 font and font size and this is a longer sentence to understand line-height.

This is the Title 7 font and font size and this is a longer sentence to understand line-height once the sentence wraps down to the next line.

This is the Subheading font and font size and this is a longer sentence to understand line-height once the sentence wraps down to the next line. This probably requires a little more text to really see the difference. 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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the Accent font and font size and this is a longer sentence to understand line-height.

This is the Body font and font size and this is a longer sentence to understand line-height once the sentence wraps down to the next line. 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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the Body Bold font and font size and this is a longer sentence to understand line-height once the sentence wraps down to the next line. 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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the Body Big font and font size and this is a longer sentence to understand line-height once the sentence wraps down to the next line. 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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is the Body Small font and font size and this is a longer sentence to understand line-height once the sentence wraps down to the next line. 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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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:

Colour
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

Height: 500px

Height: 350px

Height: 250px

Lorem ipsum

Profile Images

Lorem ipsum

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)

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

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

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

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

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