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>
	<ul class="palette">
		<li class="palette__color">
			<div class="palette__swatch background--brand-primary"></div>
			<p class="palette__label">brand-primary</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--brand-primary-alternate"></div>
			<p class="palette__label">brand-primary-alternate</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--brand-secondary"></div>
			<p class="palette__label">brand-secondary</p>
		</li>
		<li class="palette__color">
			<div class="palette__swatch background--brand-secondary-alternate"></div>
			<p class="palette__label">brand-secondary-alternate</p>
		</li>
	</ul>
</div>