This pattern-library or live style guide is designed to show the atoms and molecules (basic building blocks for page componenets) for help in maintaining design consistency across the site. It contains different materials that can be assembled into more complex page layouts.
This guide contains colors, code snippets and style guidelines.
Start by adding the following files to your page:
<link rel="stylesheet" href="assets/toolkit/styles/toolkit.css"><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><p class="txt txt--body with--padding-2">This pattern-library or live style guide is designed to show the atoms and molecules (basic building blocks for page componenets) for help in maintaining design consistency across the site. It contains different materials that can be assembled into more
complex page layouts.</p>
<p class="txt txt--body with--padding-2">This guide contains colors, code snippets and style guidelines.</p>
<h2 class="hdg hdg--2">Usage</h2>
<p class="txt txt--body with--padding-2">Start by adding the following files to your page:</p>
<pre class="language-markup"><code class="language-markup"><link rel="stylesheet" href="assets/toolkit/styles/toolkit.css"></code></pre>
<pre class="language-markup"><code class="language-markup"><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></code></pre><h3 class="hdg hdg--3">Primary</h3>
<div class="f-color-chips">
<div class="f-color-chip" style="background-color: rgb(162, 182, 138);">
<div class="f-color-chip__name color-dark">Green</div>
<div class="f-color-chip__color color-dark">$color-rba-green</div>
<div class="f-color-chip__color color-dark">rgb(162, 182, 138)</div>
<div class="f-color-chip__color color-dark">#A2B68A</div>
</div>
<div class="f-color-chip" style="background-color: rgb(241, 164, 42);">
<div class="f-color-chip__name color-dark">Orange Light</div>
<div class="f-color-chip__color color-dark">$color-rba-orange-light</div>
<div class="f-color-chip__color color-dark">rgb(241, 164, 42)</div>
<div class="f-color-chip__color color-dark">#F1A42A</div>
</div>
<div class="f-color-chip" style="background-color: rgb(244, 122, 63);">
<div class="f-color-chip__name color-dark">Orange</div>
<div class="f-color-chip__color color-dark">$color-rba-orange</div>
<div class="f-color-chip__color color-dark">rgb(244, 122, 63)</div>
<div class="f-color-chip__color color-dark">#F47A3F</div>
</div>
</div>
<h3 class="hdg hdg--3">Secondary</h3>
<div class="f-color-chips">
<div class="f-color-chip" style="background-color: rgb(222, 230, 210);">
<div class="f-color-chip__name color-dark">Green Light</div>
<div class="f-color-chip__color color-dark">$color-rba-green-light</div>
<div class="f-color-chip__color color-dark">rgb(222, 230, 210)</div>
<div class="f-color-chip__color color-dark">#DEE6D2</div>
</div>
<div class="f-color-chip" style="background-color: rgb(130, 143, 105);">
<div class="f-color-chip__name color-light">Green Dark</div>
<div class="f-color-chip__color color-light">$color-rba-green-dark</div>
<div class="f-color-chip__color color-light">rgb(130, 143, 105)</div>
<div class="f-color-chip__color color-light">#828F69</div>
</div>
</div>
<h3 class="hdg hdg--3">Neutral</h3>
<div class="f-color-chips">
<div class="f-color-chip" style="background-color: rgb(229,229,229);">
<div class="f-color-chip__name color-dark">Gray Light</div>
<div class="f-color-chip__color color-dark">$color-rba-gray-light</div>
<div class="f-color-chip__color color-dark">rgb(229,229,229)</div>
<div class="f-color-chip__color color-dark">#E5E5E5</div>
</div>
<div class="f-color-chip" style="background-color: rgb(154,154,154);">
<div class="f-color-chip__name color-dark">Gray</div>
<div class="f-color-chip__color color-dark">$color-rba-gray</div>
<div class="f-color-chip__color color-dark">rgb(154,154,154)</div>
<div class="f-color-chip__color color-dark">#9A9A9A</div>
</div>
<div class="f-color-chip" style="background-color: rgb(80, 86, 90);">
<div class="f-color-chip__name color-light">Gray-Dark</div>
<div class="f-color-chip__color color-light">$color-rba-gray-dark</div>
<div class="f-color-chip__color color-light">rgb(80, 86, 90)</div>
<div class="f-color-chip__color color-light">#50565A</div>
</div>
<div class="f-color-chip" style="background-color: rgb(9, 10, 5);">
<div class="f-color-chip__name color-light">Black</div>
<div class="f-color-chip__color color-light">$color-rba-black</div>
<div class="f-color-chip__color color-light">rgb(9, 10, 5)</div>
<div class="f-color-chip__color color-light">#090A05</div>
</div>
</div>Proxima Nova is the main workhorse for the Renewal by Anderson website. It is used for the body copy and main headlines of the site. It can be found in buttons, small copy, and alerts.
Georgia lives smostly as a supplementary friend to Proxima Nova. It can be found most often in its italic form to add an organic flavor to the hard-lined Proxima. It sometimes will be used for headlines or informational text, text links, quotes, etc.
Text used to be build hierarchy on a page is considered a "headline." Many kinds of headlines exist on a site in order to create hierarchy on a page.
<div class="o-flex o-flex--wrap">
<div class="o-flex--column o-flex--grow o-grid-fixed__col--4of12 o-wrapper--40">
<h2 class="hdg hdg--2 with--text-center">Proxima Nova</h2>
<p class="txt txt--body">
Proxima Nova is the main workhorse for the Renewal by Anderson website. It is used for the body copy and main headlines of the site. It can be found in buttons, small copy, and alerts.
</p>
</div>
<div class="o-flex--column o-flex--grow o-grid-fixed__col--4of12 o-wrapper--40">
<h2 class="hdg hdg--2 with--text-center with--font-secondary">Georgia</h2>
<p class="txt txt--body">
Georgia lives smostly as a supplementary friend to Proxima Nova. It can be found most often in its italic form to add an organic flavor to the hard-lined Proxima. It sometimes will be used for headlines or informational text, text links, quotes, etc.
</p>
</div>
</div>
<hr class="c-horizontal-line">
<h2 class="hdg hdg--2">Headlines and Heirarchy</h2>
<div class="o-wrapper--20">
<!-- <h3 class="hdg hdg--3">Headlines and Heirarchy</h3> -->
<p class="txt txt--body">
Text used to be build hierarchy on a page is considered a "headline." Many kinds of headlines exist on a site in order to create hierarchy on a page.
</p>
<h1 class="hdg hdg--1">Heading Level 1</h1>
<h2 class="hdg hdg--2">Heading Level 2</h2>
<h3 class="hdg hdg--3">Heading Level 3</h3>
<h4 class="hdg hdg--4">Heading Level 4</h4>
<h5 class="hdg hdg--5">Heading Level 5</h5>
<h6 class="hdg hdg--6">Heading Level 6</h6>
</div>