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.2.4 Alternate Theme Colors

The following are five different color profiles for the new alternate themes.

1.2.4.1 Bright and Colorful

  • Primary 1

    #e1245b
    225, 36, 91

  • Primary 2

    #8238b6
    130, 56, 182

  • Primary 3

    #cb4e22
    203, 78, 34

  • Primary 4

    #0e8834
    14, 136, 52

  • Secondary 1

    #092940
    9, 41, 64

  • Secondary 2

    #0b0c0c
    11, 12, 11

  • Secondary 3

    #5f6c7a
    95, 108, 122

  • Secondary 4

    #ecf0f3
    236, 240, 243

1.2.4.2 Light and Elegant

  • Primary 1

    #147fa6
    20, 127, 166

  • Primary 2

    #9b59b6
    155, 89, 182

  • Primary 3

    #4e7f04
    78, 127, 4

  • Primary 4

    #9b720c
    155, 114, 12

  • Secondary 1

    #092940
    9, 41, 64

  • Secondary 2

    #757575
    117, 117, 117

  • Secondary 3

    #0b0c0c
    11, 12, 12

  • Secondary 4

    #701c45
    112, 28, 69

1.2.4.3 Edgy and Dark

  • Primary 1

    #343434
    52, 52, 52

  • Primary 2

    #e22a12
    226, 42, 18

  • Primary 3

    #575757
    87, 87, 87

  • Primary 4

    #777777
    119, 119, 119

  • Secondary 1

    #6f7785
    111, 119, 133

  • Secondary 2

    #a83338
    168, 51, 56

  • Secondary 3

    #757575
    117, 117, 117

  • Secondary 4

    #ffffff
    255, 255, 255

1.2.4.4 Public Servant

  • Primary 1

    #2e456d
    46, 69, 109

  • Primary 2

    #3c807d
    60, 128, 125

  • Primary 3

    #5d6064
    93, 96, 100

  • Primary 4

    #777777
    119, 119, 119

  • Secondary 1

    #092940
    9, 41, 64

  • Secondary 2

    #3f7d97
    63, 125, 151

  • Secondary 3

    #7ea8a6
    126, 168, 166

  • Secondary 4

    #ecf0f3
    236, 240, 243

1.2.4.5 Informal

  • Primary 1

    #587e7a
    88, 126, 122

  • Primary 2

    #7f4c38
    127, 76, 56

  • Primary 3

    #857d6a
    133, 125, 106

  • Primary 4

    #886ba3
    136, 107, 163

  • Secondary 1

    #224b4f
    34, 75, 79

  • Secondary 2

    #4c3c5a
    76, 60, 90

  • Secondary 3

    #a5905f
    165, 144, 95

  • Secondary 4

    #f4f1eb
    244, 241, 235

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.1.1 Alternate Theme Typefaces

Option 1

Transport New

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Georgia

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Option 2
Georgia

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Option 3
Fira

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Oswald

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.

 <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>