codesignd Patterns

<div class="preview-canvas">
	<h1>Color previews</h1>
	
	<ul class="palette">
		<li class="palette__color">
			<div class="palette__swatch background--pagebg"></div>
			<p class="palette__label">pagebg</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--pagepattern"></div>
			<p class="palette__label">pagepattern</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--text"></div>
			<p class="palette__label">text</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--warn"></div>
			<p class="palette__label">warn</p>
		</li>
	</ul>
	<ul class="palette">
		<li class="palette__color">
			<div class="palette__swatch background--passive-light"></div>
			<p class="palette__label">passive-light</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--passive"></div>
			<p class="palette__label">passive</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--passive-dark"></div>
			<p class="palette__label">passive-dark</p>
		</li>
	</ul>
	
	<p>Brand colors are specific to each site, so please also see the site-specific color previews.</p>
</div>