Style Guide

Grid

Colour

Greyscale

From Brand Guidelines

$black-charcoal
#121212
$charcoal
#333333
$charcoal-light
#6D6966
$charcoal-lighter
#D8D5D2
$charcoal-lightest
#F5F4F3
$white
#ffffff
Primary Colours

From Brand Guidelines

$link
#ff6633
Caption Colours

For bulma color variables

$info
#349cee
$success
#23d160
$warning
#fbdd57
$danger
#fa3760
Secondary Colours

TODO!

$secondary-1
pink
$secondary-2
purple

Typography

Black - 769px and up

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
H6 Label

Sub-title

Body

Body Bold
Caption
Caption
Black - 768px and down

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
H6 Label

Sub-title

Body

Body Bold
Caption
Caption
White

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
H6 Label

Sub-title

Body

Body Bold
Caption
Caption
Link

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
H6 Label

Sub-title

Body

Body Bold
Caption
Caption

Body and paragraph text

Sub-title text which is also used for blog posts lorem ipsum dolor sit amet, enim audire alterum mea ex, posse commune ne usu. Sed timeam torquatos

Follow on paragraph

Body text which is also used for blog posts lorem ipsum dolor sit amet, enim audire alterum mea ex, posse commune ne usu. Sed timeam torquatos

Follow on paragraph

Other Caption Colours

TODO

Buttons

Light theme - Solid - White Text

Hover States

Light theme - Solid - Black Text

Hover States

Light theme - Solid - Border - Black Text

Hover States

Dark theme - Solid White Button

Hover States

Dark theme - Medium button style

Hover States

Dark theme - Dark button style

Hover States

 

Medium theme - Button on white

Hover States

Medium - Button with border

Hover States

Medium - Button with border

Hover States

Dropdowns

Tabs

Horizontal - Light Background

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Horizontal - Dark Background

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

 

Vertical - Light Backgound

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Vertical - Dark Backgound

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida gravida est vel elementum. Ut semper eu erat ut sagittis. Quisque in enim non augue pulvinar finibus. Suspendisse sed elit pulvinar, suscipit diam a, congue neque. Praesent lobortis auctor accumsan. Nulla dapibus neque et vestibulum hendrerit. Sed eget leo in tellus tincidunt convallis sit amet sit amet dolor.

Form Fields

Template "elements/forms/inputs/input.php" not found

Template "elements/forms/inputs/input.php" not found

Template "elements/forms/inputs/input.php" not found

Template "elements/forms/inputs/input-icon-left.php" not found

Template "elements/forms/inputs/input-icon-right.php" not found

Template "elements/forms/inputs/input-icon-left-and-right.php" not found

Template "elements/forms/inputs/input.php" not found

Checkboxes & Radio Buttons

Shadows

Shadow-0
Shadow-1
Shadow-2
Shadow-3
Shadow-4
Shadow-5