Web Standards
 

UVA Health

Login

Request an Account

  • Request an Account

Web Color Palette

 web guidelines 1

web guidelines 2

The above chart illustrates recommended guidelines for color usage and implementation in design elements and typesetting. Please use best discretion when using these colors and maintain a positive balance of white space in the the design to avoid heavy design weight in web pages and content areas. Some current design direction is included as a reference later in this document.

Try to avoid “cluttered” design and use clearly defined design elements and content areas in your design and layout. Maintain the brand integrity of the design by implementing a clear header area with appropriate logo usage, a clear content area that is open and with proper white-space balance, and a clear footer area.

Fonts

Verdana is the primary font for web copy. Georgia is the serif font used for certain heading and labels. Font size should be no smaller than 12px for standard <p> text and links and 10px for copyright information. Headlines should make use of appropriately styled <h> tags, no bigger than 30px. Please note that some headings color definitions vary slightly from the above color palette guidelines. Please use best discretion to maintain the integrity of the deign and accessibility considerations.

H1 - Georgia Regular • 30px • #5c5c5c
H2 - Georgia Regular • 22px • #404040
H3 - Verdana Regular • 18px • #404040
H4 - Verdana Bold Uppercase • 12px • #404040
H5 - Verdana Bold • 12px • #404040
H6 - Verdana Regular • 12px • #404040

CSS Definition Examples

body { color:#404040; font-family:Verdana, sans-serif; font-size:12px; lineheight: 1.5; }

h1, h2, h3, h4, h5, h6 { color:#404040; font-weight:normal; }
h1 { margin-bottom:30px; color:#5C5C5C; font-size:30px; font-family:Georgia,serif; }
h2 { margin-top:30px; margin-bottom:10px; font-size:22px; font-family:Georgia,serif; }
h3 { margin-top:30px; margin-bottom:0px; font-size:18px; }
h4 { margin-top:30px; margin-bottom:-8px; font-size:12px; font-weight:bold; texttransform:uppercase; }
h5 { margin-top:30px; margin-bottom:-8px; font-size:12px; font-weight:bold; }
h6 { margin-top:30px; margin-bottom:-10px; font-size:12px; }

a { border-bottom:solid 1px #f2f2f2; color:#007ed9; text-decoration:none; }
a:active, a:visited, a:hover { color:#007ed9; }

Type/Content Treatment

Bullets should always be squared and align flush left with the block of copy and do not hang into the column
Squares are 50% the size of the text copy and centered vertically
Secondary bullets should be a minus/dash (-) symbol.
Minus/dash symbols are 40% the size of the text copy and centered vertically
Use periods instead of hyphens for phone numbers (434.555.1212)
Use only one space after a period, colon, or semi-colon

General

Site content should be optimized for screen resolutions of 1280 x 1024 (1200 content)
Content should be centered within the browser window
Site must meet Section 508 accessibility requirements
Copy must target 8th grade or below reading level

Tables

Tables should represent logical relationships among data. Tables should never be used as a layout device.

Accessibility Issues to Consider

Alt tags: A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).
Assistive technologies: Screen readers, screen magnifiers, text-to-speech software, speech recognition software, alternative keyboards, alternative pointing devices, keyboard interface
User-controllable: Page-tabbing, font-size
Link targeting: Not advisable to broach new windows, No Pop-ups
Auto-refresh: Not suggested
Site must be search engine friendly

Screen Examples

web guidelines 4

web guidelines 5

Ask a Design Question

Feel free to ask us for advice or suggestions. We're here to help.

Ask Us Now!