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
#988f7b
rgb(152,143,123)
Secondary Accent
#b4b4b4
rgb(180,180,180)
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>