• $color-primary
• $color-primary-dark
• $color-primary-darkest
• $color-secondary
• $color-bg
• $color-bg-alt

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch" style="background: #898d86;"></span>
		<span class="sg-label">$color-primary</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #5A5F55;"></span>
		<span class="sg-label">$color-primary-dark</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #35332E;"></span>
		<span class="sg-label">$color-primary-darkest</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #29313D;"></span>
		<span class="sg-label">$color-secondary</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #fbf7e5;"></span>
		<span class="sg-label">$color-bg</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #efedda;"></span>
		<span class="sg-label">$color-bg-alt</span>
	</li>
</ul>
									
								

Primary font: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif

Primary font italic: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif

Primary font bold: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif

Secondary font: Georgia, Times, "Times New Roman", serif;

Secondary font italic: Georgia, Times, "Times New Roman", serif;

Secondary font bold: Georgia, Times, "Times New Roman", serif;

									
										<p>Primary font: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif</p>
<p><em>Primary font italic: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif</em></p>
<p><strong>Primary font bold: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif</strong></p>
<p class="font-secondary">Secondary font: Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold: Georgia, Times, "Times New Roman", serif;</strong></p>
									
								

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

									
										<p class="hide-small">This text is hidden on smaller screens</p>

<p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>

<p class="hide-med">This text is hidden on medium screens only</p>

<p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>

<p class="hide-large">This text is hidden on large screens</p>

<p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>