Logo Components

Main Logo

Tagline

Just what you need

Colors

This design uses the following colours.

red: #d30c00

yellow: #f9d61f

white: #fafafa

light gray: #eeeeee

medium gray: #4a4a4a

dark gray: #303030

black: #303030

Typography

This design uses Bandeins Sans Variable for paragraph text and headings and Parry Grotesque Pro for display heading.

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

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

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

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

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

<h1 class="sv-cursive">Cursive Text Level 1</h1>

<h2 class="sv-cursive">Cursive Text Level 2</h2>

<h3 class="sv-cursive">Cursive Text Level 3</h3>

<h4 class="sv-cursive">Cursive Text Level 4</h4>

<h5 class="sv-cursive">Cursive 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

Cursive Text Level 1

Cursive Text Level 2

Cursive Text Level 3

Cursive Text Level 4

Cursive 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="sv-button">Default button</a>
<a href="#" class="sv-button sv-button--hollow">Hollow button</a>
<a href="#" class="sv-button sv-button--primary">Primary button</a>
<a href="#" class="sv-button sv-button--secondary">Secondary button</a>

Default button Hollow button Primary button Secondary button

Larger Button

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