Style Guide

Colour Palette

Primary colours
Dark Byzantium
#4E3D61
Lavander
#D8D0E2
neutral colours
Slate Grey
#404040
dim grey
#484848
light grey
#fafafa
white
#ffffff

Typography

heading style

Playfair Dislay

This is Headline 1

Headline 1

font size: 36px • character spacing: 0.5 • line height: 57px

This is Headline 2

headline 2

font size: 32px • character spacing: 0.5 • line height: 39px

This is Headline 3

HEADLINE 3

font size: 24px • character spacing: 0.5 • line height: 29px

This is Headline 4

HEADLINE 4

font size: 18px • character spacing: 0.5 • line height: 27px

This is Headline 5

HEADLINE 5

FONT SIZE: 14PX • CHARACTER SPACING: 2 • LINE HEIGHT: 24PX

This is Headline 6

HEADLINE 6

font size: 14px • character spacing: 2 • line height: 24px

body style

Poppins

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

default paragraph

FONT SIZE: 16PX • CHARACTER SPACING: 0 • LINE HEIGHT: 24PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

small paragraph

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

emphasis text

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

caption text

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

block quote

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

Forms & Buttons

form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
default buttons
Button Text

solid button

Button Text

outline button

text button

text button

reversed buttons
Button Text

solid button

Button Text

outline button

text button

text button

buttons with icon
BUTTON TEXT

solid button

BUTTON TEXT

outline button

reversed buttons with icon
BUTTON TEXT

solid button

BUTTON TEXT

outline button

Grids

getting started

Columns need to be nested within  a row and a direct child of a container.  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

col
col
col
col
col
col
col
col
col
col
remove gutters

To remove all padding from columns, use the no-gutters class preceded by the initial class of col.

 no-gutters
no-gutters
no-gutters
no-gutters
full width container

Define your div with a class of container-fluid for full width.

col
col
col
col
grid - desktop

To define our 12 column grid, all classes must precede with the initial class of col

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
grid - tablet

Defining our tablet breakpoints, all classes must precede with the class of col and if defined, your desktop class of col-(1-12)

col-m-1
col-m-11
col-m-2
col-m-10
col-m-3
col-m-9
col-m-4
col-m-8
col-m-5
col-m-7
col-m-6
col-m-6
col-m-12
grid - mobile landscape

Defining our mobile landscape breakpoints, all classes must precede with the class of col and if defined, your desktop and tablet classes of col-(1-12)

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
grid - mobile portrait

Defining our mobile portrait breakpoints, all classes must precede with the class of col and if defined, your desktop and tablet classes of col-(1-12)

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
column wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4
col-8
col-6
col-6
col-3
col-2
col-7
vertical alignment - start

To align columns from the top, combine a class of  align-start preceded by the class of row

align-start
align-start
align-start
vertical alignment - center

To align columns from the top, combine a class of  align-center preceded by the class of row

align-center
align-center
align-center
vertical alignment - end

To align columns from the top, combine a class of  align-end preceded by the class of row

align-end
align-end
align-end
horizontal alignment - start

To align columns from the left, combine a class of  justify-start preceded by the by class of row

justify-start
justify-start
horizontal alignment - center

To align columns from the left, combine a class of  justify-center preceded by the by class of row

justify-center
justify-center
horizontal alignment - end

To align columns from the left, combine a class of  justify-end preceded by the by class of row

justify-end
justify-end
horizontal alignment - between

To align columns from the left, combine a class of  justify-between preceded by the by class of row

justify-between
justify-between
self-align columns

To individually self-align columns, combine a class of  self-start, self-center, self-end preceded by the by class of col

self-start
self-center
self-end
column reordering

To individually reorder columns, combine a class of either order-first, order-last, preceded by the by class of col

order-last
order-first