5 Merchandising Style Guide

This section outlines the styles used in developing the Merchandising solution user interfaces. It is included here so that you can use the information for any custom reports or bolt-on applications to give them a similar look and feel, providing a more seamless experience for your users.

Fonts

The primary typeface that is used for the UI is Arial, with Helvetica used for some of the headings.

Colors

These are the colors used in the UIs. Which colors apply for which components is described below.

Global Screen Structure

All the screens in Merchandising have a similar layout, with these main key areas:

1. Global Navigation Bar

2. Application Tabs

3. Navigational Area

4. Local Area

5. Contextual Area

Global Navigation Bar

The global navigation bar shows the name of the solution and also contains the user menu and a global help icon. The makeup of this bar is as follows:

Components	Font	Background Color	Size
Top Border		Red	Height: 2 pixels
Main Section	Application title: Headline 1	Light Gray	Height: 42 pixels
Bottom Border		Medium Gray	Height: 1 pixel

Application Menu Bar

Components	Font	Background Color	Size
Menu Button section	N/A	Light Gray	Width: 40 pixels
Fly-out Menu	Body Text	Light Gray	Width: 250 pixels

Application Tabs

Components	Font	Background Color	Size
Active tab	Standard Link State, Bold	White Border: Blue	Height: 30 pixels (border 3 pixels) Width: minimum 80 pixels
Inactive tab	Standard Link State	White	Height: 30 pixels (no border) Width: minimum 80 pixels