Style Guide

This will be your go to guide during development.

Logos

Icons

Colours

Site Colours (Variables)
primary
secondary
base
accent
shade
Background Colours
.bg--primary

.bg--secondary

.bg--base

.bg--accent

.bg--shade

Background Colours & Transparancy
primary
BG
BG
BG
BG
BG
BG
BG
BG
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
BG
BG
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
BG
BG
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
BG
BG
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
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.

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

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