Design System colors

<div class="container narrow no-padding">
	<div class="box">
		<div class="pure-g">
			<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pad-bottom-2">
				<div class="color-box bg-primary"></div>
				.text-primary<div class="nowrap">.bg-primary</div>
			</div>
			<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pad-bottom-2">
				<div class="color-box bg-accent"></div>
				.text-accent<div class="nowrap">.bg-accent</div>
			</div>
			<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pad-bottom-2">
				<div class="color-box bg-white outline-subdued"></div>
				.text-white<div class="nowrap">.bg-white</div>
			</div>
		</div>
		<div class="pure-g">
			<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pad-bottom-2">
				<div class="color-box bg-light-gray"></div>
				.text-light-gray<div class="nowrap">.bg-light-gray</div>
			</div>
			<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pad-bottom-2">
				<div class="color-box bg-medium-gray"></div>
				.text-medium-gray <div class="nowrap">.bg-medium-gray</div>
			</div>
			<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pad-bottom-2">
				<div class="color-box bg-dark-gray"></div>
				.text-dark-gray <div class="nowrap">.bg-dark-gray</div>
			</div>
		</div>
	</div>
</div>