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

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

Buttons

primary Buttons
(.btn--primary)

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

primary Buttons
(.btn--primary)

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

secondary Buttons
(.btn--secondary)

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

secondary Buttons
(.btn--secondary)

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

base Buttons
(.btn--base)

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

base Buttons
(.btn--base)

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

accent Buttons
(.btn--accent)

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

accent Buttons
(.btn--accent)

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

black Buttons
(.btn--black)

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

black Buttons
(.btn--black)

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

white Buttons
(.btn--white)

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

Text Links

.link--primary .link--secondary .link--accent .link--base .link--black .link--white

Style Guide

Logos

Icons

Colours

Fonts

Aa

Aa

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)

Widths

Owl Spacing

Spacing & Sizing

Padding

Margin

Shadows

Border Radius

Buttons

Providing end to end solutions for all stages of your project

Let’s work together