STYLEGUIDE

Heading 1

An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.

Heading 2

An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.

Heading 3

An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.

Heading 4

An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.

Heading 5

An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.

Heading 6

An example paragraph with strong text and emphasized text, spanning multiple lines so you can see the line-height.

Aa - 400 Merriweather 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Omnis voluptate distinctio repre class=htmlhenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero mollitia modi ad id quasi illo! Provident corporis unde inventore impedit vel, consequuntur hic eaque officia praesentium! Debitis doloribus fugiat eaque porro eveniet culpa possimus voluptatibus dolores, veritatis quis rem et modi exercitationem, excepturi, ex ratione iste aspernatur sint minus obcaecati illum voluptatum! Eum dicta eius aut qui quo, consectetur vel commodi nam illo facere, quam labore veritatis nihil saepe quisquam quia exercitationem eaque aliquam itaque laudantium quod. Dolorem, explicabo, dignissimos.

Colours

#f1c40f

$yellow-light

#f39c12

$yellow-dark

#2ecc71

$green-light

#27ae60

$green-dark

#e74c3c

$red-light

#c0392b

$red-dark

#ea148c

$pink-light

#b7106d

$pink-dark

#3498db

$blue-light

#2980b9

$blue-dark

#9b59b6

$purple-light

#8e44ad

$purple-dark

#ffffff

$white

#f8f6f7

$off-white

#dddddd

$grey-light

#7a7a7a

$grey-mid

#333333

$grey-dark

#58585b

$black-light

#19191a

$black-mid

#000000

$black-dark

Buttons

<button class="button">Normal</button>
<button class="button button__outline">Outline</button>
<button class="button button__disabled">Disabled</button>
<button class="button button__error">Error</button>

Form Inputs

Sorry, there was a problem with handling your request.