Brand Colors

When to Use

When possible, brand colors should be used throughout the product. These colors are based on the official Abbvie Branding Guide specifications.

Functionality

Not applicable.

Rendered Code

.purple-medium-1 (#782d8a)

.purple-medium-2 (#7745a4)

.blue-medium-1 (#20abef)

.blue-light-1 (#a5d8f3)

.blue-light-2 (#e8f5fc)

.gray-purple-1 (#f1f0f7)

.green-medium-1 (#38c693)

.orange-medium-1 (#F26B51)

.red-medium-1 (#AF2715)

HTML

		TODO

CSS

	TODO

JavaScript

// No JavaScript Required

Background Image

When to Use

The background image for the body of the website is below.

The background is intended to be stretched across the entire page. For an example, see see _example-1.html.

Functionality

Not applicable.

Rendered Code

HTML

CSS

.body-background {
    background: url("../Images/bg-lab.jpg") no-repeat 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript

// No JavaScript Required

Icons (Font based)

When to Use

Icon fonts are available using Font Awesome library. A full list of icons are availabe on the website. Below, we have listed the ones most commonly used with this application.

Icon fonts can be styled the same way you would style text, using the same controls for color and size.

Functionality

Not applicable.

Rendered Code

.fa-pencil-square-o

.fa-info-circle

.fa-plus-circle

.fa-search

.fa-bars

.fa-home

.fa-user

.fa-users

.fa-cogs

.fa-sign-out

.fa-exclamation-triangle

HTML

CSS

		/* Default. Pulled from css/font-awesome.css */

JavaScript

// No JavaScript Required

Special Message Colors

When to Use

The Error Message style is used to communicate any special statuses. It is also used in tables to indicate the time that has elapsed since a submission.

Functionality

Not applicable.

Rendered Code

This is a message with a CSS class .message-red

This is a message with a CSS class .message-orange

This is a message with a CSS class .message-green

HTML

TODO

CSS

TODO

JavaScript

// No JavaScript Required