Brand Guidelines

Client brand guidelines for colors, fonts, etc.

Primary Colors

#0075bc

#15171a

#707480

#27292f

Typography

"latoregular", Helvetica, Arial, sans-serif;

"latobold", Helvetica, Arial, sans-serif;

"playfair_displaybold", Georgia, Times New Roman, serif;

View Source

<p class="latoregular">"latoregular", Helvetica, Arial, sans-serif;</p>
<p class="latobold">"latobold", Helvetica, Arial, sans-serif;</p>
<p class="playfair_displaybold">"playfair_displaybold", Georgia, Times New Roman, serif;</p>

Icons

It's easiest if you use your browser inspector to find the icon element you need. Then, you can copy and paste the HTML code for that icon.

View Source

<div class="icon-fonts">

    <p>It's easiest if you use your browser inspector to find the icon element you need. Then, you can copy and paste the HTML code for that icon.</p>

    <span class="icon-icon-close-subscore">
        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
    </span>

    <span class="icon-icon-expand-collapse-UTnav">
        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
    </span>

    <span class="icon-icon-flag"></span>

    <span class="icon-icon-settings"></span>

    <span class="icon-icon-schedule"></span>

    <span class="icon-icon-checkmark"></span>

    <span class="icon-icon-open-dropdown-menu"></span>

    <span class="icon-icon-close-panel"></span>

    <span class="icon-icon-expand-accordion">
        <span class="path1"></span><span class="path2"></span>
    </span>

    <span class="icon-icon-collapse-accordion">
        <span class="path1"></span><span class="path2"></span>
    </span>

    <span class="icon-icon-cross-out"></span>

    <span class="icon-icon-labs"></span>

    <span class="icon-icon-next-arrow-carousel">
        <span class="path1"></span><span class="path2"></span>
    </span>

    <span class="icon-icon-back-arrow-carousel">
        <span class="path1"></span><span class="path2"></span>
    </span>

    <span class="icon-icon-image-zoom"></span>

    <span class="icon-icon-highlighter"></span>

    <span class="icon-icon-favorites"></span>

    <span class="icon-icon-feedback"></span>

    <span class="icon-icon-tenant-settings"></span>

    <span class="icon-icon-syllabus"></span>

    <span class="icon-icon-cme"></span>

    <span class="icon-icon-send"></span>

    <span class="icon-icon-copy"></span>

    <span class="icon-icon-clone"></span>

    <span class="icon-icon-send-stamp"></span>

    <span class="icon-icon-critique"></span>

    <span class="icon-icon-item-pool"></span>

    <span class="icon-icon-content-coverage"></span>

    <span class="icon-icon-reference-data-management"></span>

    <span class="icon-icon-roles-permissions"></span>

    <span class="icon-icon-item-bank"></span>

    <span class="icon-icon-log-out">
        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
    </span>

    <span class="icon-icon-logged-in">
        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
    </span>

    <span class="icon-icon-review"></span>

    <span class="icon-icon-loading"></span>

    <span class="icon-icon-group-management"></span>

    <span class="icon-icon-drag-drop"></span>

    <span class="icon-icon-user-management"></span>

    <span class="icon-icon-x"></span>

    <span class="icon-icon-media-library"></span>

    <span class="icon-icon-question-admin"></span>

    <span class="icon-icon-import"></span>

    <span class="icon-icon-required-item"></span>

    <span class="icon-icon-asterisk"></span>

    <span class="icon-icon-manage-project"></span>

    <span class="icon-icon-edit"></span>

    <span class="icon-icon-notes"></span>

    <span class="icon-icon-scratch-pad"></span>

    <span class="icon-icon-calculator2"></span>

    <span class="icon-icon-item-creation"></span>

    <span class="icon-icon-publish"></span>

    <span class="icon-icon-reports"></span>

    <span class="icon-icon-save"></span>

    <span class="icon-icon-assessment-settings"></span>

    <span class="icon-icon-profile"></span>

    <span class="icon-icon-ticket"></span>

    <span class="icon-icon-compass-arrow"></span>

    <span class="icon-icon-phone-bars"></span>

    <span class="icon-icon-warning"></span>

    <span class="icon-icon-filters"></span>

    <span class="icon-icon-chat"></span>

    <span class="icon-icon-question"></span>

    <span class="icon-icon-undo"></span>

    <span class="icon-icon-repeat"></span>

    <span class="icon-icon-admin"></span>

    <span class="icon-icon-question-comment"></span>

    <span class="icon-icon-lock-open"></span>

    <span class="icon-icon-lock-closed"></span>

    <span class="icon-icon-support"></span>

    <span class="icon-icon-content-dev"></span>

    <span class="icon-icon-resources"></span>

    <span class="icon-icon-assessment"></span>

    <span class="icon-icon-dashboard"></span>

    <span class="icon-icon-hide"></span>

    <span class="icon-icon-show"></span>

    <span class="icon-icon-remove-delete"></span>

    <span class="icon-icon-quit"></span>
    <span class="icon-icon-mobile"></span>

    <span class="icon-icon-add-a-card">
      <span class="path1"></span><span class="path2"></span><span class="path3"></span>
    </span>

    <span class="icon-admin-dash-bargraph">
      <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span>
    </span>

    <span class="icon-admin-dash-linegraph">
      <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
    </span>

    <span class="icon-admin-dash-spreadsheet">
      <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span>
    </span>

