NEEDS CONFIGURED ON page-style_guide.php

Additional Colors array and Typography section have to be manually configured in template file, then remove this section.

Style Guide

Primary Accent #019258 rgb(1,146,88)
Secondary Accent #e67b2d rgb(230,123,45)
Lt Grey #f7f9fa rgb(247,249,250)
Dk Grey #62677d rgb(98,103,125)
eggplant #2b2037 rgb(43,32,55)
storm-grey #6b7686 rgb(107,118,134)
pale-grey #d9d3e1 rgb(217,211,225)
heather #aea0bf rgb(174,160,191)
muted-purple #635375 rgb(99,83,117)
action-orange #e67d23 rgb(230,125,35)
light-grey #e9eae6 rgb(233,234,230)

abcd

Raleway, 300 class: .font-light

abcd

Raleway, 400 no class needed

abcd

Raleway, 500 class: .font-mid

abcd

Raleway, 600 class: .font-bold

abcd

Raleway, 700 class: .font-black

Note: Global font headings are below, note however that numerous content blocks in this theme utilize uniqie styling and my offer font size and style variations from what you see below. Primary text content should use the below styles for consistency sake though.

Headline 1

<h1></h1> or class .h1

Headline 2

<h2></h2> or class .h2

Headline 3

<h3></h3> or class .h3

Headline 4

<h4></h4> or class .h4

Headline 5

<h5></h5> or class .h5

Headline 6

<h6></h6> or class .h6

Lorem ipsum dolor sit amet, mauris sit ante tincidunt vulputate, lacus hac a vestibulum nibh, et felis, in dolor ornare, metus felis at vitae amet vitae. Ut arcu tristique ut non sem, neque dictum mi montes duis commodo, viverra elit erat sollicitudin vel est tempor, metus semper vehicula eget.

<p></p> or class .p

Note: In addition to the button styles below most content blocks that give access to adding buttons allow for custom background and text colors to be selected.

Styles

<a href="" class="button theme_accent_bg">Primary</a>
<a href="" class="button theme_accent2_bg">Secondary</a>
<a href="" class="button button--black">Black</a>
<a href="" class="button button--black button--ghost">Black Ghost</a>
<a href="" class="button button--white">White</a>
<a href="" class="button button--white button--ghost">White Ghost</a>
<a href="">Link</a>

Sizes

<a href="" class="button theme_accent_bg button--large">Large Button</a>
<a href="" class="button theme_accent_bg ">Regular Button</a>
<a href="" class="button theme_accent_bg button--small">Small Button</a>
<a href="" class="button theme_accent_bg button--large button--fw">Large Button</a>
<a href="" class="button theme_accent_bg button--fw ">Regular Button</a>
<a href="" class="button theme_accent_bg button--small button--fw">Small Button</a>