Branding & Style Guide

1 base Base

These are the default base styles applied to HTML elements.

Component classes can override these styles, but if no class applies a style to an HTML element, these styles will be the ones displayed.

Source: sass/styles.scss, line 14
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 16
Example

“This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.”

Markup: base/blockquote.twig
<blockquote>
  <p>“This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc
    iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at,
    tincidunt nec, gravida vehicula, nisl.”</p>
</blockquote>
Source: sass/base/_base.scss, line 267
Example
Summary Demonstration

Details text for demonstration purposes. This handy HTML5 element can be used to replace accordions and other structures with semantic markup that requires no scripting.

Also, it is good to note that when display: block; is used on the details element, the default arrow indicator will not show. This can be rectified by using display: list-item;.

Markup: base/details.twig
<details>
	<summary>Summary Demonstration</summary>
	<p>Details text for demonstration purposes. This handy HTML5 element can be used to replace accordions and other structures with semantic markup that requires no scripting.</p>
	<p>Also, it is good to note that when <code>display: block;</code> is used on the  details element, the default arrow indicator will not show. This can be rectified by using <code>display: list-item;</code>.</p>
</details>
Source: sass/base/_base.scss, line 408
Example

I am an H1 tag

I am an H2 tag

I am an H3 tag

I am an H4 tag

I am an H5 tag
I am an H6 tag

Heading 2

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 3

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 4

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 5

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Heading 6

This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.

Markup: base/headlines.twig
<h1>I am an H1 tag</h1>

<h2>I am an H2 tag</h2>

<h3>I am an H3 tag</h3>

<h4>I am an H4 tag</h4>

<h5>I am an H5 tag</h5>

<h6>I am an H6 tag</h6>

<hr>

<h2>Heading 2</h2>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h3>Heading 3</h3>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h4>Heading 4</h4>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h5>Heading 5</h5>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>

<h6>Heading 6</h6>
<p>This is a demonstration of adjacent sibling selectors for use with headings and paragraphs.</p>
Source: sass/base/_base.scss, line 141
Example

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2 2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2 2
    • List Item 3.3
  • List Item 4
Markup: base/lists.twig
<h3>Ordered List</h3>
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3
    <ol>
      <li>List Item 3.1</li>
      <li>List Item 3.2
        <ol>
          <li>List Item 3.2.1</li>
          <li>List Item 3.2 2</li>
        </ol>
      </li>
      <li>List Item 3.3</li>
    </ol>
  </li>
  <li>List Item 4</li>
</ol>
<hr />
<h3>Unordered List</h3>
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3
    <ul>
      <li>List Item 3.1</li>
      <li>List Item 3.2
        <ul>
          <li>List Item 3.2.1</li>
          <li>List Item 3.2 2</li>
        </ul>
      </li>
      <li>List Item 3.3</li>
    </ul>
  </li>
  <li>List Item 4</li>
</ul>
Source: sass/base/_base.scss, line 302

1.6 base.segmented_controls Segmented Controls

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Control elements where all options are visible by default. It makes use of semantic HTML and clean UX to lessen cognitive load. For most cases, it's advisable to use it for no more than four options.

Example
This shows default behavior with three options. If one option is set to checked, focus tabbing will only work for that specific value. Total width of the element is applied on the parent container.
This shows default behavior with two options, with first being set to checked.
This shows default behavior with two options, and is called with the sub-class .two. This option allows use where Flexbox cannot be employed.
This shows default behavior with three options, and is called with the sub-class .three. This option allows use where Flexbox cannot be employed.
This shows default behavior with four options, and is called with the sub-class .four. This option allows use where Flexbox cannot be employed.
Markup: base/segmented_controls.twig
This shows default behavior with three options. If one option is set to checked, focus tabbing will only work for that specific value. Total width of the element is applied on the parent container.
<div class="segmented_controls">
	<input type="radio" name="segment" id="option_1" value="option_1">
		<label for="option_1">Option 1</label>
	<input type="radio" name="segment" id="option_2" value="option_2">
		<label for="option_2">Option 2</label>
	<input type="radio" name="segment" id="option_3" value="option_3">
		<label for="option_3">Option 3</label>