</div>

Headings

Heading 1 with a link

Heading 2 with a link

Heading 3 with a link

Heading 4 with a link

Heading 5 with a link

Heading 6 with a link

Heading 1 with more text to demonstrate wrapping at different viewport widths.

Heading 2 with more text to demonstrate wrapping at different viewport widths.

Heading 3 with more text to demonstrate wrapping at different viewport widths.

Heading 4 with more text to demonstrate wrapping at different viewport widths.

Heading 5 with more text to demonstrate wrapping at different viewport widths.

Heading 6 with more text to demonstrate wrapping at different viewport widths.

View Source

<div>
    <h1>Heading 1 with a <a href="#">link</a></h1>
    <h2>Heading 2 with a <a href="#">link</a></h2>
    <h3>Heading 3 with a <a href="#">link</a></h3>
    <h4>Heading 4 with a <a href="#">link</a></h4>
    <h5>Heading 5 with a <a href="#">link</a></h5>
    <h6>Heading 6 with a <a href="#">link</a></h6>
    <h1>Heading 1 with more text to demonstrate wrapping at different viewport widths.</h1>
    <h2>Heading 2 with more text to demonstrate wrapping at different viewport widths.</h2>
    <h3>Heading 3 with more text to demonstrate wrapping at different viewport widths.</h3>
    <h4>Heading 4 with more text to demonstrate wrapping at different viewport widths.</h4>
    <h5>Heading 5 with more text to demonstrate wrapping at different viewport widths.</h5>
    <h6>Heading 6 with more text to demonstrate wrapping at different viewport widths.</h6>
</div>

Paragraphs

Default Paragraph

Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute. Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.

Bigger (Upsize) Paragraph

Lead-in Paragraph

Smaller (Downsize) Paragraph

Mousetype Paragraph

View Source

<div>
    <div class="row">
        <div class="col-xs-12">
            <h3>Default Paragraph</h3>
            <p>Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute. Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.</p>

            <p>Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.</p>

            <h3>Bigger (Upsize) Paragraph</h3>
            <p class="upsize">Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.</p>

            <h3>Lead-in Paragraph</h3>
            <p class="lead-in">Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.</p>

            <h3>Smaller (Downsize) Paragraph</h3>
            <p class="downsize">Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute. Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.</p>

            <p class="downsize">Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.</p>

            <h3>Mousetype Paragraph</h3>
            <p class="mousetype">Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute. Cupidatat mollit deserunt cillum fugiat. Adipisicing laborum minim magna aute cillum aliquip ut excepteur velit officia occaecat voluptate commodo. Cillum irure quis sit velit anim reprehenderit ea consequat aute.</p>
        </div>
    </div>
</div>

Lists

Unordered Lists

list item 1
list item 1
- list item 2
- list item 2
  - list item 3
  - list item 3
- list item 2
- list item 2
list item 1
list item 1

Ordered Lists

list item 1
list item 1
1. list item 2
2. list item 2
  1. list item 3
  2. list item 3
3. list item 2
4. list item 2
list item 1
list item 1

Definition Lists

Term: Description
Term: Description
Term: Description
Term: Description

View Source

<div>
	<div class="row">
		<div class="col-xs-12 col-sm-4">
			<h3>Unordered Lists</h3>
			<ul>
				<li>list item 1</li>
				<li>list item 1
					<ul>
						<li>list item 2</li>
						<li>list item 2
							<ul>
								<li>list item 3</li>
								<li>list item 3</li>
							</ul>
						</li>
						<li>list item 2</li>
						<li>list item 2</li>
					</ul>
				</li>
				<li>list item 1</li>
				<li>list item 1</li>
			</ul>
		</div>

		<div class="col-xs-12 col-sm-4">
			<h3>Ordered Lists</h3>
			<ol>
				<li>list item 1</li>
				<li>list item 1
					<ol>
						<li>list item 2</li>
						<li>list item 2
							<ol>
								<li>list item 3</li>
								<li>list item 3</li>
							</ol>
						</li>
						<li>list item 2</li>
						<li>list item 2</li>
					</ol>
				</li>
				<li>list item 1</li>
				<li>list item 1</li>
			</ol>
		</div>

		<div class="col-xs-12 col-sm-4">
			<h3>Definition Lists</h3>
			<dl>
				<dt>Term</dt>
				<dd>Description</dd>
				<dt>Term</dt>
				<dd>Description</dd>
				<dt>Term</dt>
				<dd>Description</dd>
				<dt>Term</dt>
				<dd>Description</dd>
			</dl>
		</div>
	</div>
</div>