Davidson Styleguide

Colors 

<div class="slab ">
    <div class="slab__wrapper">
        <h2>Primary Colors</h2>
        <div class="grid grid--small sg-colors">
            <div class="sg-colors__column">
                davidson-red
                <pre>color(davidson-red)</pre>
                <span class="sg-swatch bg-davidson-red"></span>
            </div>
            <div class="sg-colors__column">
                dark-teal
                <pre>color(dark-teal)</pre>
                <span class="sg-swatch bg-dark-teal"></span>
            </div>
            <div class="sg-colors__column">
                medium-teal
                <pre>color(medium-teal)</pre>
                <span class="sg-swatch bg-medium-teal"></span>
            </div>
            <div class="sg-colors__column">
                light-teal
                <pre>color(light-teal)</pre>
                <span class="sg-swatch bg-light-teal"></span>
            </div>
        </div>
    </div>
</div>

<div class="slab ">
    <div class="slab__wrapper">
        <h2>Secondary Colors</h2>
        <div class="grid grid--small sg-colors">
            <div class="sg-colors__column">
                bright-red
                <pre>color(bright-red)</pre>
                <span class="sg-swatch bg-bright-red"></span>
            </div>
            <div class="sg-colors__column">
                bright-yellow
                <pre>color(bright-yellow)</pre>
                <span class="sg-swatch bg-bright-yellow"></span>
            </div>
            <div class="sg-colors__column">
                bright-green
                <pre>color(bright-green)</pre>
                <span class="sg-swatch bg-bright-green"></span>
            </div>
        </div>
    </div>
</div>

<div class="slab ">
    <div class="slab__wrapper">
        <h2>Grays</h2>
        <div class="sg-colors grid grid--small">
            <div class="sg-colors__column">
                gray-darkest
                <pre>color(gray-darkest)</pre>
                <span class="sg-swatch bg-gray-darkest"></span>
            </div>
            <div class="sg-colors__column">
                gray-darker
                <pre>color(gray-darker)</pre>
                <span class="sg-swatch bg-gray-darker"></span>
            </div>
            <div class="sg-colors__column">
                gray-dark
                <pre>color(gray-dark)</pre>
                <span class="sg-swatch bg-gray-dark"></span>
            </div>
            <div class="sg-colors__column">
                gray-medium-dark
                <pre>color(gray-medium-dark)</pre>
                <span class="sg-swatch bg-gray-medium-dark"></span>
            </div>
            <div class="sg-colors__column">
                gray-medium-light
                <pre>color(gray-medium-light)</pre>
                <span class="sg-swatch bg-gray-medium-light"></span>
            </div>
            <div class="sg-colors__column">
                gray-light
                <pre>color(gray-light)</pre>
                <span class="sg-swatch bg-gray-light"></span>
            </div>
            <div class="sg-colors__column">
                gray-lighter
                <pre>color(gray-lighter)</pre>
                <span class="sg-swatch bg-gray-lighter"></span>
            </div>
            <div class="sg-colors__column">
                gray-lightest
                <pre>color(gray-lightest)</pre>
                <span class="sg-swatch bg-gray-lightest"></span>
            </div>
        </div>
    </div>
</div>

<div class="slab ">
    <div class="slab__wrapper">
        <h2>Messaging Colors</h2>
        <div class="sg-colors grid grid--small">
            <div class="sg-colors__column">
                success
                <pre>color(success)</pre>
                <span class="sg-swatch bg-success"></span>
            </div>
            <div class="sg-colors__column">
                warning
                <pre>color(warning)</pre>
                <span class="sg-swatch bg-warning"></span>
            </div>
            <div class="sg-colors__column">
                alert
                <pre>color(alert)</pre>
                <span class="sg-swatch bg-alert"></span>
            </div>
            <div class="sg-colors__column">
                info
                <pre>color(info)</pre>
                <span class="sg-swatch bg-info"></span>
            </div>
        </div>
    </div>
</div>
 
{# COLORS #}
{# comment out any swatches not needed by your palette #}

{% set colorset = ['davidson-red','dark-teal','medium-teal','light-teal'] %}
{% set secondarycolors = ['bright-red','bright-yellow','bright-green'] %}
{% set graycolors = ['gray-darkest','gray-darker','gray-dark','gray-medium-dark','gray-medium-light','gray-light','gray-lighter','gray-lightest',] %}
{% set messagingcolors = ['success','warning','alert','info'] %}
{% embed '@slab' %}
	{% block slab_content %}
		<h2>Primary Colors</h2>
		<div class="grid grid--small sg-colors">
			{% for i in colorset %}
			<div class="sg-colors__column">
				{{ i }} <pre>color({{ i }})</pre>
				<span class="sg-swatch bg-{{ i }}"></span>
			</div>
			{% endfor %}
		</div>
	{% endblock %}
{% endembed %}

{% embed '@slab' %}
	{% block slab_content %}
		<h2>Secondary Colors</h2>
		<div class="grid grid--small sg-colors">
			{% for i in secondarycolors %}
			<div class="sg-colors__column">
				{{ i }} <pre>color({{ i }})</pre>
				<span class="sg-swatch bg-{{ i }}"></span>
			</div>
			{% endfor %}
		</div>
	{% endblock %}
{% endembed %}

{% embed '@slab' %}
	{% block slab_content %}
		<h2>Grays</h2>
		<div class="sg-colors grid grid--small">
			{% for i in graycolors %}
			<div class="sg-colors__column">
				{{ i }} <pre>color({{ i }})</pre>
				<span class="sg-swatch bg-{{ i }}"></span>
			</div>
			{% endfor %}
		</div>
	{% endblock %}
{% endembed %}

{% embed '@slab' %}
	{% block slab_content %}
		<h2>Messaging Colors</h2>
		<div class="sg-colors grid grid--small">
			{% for i in messagingcolors %}
			<div class="sg-colors__column">
				{{ i }} <pre>color({{ i }})</pre>
				<span class="sg-swatch bg-{{ i }}"></span>
			</div>
			{% endfor %}
		</div>
	{% endblock %}
{% endembed %}
 
/* No context defined for this component. */

This is a convenience pattern to demonstrate the colors used on the site. It should not be embedded, and the styles used to create the backgrounds should not be used directly.