Brand and Colors


Primary

Secondary

Base

Option 1

Option 2

Option 3

Option 4

Typography


Normal Headings

Font-Family: Playfair Display
<h1> </h1>

h1. Lorem, ipsum dolor. 50px

<h2> </h2>

h2. Lorem, ipsum dolor. 45px

<h3> </h3>

h3. Lorem, ipsum dolor. 40px

<h4> </h4>

h4. Lorem, ipsum dolor. 35px

<h5> </h5>
h5. Lorem, ipsum dolor. 30px
<h6> </h6>
h6. Lorem, ipsum dolor. 25px

Display Headings

<h1 class="display-1"> </h1>

h1. Lorem. 110px

<h2 class="display-2"> </h2>

h2. Lorem. 95px

<h3 class="display-3"> </h3>

h3. Lorem. 80px

<h4 class="display-4"> </h4>

h4. Lorem. 65px

<h5 class="display-5"> </h5>
h5. Lorem. 50px
<h6 class="display-6"> </h6>
h6. Lorem. 35px

Sub Headings

Font-Family: Aliens and Cows
<h2 class="font-face--sub-header"></h6>

Sub Header Font Face


Paragraphs and Base Font

Font-Family: Sofia Pro

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis laudantium consequatur minima esse! Qui amet perferendis sed. Sint nemo quo laborum nisi voluptas provident repudiandae.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, magnam!


Liks Options

<a href="#" class="link"></a>
<a href="#" class="link link--primary"></a>
<a href="#" class="link link--secondary"></a>

Forms and Buttons

<a class="btn btn-primary"></a>
<a class="btn btn-outline-primary"></a>

Custom Select

<select class="custom-select" id="inputGroupSelect02">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

HR

Light Horizontal Line

<hr class="hr hr--light">
Dark Horizontal Line

<hr class="hr hr--dark">