</div>

This shows default behavior with two options, with first being set to checked.
<div class="segmented_controls">
	<input type="radio" name="segment2" id="2option_1" value="option_1" checked>
		<label for="2option_1">Option 1</label>
	<input type="radio" name="segment2" id="2option_2" value="option_2">
		<label for="2option_2">Option 2</label>
</div>

This shows default behavior with two options, and is called with the sub-class <code>.two</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls two">
	<input type="radio" name="segment3" id="3option_1" value="option_1">
		<label for="3option_1">Option 1</label>
	<input type="radio" name="segment3" id="3option_2" value="option_2">
		<label for="3option_2">Option 2</label>
</div>

This shows default behavior with three options, and is called with the sub-class <code>.three</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls three">
	<input type="radio" name="segment4" id="4option_1" value="option_1">
		<label for="4option_1">Option 1</label>
	<input type="radio" name="segment4" id="4option_2" value="option_2">
		<label for="4option_2">Option 2</label>
	<input type="radio" name="segment4" id="4option_3" value="option_3">
		<label for="4option_3">Option 3</label>
</div>

This shows default behavior with four options, and is called with the sub-class <code>.four</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls four">
	<input type="radio" name="segment5" id="5option_1" value="option_1">
		<label for="5option_1">Option 1</label>
	<input type="radio" name="segment5" id="5option_2" value="option_2">
		<label for="5option_2">Option 2</label>
	<input type="radio" name="segment5" id="5option_3" value="option_3">
		<label for="5option_3">Option 3</label>
	<input type="radio" name="segment5" id="5option_4" value="option_3">
		<label for="5option_4">Option 4</label>
</div>
Source: sass/base/_base.scss, line 456
Example
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Footer Element 1 Footer Element 2 Footer Element 3
Markup: base/table.twig
<table>
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Division 1</td>
    <td>Division 2</td>
    <td>Division 3</td>
  </tr>
  <tr>
    <td>Division 1</td>
    <td>Division 2</td>
    <td>Division 3</td>
  </tr>
  <tr>
    <td>Division 1</td>
    <td>Division 2</td>
    <td>Division 3</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>Footer Element 1</td>
    <td>Footer Element 2</td>
    <td>Footer Element 3</td>
  </tr>  
  </tfoot>
</table>
Source: sass/base/_base.scss, line 354

1.8 base.text Base Text

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Default styles for use on site. The treatments shown here normally differ per region, and are styled appropriately.
Special Note: Since the link styling affects interface elements, as well, it's best to make modifications to specific area styling rather than the base text.

Example

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.

Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy

Markup: base/text.twig
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
  dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
  Macaroon croissant sweet cheesecake. <i>Croissant icing</i> muffin. Gingerbread
  pudding
  halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw
  tootsie roll jujubes.</p>
<p>Jelly donut dragée sweet <a href="#">roll</a> sesame snaps
  <strong>tootsie roll</strong>. Halvah powder chocolate cake pudding.
  Cotton candy fruitcake jelly beans cake. Marshmallow
  jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy </p>
Source: sass/base/_base.scss, line 206

1.9 base.toggle_switch Toggle Switch

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Makes use of semantic HTML and clean UX to lessen cognitive load. Interaction enhanced with use of CSS transitions. Styling is done with checkbox input only to minimize need for custom code.

Example
Markup: base/toggle_switch.twig
<input type="checkbox" class="toggle" id="check_1" name="check_1" value="check_1">
	<label for="check_1">Standard Toggle</label>
<input type="checkbox" class="toggle" id="check_2" name="check_2" value="check_2" disabled="">
	<label for="check_2">Disabled Toggle</label>
Source: sass/base/_base.scss, line 597