Style Guide

Version 1 – Updated 07 October 2019
The style guide is an internal reference for site styles and forms the basis for all page building. By creating a robust style guide for each website we can expedite the process of page building across the site and make ongoing maintenance easier.

Style Guide Methodology

Elements are generally themed as generic elements such as 'Body (All Pages)' or 'All H1 Headings' where possible.
Where custom styles are applied these are prefixed with a 't-' denoting that they are a part of the global site theme. The 't-' prefix serves as a signifier that changes to this style are sitewide and may have theme repurcussions in other areas of the site.
Similarly, custom layout elements are prefixed with a 'l-' to show that they are generic layout elements used site-wide.
New features will be added to this style guide as we develop this concept.

Typography

Base font face, size and spacing is set by selecting 'Body (All Pages)'.
Body (All Pages) – Neuzeit Grotesk 300 Light 17px / 1.8em

Default Type Styles

These styles are used sitewide to format text.

Heading 1 Standard

All H1 Headings – Serenity 200 Extra light 48px / 52px

Heading 1 Thin

--t-text-thin

Heading 1 Medium

--t-text-medium

Heading 2

All H2 Headings – Serenity 500 medium 36px / 42px

Heading 3

All H3 Headings – Serenity 300 Light 32px / 36px

Heading 4

All H4 Headings – Serenity 500 medium 1.4em / 1.8em
Heading 5
All H5 Headings – Serenity 500 medium 1.2em / 1.6em
Heading 6
All H6 Headings – Serenity 500 medium 1em / 1.4em

Paragraph Extra Large

t-para-x-large – Soleil 300 Light 1.3em / 2em

Paragraph Large

t-para-large – Soleil 300 Light 1.15em / 1.9em

Paragraph Standard

All Paragraphs / t-para – Soleil 300 Light – 1em / 1.8em
Note: standard paragraph text size and spacing is set on 'Body (All Pages)'

Paragraph Small

t-para-small – Soleil 300 Light – 0.85em / 1.7em

Paragraph Extra Small

t-para-x-small – Soleil 400 Normal – 0.75em / 1.6em
Caption
All Figure Captions / t-caption
– Soleil 400 Normal – 0.85em / 1.4em
Label
t-label – Soleil 500 medium – 0.7em / 1.2em

Type in Rich Text

Type when inside rich text elements applies some different styling.

Heading One in Rich Text

Rich text paragraph. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Rich text embedded image sample caption

Rich Text Heading Two

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Rich text heading three

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Rich text block quote. Quisque rutrum ac erat in laoreet. Etiam at placerat sem. Mauris viverra magna erat, a interdum nunc lobortis in. Quisque augue nibh, eleifend nec porttitor eu, tincidunt at sem. Nam sodales turpis eget dui faucibus porttitor.

Heading 4 following is a rich text unordered list:

  • Unordered List Item 2
  • Item Two
  • List Item Three
Heading Five following is a rich text ordered (numbered) list:
  1. Numbered list item one
  2. List Item 2
  3. Ordered list item three
Heading Six Rich Text

Colours

Standard sitewide colour palette. Edit these colour swatches to change colours sitewide.
Primary

#0073cf

t-bg-primary

Primary

t-text-primary

Primary Light

#00a9e0

t-bg-primary-l

Primary Light

t-text-primary-l

Primary Dark

#7ab800

t-bg-primary-d

Primary Dark

t-text-primary-d

Dark

#414042

t-bg-Dark

Dark

t-text-Dark

Dark Light

#747275

t-bg-Dark-l

Dark Light

t-text-Dark-l

Dark Dark

#232224

t-bg-Dark-d

Dark Dark

t-text-Dark-d

Light

#f1f1f5

t-bg-light

Light

t-text-light

Light Light

#f7f7fa

t-bg-light-l

Light Light

t-text-light-l

Light Dark

#e6e6eb

t-bg-light-d

Light Dark

t-text-light-d

Secondary

#ff6319

t-bg-secondary

Secondary

t-text-secondary

Secondary Light

#eeaf30

t-bg-secondary-l

Secondary Light

t-text-secondary-l

Secondary Dark

#c60c30

t-bg-secondary-d

Secondary Dark

t-text-secondary-d

Tertiary

#8e258d

t-bg-tertiary

Tertiary

t-text-tertiary

