---
title: Colors
done: true
---

<div class="row">
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">
					Default colors
				</h3>
			</div>
			<div class="card-body">
				<ul class="list-unstyled">
					{% for color in site.colors %}
					<li class="d-flex align-items-center mb-3">
						<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
						<div>
							<strong>{{ color[1].name }}</strong><br />
							<code>.bg-{{ color[0] }}</code>
						</div>
					</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">
					Light colors
				</h3>
			</div>
			<div class="card-body">
				<ul class="list-unstyled">
					{% for color in site.colors %}
					<li class="d-flex align-items-center mb-3">
						<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
						<div>
							<strong>{{ color[1].name }} lite</strong><br />
							<code>.bg-{{ color[0] }}-lt</code>
						</div>
					</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>