Visual Elements/Styling

Color

  • The approved web color palette is based on the colors developed as part of the print stanards at UNC Charlotte. The approved web colors are presented (on the right) with their corresponding hexidecimal code.
  • The lighter colors are ideal for background colors of blocks for placement in sidebars or other regions. The darker colors work best for horizontal lines, block borders, and page title embellishments such as underlines.
     
  • System messages coming directly from Drupal may display with a red, yellow, or green background.  This is the only time these colors may be used as background colors.

Fonts

  • Fonts are determined by the CSS in the template.
  • Page titles and subtitles appear in Times New Roman.
  • Page headings appear in Times New Roman.
  • Body copy will appear in Arial.
  • Avoid adding extraneous treatments to text, such as highlighting or any other type of decoration.
  • Strikethrough with fuchsia is only allowed for the Faculty Governance site to indicate changes in the Course and Curriculum Approvals section.

Grid

The UNC Charlotte website is set up on a 24 column grid with 30px wide columns and 10px wide gutters. All design element should be applied to this grid.


Elements

Header
Width: 100%
Height: 100px
Background HEX Color: #00703C

Site Title
Font: Times New Roman Font-size: 20px (1.25em) HEX Color: #FFFFFF (White)

Site Subtitle
Font: Times New Roman Italic Font-size: 11px (.7em)
HEX Color: #FFFFFF (White)

Utilities
Font: Arial
Font-size: 12px (.74em) HEX Color: #FFFFFF (White)

Horizontal Navigation
Width: 950px
Cell Width: Divided equally among the 950px Font: Arial
Font-size: 10px (.63em)
HEX Color: #555
Rollover HEX Color: #00703C

Vertical Navigation Width: 200px
Font-size: 14px (.9em) HEX Color: #555

Rollover HEX Color: #00703C

Body H2
Font-size: 24px (1.5 em)
Font: Times New Roman
Weight: Bold
HEX Color: #000000
Padding Top: 15px

 

Body H3
Font-size: 22px (1.38em)
Font: Times New Roman
Weight: Bold
HEX Color: #00703C
Padding Top: 15px

 

Body H4
Font-size: 18px (1.12em)
Font: Times New Roman
Weight: Bold
HEX Color: #00703C
Padding Top: 15px

Body H5
Font-size: 18px (1.12em)
Font: Times New Roman
Weight: Bold
HEX Color: #000000
Padding Top: 15px
Body H6
Font-size: 16px (1.0em)
Font: Times New Roman
Weight: Bold
HEX Color: #000000
Padding Top: 15px

Body H7
Font-size: 14px (.9em) Font: Times New Roman; HEX Color: #000000

 

Body Paragraph Font-size: 12px (.75em) Font: Arial
HEX Color: #333

 

Sidebar
Narrow Sidebar Width: 200px Font: Arial
Font-size: 11px (.7em)
HEX Color: #555
Header HEX Color: #00703C

Approved Website Colors