Branding & Style Guide

1.1 base.colors Colors

Toggle example guides Toggle HTML markup

Main colors for use on the site.

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: sass/base/_base.scss, line 20