Style Guide

An In-text Link:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


					HTML:

					<p>
						Lorem ipsum dolor sit amet, <a href="#" class="in-text_link">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</p>

Buttons:

btn btn-1

btn btn-2

btn btn-3


					HTML:

					<p class="btn-outside"><a href="#" class="btn btn-1" role="button">btn btn-1</a></p>

					<p class="btn-outside"><a href="#" class="btn btn-2" role="button">btn btn-2</a></p>

					<p class="btn-outside"><a href="#" class="btn btn-3" role="button">btn btn-3</a></p>

A submit and reset button for forms:


					HTML:

					<form action="/" method="post">

					 <button>Submit <span>→</span></button>

					 <button type="reset">Reset <span>↺</span></button>

					</form>

A text input field and a label:

Name


					HTML:

					<label for="name">Name</label>

					<input type="text" id="name" placeholder="Mike">

Website colour swatches:

Red

#D04925

rgb(208,73,37)

Light Red

#F4DCDC

rgb(244,220,220)

Black

#2B2B2B

rgb(43,43,43)

Light Grey

#DFDFDF

rgb(223,223,223)

Lighter Grey

#F6F6F6

rgb(246,246,246)

Typography:

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph

Bulleted lists:

List item
List item
List item


					HTML:

					<ul class="bulleted_list">

					 <li>List item</li>

					 <li>List item</li>

					 <li>List item</li>

					<ul>

Numbered lists:

List item
List item
List item


					HTML:

					<ol class="numbered_list">

					 <li>List item</li>

					 <li>List item</li>

					 <li>List item</li>

					</ol>