1 Branding

1.1 Logos

Agencies have specified logos for their website. They will all display the NC iconmark along with their agency name. These are to remain consistent across all agencies as they migrate to the new theme.

1.1.1 Enterprise


1.1.2 Agencies

Example agency logo:

1.2 Colors

Enterprise color palettes should be used as a baseline across all institutions. Global notifications have their own separate palette and are based on the severity of the message. Institutions can include additional colors that can used to accent the core color palette.

1.2.1 Core Palette

  • Black

    #0b0c0c
    11, 12, 12

  • Blue

    #092940
    9, 41, 64

  • Gray

    #5f6c7b
    95, 108, 123

  • Light Gray

    #95a0ad
    149, 160, 173

  • Off White

    #ecf0f3
    236, 240, 243

  • White

    #ffffff
    255, 255, 255

1.2.2 Accent Palette

  • Cool Gray

    #6a7681
    106, 118, 129

  • Warm Gray

    #757575
    117, 117, 117

  • Light Blue

    #3f7d97
    63, 125, 151

  • Blue

    #397aac
    57, 122, 172

  • Indigo

    #00376d
    0, 55, 109

  • Deep Purple

    #662e6b
    102, 46, 107

  • Purple

    #701c45
    112, 28, 69

  • Red

    #a83338
    168, 51, 56

  • Orange

    #c05411
    192, 84, 17

  • Olive

    #9a6f09
    154, 111, 9

  • Green

    #588023
    88, 128, 35

  • Turquoise

    #3c807d
    60, 128, 125

1.2.3 Notification Palette

  • Blue

    #397aac
    57, 122, 172

  • Green

    #588023
    88, 128, 35

  • Orange

    #c05411
    192, 84, 17

  • Red

    #a83338
    168, 51, 56

1.3 Typography

To help enhance readability across all devices, we will use the various weights from Transport New, a font family originally designed for traffic signage in Europe. We’ll accent that family with Georgia family, as needed. We’ll use a 16-px baseline, tiered structure for heading sizes.

1.3.1 Typefaces

Transport New • Heavy

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Transport New • Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Transport New • Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Georgia • Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

1.3.2 Hierarchy

Heading 1 - 48px

Heading 2 - 36px

Heading 3 - 24px

Heading 4 - 21px

Heading 5 - 18px
Heading 6 - 16px

Body paragraph - 16px


<h1>Heading 1 - 48px</h1>
<h2>Heading 2 - 36px</h2>
<h3>Heading 3 - 24px</h3>
<h4>Heading 4 - 21px</h4>
<h5>Heading 5 - 18px</h5>
<h6>Heading 6 - 16px</h6>
<p>Body paragraph - 16px</p>

1.4 Iconography

All glyphs are inteded to be single-color icons that can be used to represent an item. Our primary icon family will be Google’s Material Design set, but will have IcoMoon’s set supplement, as needed. Both showcase a heavy, but clean style that is easy to read on mobile.

1.4.1 Glyphs

The following are just a few of the icons in the glyph family. View Entire Glyph Family.

  • flickr

  • pinterest

  • youtube

  • googleplus

  • facebook

  • instagram

  • twitter

  • feed

  • youtube

  • linkedin

  • event

  • launch

  • settings

  • turned-in

  • turned-in-not

  • view-list

  • view-module

  • wallet-travel

  • work

  • email

  • add

  • remove

  • vertical-align-top

  • attachment

  • phonelink

  • more-horiz

  • more-vert

  • icon-notifications

  • account-balance

  • help

  • highlight-remove

  • info

  • info-outline

  • label

  • label-outline

  • language

  • query-builder

  • search

  • error

  • warning

  • report

  • dehaze

  • my-location

  • arrow-back

  • arrow-forward

  • cancel

  • check

  • chevron-left

  • chevron-right

  • close

  • expand-less

  • expand-more

  • radio-button-off

  • radio-button-on

  • comment

 <span class="icon-googleplus" aria-hidden="true"></span> 

1.4.2 Document Types

  • doc

  • doc alt

  • pdf

  • pdf alt

  • photo

  • photo alt

  • ppt

  • ppt alt

  • text

  • text alt

  • xls

  • xls alt

<span class="icon-doctype icon-doctype-doc" aria-hidden="true"></span>