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
Colors
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)
Typefaces
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
Font Headings
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
Buttons
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
Large Button Regular Button Small Button Large Full WidthButton Regular Full WidthButton Small Full WidthButton
<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>