Brand and Colors

Primary

#A38152

Secondary

#21272C

Base

#FFF

Option 1

#525B64

Option 2

#7B7F83

Option 3

#869EB5

Option 4

#D3E4F4

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>
Default Link Options
<a href="#" class="link link--primary"></a>
Primary Link Options
<a href="#" class="link link--secondary"></a>
Secondary Link Options

Forms and Buttons

<a class="btn btn-primary"></a>
Button Primary
<a class="btn btn-outline-primary"></a>
Button Outline Primary

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">