Branding & Style Guide

Example
Main site colors, with percentage values and grayscale drawdowns for comparison.

Sienna

RGB: 119,17,20

Hex: #771114

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Navy

RGB: 26,38,85

Hex: #1a2655

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Orange

RGB: 183,106,41

Hex: #b76a29

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Gray

RGB: 148,150,153

Hex: #949699

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Olive

RGB: 142,144,53

Hex: #8e9035

Drawdown
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Markup: base/colors.twig
<!-- Colors Twig -->
Main site colors, with percentage values and grayscale drawdowns for comparison.
<div class="colormain group">
	<div class="colordemo">
		<div class="chip-main chip-01">
		</div>
		<h4>Sienna</h4>
		<p>RGB: 119,17,20  </p>
		<p>Hex: #771114</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-01"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-01 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-01 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-01 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-01 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-01 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-01 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-01 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-01 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-01 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-02">
		</div>
		<h4>Navy</h4>
		<p>RGB: 26,38,85   </p>
		<p>Hex: #1a2655</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-02"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-02 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-02 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-02 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-02 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-02 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-02 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-02 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-02 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-02 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-03">
		</div>
		<h4>Orange</h4>
		<p>RGB: 183,106,41 </p>
		<p>Hex: #b76a29</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-03"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-03 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-03 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-03 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-03 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-03 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-03 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-03 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-03 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-03 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-04">
		</div>
		<h4>Gray</h4>
		<p>RGB: 148,150,153</p>
		<p>Hex: #949699</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-04"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-04 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-04 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-04 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-04 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-04 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-04 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-04 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-04 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-04 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
	<div class="colordemo">
		<div class="chip-main chip-05">
		</div>
		<h4>Olive</h4>
		<p>RGB: 142,144,53 </p>
		<p>Hex: #8e9035</p>
		<h5>Drawdown</h5>
		<div class="color-drawdown">
			<div class="dd-chip-label">100%</div>
			<div class="dd-chip-color chip-05"></div>
			<div class="dd-grayband"></div>
			<div class="dd-chip-label">90%</div>
			<div class="dd-chip-color chip-05 lighten-90"></div>
			<div class="dd-chip-label">80%</div>
			<div class="dd-chip-color chip-05 lighten-80"></div>
			<div class="dd-chip-label">70%</div>
			<div class="dd-chip-color chip-05 lighten-70"></div>
			<div class="dd-chip-label">60%</div>
			<div class="dd-chip-color chip-05 lighten-60"></div>
			<div class="dd-chip-label">50%</div>
			<div class="dd-chip-color chip-05 lighten-50"></div>
			<div class="dd-chip-label">40%</div>
			<div class="dd-chip-color chip-05 lighten-40"></div>
			<div class="dd-chip-label">30%</div>
			<div class="dd-chip-color chip-05 lighten-30"></div>
			<div class="dd-chip-label">20%</div>
			<div class="dd-chip-color chip-05 lighten-20"></div>
			<div class="dd-chip-label">10%</div>
			<div class="dd-chip-color chip-05 lighten-10"></div>
		</div>
	</div> <!-- End Color Demo -->
</div> <!-- End Outer wrapper -->
Source: base/_base.scss, line 15