Tertiary Light

#e0249a

t-bg-tertiary-l

Tertiary Light

t-text-tertiary-l

Tertiary Dark

#6e267b

t-bg-tertiary-d

Tertiary Dark

t-text-tertiary-d

Buttons

Basic button styles. Main button styles such as font style and hover state are made on the default 't-button'.

Standard (Dark)

Solid
Button

t-button

Button Small

t-button --t-b-small

Button Large

t-button --t-b-large

Button Block

t-button
--t-b-block

Outline
Button Outline

t-button
--t-b-outline

Button Outline Small

t-button
--t-b-outline --t-b-small

Button Outline Large

t-button
--t-b-outline --t-b-large

Button Outline Block

t-button --t-b-outline
--t-b-block

Primary

Solid
Button Primary

t-button --t-b-primary

Button Primary Small

t-button --t-b-primary --t-b-small

Button Primary Large

t-button --t-b-primary --t-b-large

Button Primary Block

t-button --t-b-primary
--t-b-block

Outline
Button Primary Outline

t-button --t-b-primary
--t-b-outline

Button Primary Outline Small

t-button --t-b-primary
--t-b-outline --t-b-small

Button Prim Outline Lg

t-button --t-b-primary
--t-b-outline --t-b-large

Button Primary Outline Block

t-button --t-b-primary
--t-b-outline --t-b-block

Light

Solid
Button Light

t-button --t-b-light

Button Light Small

t-button --t-b-light --t-b-small

Button Light Large

t-button --t-b-light --t-b-large

Button Light Block

t-button --t-b-light
--t-b-block

Outline
Button Light Outline

t-button --t-b-light
--t-b-outline

Button Light Outline Small

t-button --t-b-light
--t-b-outline --t-b-small

Button Lt Ol Lg

t-button --t-b-light
--t-b-outline --t-b-large

Button Lt Ol Block

t-button --t-b-light
--t-b-outline --t-b-block

Layout

Layout elements control padding, margins, and display properties. Layout elements contain the prefix 'l–' to denote that they are site-wide layout classes for general use.

Padding

  • l-padding-90
  • l-padding-90-0
  • l-padding-60
  • l-padding-60-0
  • l-padding-40
  • l-padding-40-0
  • l-padding-30
  • l-padding-30-0
  • l-padding-20
  • l-padding-20-0
  • l-padding-10
  • l-padding-10-0

Margin

  • l-margin-90
  • l-margin-90-0
  • l-margin-0-90
  • l-margin-60
  • l-margin-60-0
  • l-margin-0-60
  • l-margin-40
  • l-Margin-40-0
  • l-Margin-0-40
  • l-Margin-30
  • l-margin-30-0
  • l-margin-0-30
  • l-Margin-20
  • l-margin-20-0
  • l-margin-0-20
  • l-margin-10
  • l-margin-10-0
  • l-margin-0-10

Flex

  • l-flex-centre
  • l-flex-wrap
  • l-flex-child-expand
  • l-flex-child-fixed
  • l-flex-child-2-col
  • l-flex-child-3-col
  • l-flex-child-4-col
  • l-flex-child-5-col
  • l-flex-child-6-col
  • l-flex-child-7-col
  • l-flex-child-8-col
  • l-flex-child-9-col
  • l-flex-child-10-col
  • l-flex-child-11-col
  • l-flex-child-12-col

Modifiers

Modifiers can be used to apply their affect to the element. Modifier classes are denoted with a '––' prefix and theme-level modifiers include a 't–' prefix. So all modifiers seen on this page start with the prefix '––t–'.

Opacity

--t-opacity-100

--t-opacity-90

--t-opacity-80

--t-opacity-70

--t-opacity-60

--t-opacity-50

--t-opacity-40

--t-opacity-30

--t-opacity-20

--t-opacity-10

--t-opacity-0

Font Weight

Text Thin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

--t-text-100

Text Extra Light. Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.

--t-text-200

Text Light. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

--t-text-300

Text Normal. Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.

--t-text-400

Text Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.

--t-text-500

Text Semi-Bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.

--t-text-600

Text Bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim.

--t-text-700

Text Extra Bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.

--t-text-800

Text Black. Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.

--t-text-900

Font Family

Soleil font family. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

--t-font-soleil

Serenity font family. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

--t-font-serenity