Web Style Guide

This web style guide is used to showcase standardized formatting used to build the web presence for the Greenville Health System.

Primary Colors

The primary color palette used on the web is limited, with a strong emphasis on the official PMS 361 Green color.

#34b233
#00583c
#002395*
#efefef

*#002395 is used exclusively on ghschildrens.org and is not used in the standard GHS Corporate color scheme.

Typography

Type is an important tool for building brand recognition. GHS uses the Whitney Typeface for all professionally created printed communications. On the web, Google’s Open Sans web font is used. It works well on a wide variety of devices and browsers.  

Typically, only <h2> and <h4> tags are used as section heads, and sub-section heads for simplicity.

<h2> The Quick Brown Fox Jumps Over the Lazy Dog

<h4> The Quick Brown Fox Jumps Over the Lazy Dog

<p> The Quick Brown Fox Jumps Over the Lazy Dog

<p><small>The Quick Brown Fox Jumps Over the Lazy Dog

FontAwesome Icons

On the web, the FontAwesome Toolkit is used to enhance the user experience by displaying contextual icons to assist in visual navigation and identification. Below are a sample of commonly used icons.

 

The Full FontAwesome Icon Collection can be viewed here.

Buttons

Links can easily be turned into buttons using simple CSS classes. The GHS stylesheet provides preset sizes and colors, and they even work with the FontAwesome Icons above.

Small Buttons

green button gray button red button

Medium Buttons

green button gray button red button

Small Buttons with FontAwesome Icons

green button gray button red button

Location Contact Formatting

Addresses and phone numbers are amongst the most sought-after information on ghs.org. The new responsive design means information contained in the right sidebar on a desktop is displayed below the content on a smartphone. Address information should be displayed prominently at the top of the main content area of the page.

Contact Information should be formatted exactly as below and should include a link to a google map which opens in a new browser window, as well as FontAwesome Icons to indicate address, phone, fax, and office hours.  The phone number should be formatted as a link pointed to tel:###-###-#### so that it will launch the dialer on a smartphone when clicked.

 

701 Grove Road, Greenville, SC 29605 (View Map)
(864) 455-7000 | (864) 455-7000 fax
Mon-Fri, 8:00 a.m. – 5:00 p.m.

If multiple locations are listed on a page, be sure to use the <h4> and a description of each location. If the location does not have set hours, or is open 24 hours, this may be omitted.