Style Guide

This will be your go to guide during development.

Logos

Icons

Colours

Site Colours (Background)
primary
secondary
base
accent
shade
Site Colours (Variables)
primary
secondary
base
accent
shade
Transparancy
primary
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
primary ultra-dark
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
secondary
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
secondary ultra-dark
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
base
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
base ultra-dark
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
accent
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
accent ultra-dark
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
shade ultra-dark
BG
BG
BG
BG
BG
BG
VAR
VAR
VAR
VAR
VAR
VAR
Opacity

Fonts

Aa

Grandstander
Grandstander

Aa

Libre Franklin
Libre Franklin

Typography

Header 1 (.text--xxl)

var(--text-xxl)

Header 2 (.text--xl)

var(--text-xl)

Header 3 (.text--l)

var(--text-l)

Header 4 (.text--m)

var(--text-m)

Header 5 (.text--s)
var(--text-s)
Header 6 (.text--xs)
var(--text-xs)
Body Text:

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Smaller Text:

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Extra Small Text:

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Widths

width--xs
--width-xs
width--s
--width-s
width--m
--width-m
width--l
--width-l
width--xl
--width-xl
width--xxl
--width-xxl
width--50
width--auto
width--full
width--vp-max

Owl Spacing

Spacing & Sizing

--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Padding

.pad--xs
.pad--s
.pad--m
.pad--l
.pad--xl
.pad--xxl

Margin

.margin-{side}--xs
.margin-{side}--s
.margin-{side}--m
.margin-{side}--l
.margin-{side}--xl
.margin-{side}--xxl

Shadows

.box-shadow--m
.box-shadow--l
.box-shadow--xl

Border Radius

.rounded--xs
.rounded--s
.rounded--m
.rounded--l
.rounded--xl
.rounded--xxl

Buttons

primary Buttons
(.btn--primary)
primary Buttons
(.btn--primary)
secondary Buttons
(.btn--secondary)
secondary Buttons
(.btn--secondary)
base Buttons
(.btn--base)
base Buttons
(.btn--base)
accent Buttons
(.btn--accent)
accent Buttons
(.btn--accent)
black Buttons
(.btn--black)
black Buttons
(.btn--black)
white Buttons
(.btn--white)
chevron-down