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
Granstander
Granstander
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.
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.
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.
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