Style Guide

This will be your go to guide during development.

Logos

Icons

Logos

Icons

Logos

Icons

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

Quatro Slab

Aa

Univers 67

Univers 57

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