Logo Components

Main Logo

Tagline

Colors

This design uses the following colours.

blue: #00aeef

green: #b1c800

light green: #dada00;

red: #ed1c24

white: #fefefe

light gray: #fafafa

medium gray: #cacaca

dark gray: #3a3a3a

black: #0a0a0a

Typography

This design uses DM Sans for paragraph text and headings and Choice for display heading.

<h1 class="fc-display">Display Text Level 1</h1>

<h2 class="fc-display">Display Text Level 2</h2>

<h3 class="fc-display">Display Text Level 3</h3>

<h4 class="fc-display">Display Text Level 4</h4>

<h5 class="fc-display">Display Text Level 5</h5>

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<p class="lead">Lead Paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>

<p>Paragraph - Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>

Display Text Level 1

Display Text Level 2

Display Text Level 3

Display Text Level 4

Display Text Level 5

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Lead Paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

Paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

Lists

Unordered List

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

List Item
List Item
List Item
List Item

Ordered List

<ol>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ol>

List Item
List Item
List Item
List Item

Definition List

<dl>
    <dt>Definition Term</dt>
    <dd>Definition Description</dd>
    <dt>Definition Term</dt>
    <dd>Definition Description</dd>
</dl>

Definition Term: Definition Description
Definition Term: Definition Description

Blockquote

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

  <cite>Jacob Carrington. Web Developer</cite>

</blockquote>

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

Buttons

Buttons are tied to an action of some kind.

<!-- Normal Buttons -->
<a href="#" class="fc-button">Default button</a>
<a href="#" class="fc-button fc-button--hollow">Hollow button</a>
<a href="#" class="fc-button fc-button--primary">Primary button</a>
<a href="#" class="fc-button fc-button--secondary">Secondary button</a>

Default button Hollow button Primary button Secondary button

Larger Button

<!-- Large Buttons -->
<a href="#" class="fc-button fc-button--large">Default button</a>
<a href="#" class="fc-button fc-button--large fc-button--hollow">Hollow button</a>
<a href="#" class="fc-button fc-button--large fc-button--primary">Primary button</a>
<a href="#" class="fc-button fc-button--large fc-button--secondary">Secondary button</a>