---
title: Colors
eleventyNavigation:
  key: Colors
  icon: droplet
  order: 3
tags: [ "MainPage" ]
sectionOrder: 3
draft: true
---

<div class="color-blocks">
	<div class="color-block" style="background-color: var(--primary-dark-color); color: white;">
		Primary Dark
	</div>
	<div class="color-block" style="background-color: var(--primary-color); color: white;">
		Primary
	</div>
	<div class="color-block" style="background-color: var(--primary-light-color); color: black;">
		Primary Light
	</div>
	<div class="color-block" style="background-color: var(--complementary-color); color: black">
		Complementary
	</div>
</div>

<div>
	<input type="checkbox" id="testCheckBox" name="testCheckBox" checked />
	<label for="testCheckBox">This checkbox has the accent color</label>
</div>