#56548a

$brand_light_purple

#33325e

$brand_purple

#7774c0

$lighterpurple

#c8c7d1

$lightpurpleygrey

#3bbbe0

$brand_light_blue

#e0553d

$brand_orange

#6a6a6a

$brand_dark_grey

#ebebeb

$brand_light_grey

Use .big when you want to create a lead paragraph, such as this one. To create the heading, use .page-header.

<h1 class="page-header">Typography</h1>
<p class="big">Use <code>.big</code> when you want to create a lead paragraph, such as this one. To create the heading, use <code>.page-header</code></p>.

Vanilla heading 1 with no classes added to it.

This is a vanilla paragraph of text with no classes added to it.

Vanilla heading 2 with no classes added to it.

This is a vanilla paragraph of text with no classes added to it.

Vanilla heading 3 with no classes added to it.

This is a vanilla paragraph of text with no classes added to it.

Vanilla heading 4 with no classes added to it.

This is a vanilla paragraph of text with no classes added to it.

Vanilla heading 5 with no classes added to it.

This is a vanilla paragraph of text with no classes added to it.

Vanilla heading 6 with no classes added to it.

This is a vanilla paragraph of text with no classes added to it.

<h1>Vanilla heading 1 with no classes added to it.</h1>
<p>This is a vanilla paragraph of text with no classes added to it.</p>
<!-- etc... -->

Buttons use the $brand_orange colour and come in two sizes. You can use either the button or a element depending on whether it is a form button, or a link with a call to action. Note that the buttons don't need to be wrapped in paragraph tags, this is just to give them some extra spacing for this example.

<p>
    <a href="#" class="btn btn-primary">Normal button</a>
</p>
<p>
    <a href="#" class="btn btn-primary btn-lg">Large button</a>
</p>

All tables use the following formatting.

First Name	Last Name
James	Mulvany
Mike	Cunsolo
Aaron	Corkin

<table class="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>Mulvany</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>Cunsolo</td>
        </tr>
        <tr>
            <td>Aaron</td>
            <td>Corkin</td>
        </tr>
    </tbody>
</table>