Style Guide

Typography

Here you can find all the typographic styles used in the website. Change one here, and they will change everywhere. All fonts are set in Switzer.

To change any of the typography, click the style, then in the style panel click the Select a Class or Tag field. Choose the pink field to edit all styles across the whole website.

To change the font of the whole website, go to the Body element (Body is the first element in the website, so changing the font on this element will cascade down to all elements.) To do so open the Navigator on the left, click the Body element. Then in the style panel click the Select a Class or Tag field. Choose the pink field to edit the Body style across the whole website.

Headings
Style

H1

H2

H3

H4

H5

H6

Tag

H1

H2

H3

H4

H5
H6
Text Size
Large

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus.

Text Size
Medium

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus.

Text Size
Regular

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus.

Text Size
Small

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus.

Rich Text Element

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Text Link
Colors

Here you can find all the colours used in the website. Change one here, and they will change everywhere.

To change a colour, click one of the blocks below, find the Backgrounds section on the right in the Style Panel. Instead of choosing a new colour directly, click on the little pencil icon to edit the swatch, so the colour will change on the whole website.

Eerie Black
Green
Quick Silver
Whte Smoke
Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Structure Class
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Paddings
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Margins
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Spacers
Spacer system for the project
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge