Graphic Guidelines

This section includes suggested colors and borders for various graphic elements.

Windows Background

Fill Colors

Window Background Color: #ebebeb (also use for scroll and slider background)

Header & Footer Area: #222f37

Primary (Next) Button

Borders

Regular: border-color:rgb(58,146,203); border-width:1px; border-style:solid;

Hover: border-color:rgb(58,146,203); border-width:1px; border-style:solid;

Press & Focus: border-color:rgb(58,146,203); border-width:1px; border-style:solid;

Disabled: border-color:rgb(223,223,223); border-width:1px; border-style:solid;

Fill Colors

Regular: Gradient (50% 0% -90deg,rgb(86,160,211) 0%,rgb(69,152,207) 100%)

Hover: Gradient (rgb(108,173,217) 0%,rgb(109,174,218) 100%)

Press & Focus: Gradient (rgb(50,134,190) 0%,rgb(43,115,164) 100%)

Secondary (Back) Button

Borders

Regular: border-color:rgb(180,180,180); border-width:1px; border-style:solid

Hover: border-color:rgb(160,190,205); border-width:1px; border-radius:1px; border-style:solid

Press & Focus: border-color:rgb(192,192,192); border-width:1px; border-style:solid

Disabled: border-color:rgb(223,223,223); border-width:1px; border-style:solid

Fill Colors

Regular: Gradient (50% 0% -90deg,rgb(255,255,255) 0%,rgb(240,240,240) 100%)

Hover: rgb(209,223,230)

Press & Focus: Gradient (50% 0% -90deg,rgb(245,245,245) 0%,rgb(225,225,225) 100%)

Disable: rgb(246,246,246);

Title Fonts

Fonts

Title for Regular View: "Open Sans";font-size:20px;font-stretch:condensed;line-height:120%;font-weight:bold;color:rgb(255,255,255);text-align:left;

Title for Minimized View: "Open Sans";font-size:16px;font-stretch:condensed;line-height:120%;font-weight:bold;color:rgb(255,255,255);text-align:left;

Top Information Area

Labels

font-family: Arial, Helvetica, sans-serif;font-size:12px; //0.75em//line-height:22px;color:rgb(33,46,55);text-align:left;

Values

font-family: Arial, Helvetica, sans-serif;font-size:12px; //0.75em//line-height:22px;color:rgb(0,0,0);text-align:left;

Panel Area

Colors & Borders

Panel Background: #FFFFFF 

Panel Border: 1px width #C0C0C0

Top Border: Add 2px tall line #A8C20E

Fonts

Panel Title: font-family:Arial, Helvetica, sans-serif; font-size:12px; //0.75em// line-height:22px;color:rgb(96,112,1);text-align:left;

Inside Text: font-family:Arial, Helvetica, sans-serif;font-size:12px; //0.75em//line-height:22px;color:rgb(33,46,55);text-align:left;

Additional Information & Controls Area

Labels

font-family: Arial, Helvetica, sans-serif;font-size:12px; //0.75em//line-height:22px;color:rgb(33,46,55);text-align:left;

Values

font-family: Arial, Helvetica, sans-serif;font-size:12px; //0.75em//line-height:22px;color:rgb(0,0,0);text-align:left;

Links

font-family: Arial, Helvetica, sans-serif; font-size:12px; //0.75em// line-height:30px; color:rgb(0,113,190); text-align:left;