Style Book v2

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:

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

For assistance with a behavioral or mental health crisis, please call 877-422-5939