A fixed notification regarding a successful event should appear here.

Outsell Outsell Style Guide for Applications

Design Principles

Help the User Focus

The design should help the user focus on the task and supporting information. Application "chrome" should be subtle. Application screen visual hierarchy should reflect the task hierarchy: the primary task and supporting tasks should be clear.

  • The data is the focus. Information and status indication takes precedence.
  • Use color sparingly and to add meaning or encode information on a perceptual level.
  • Use whitespace generously to help create a clear design. The goal isn't to fill space.
  • Establish a visual language that is meaningful and consistent.

Minimalist Design

The design of applications should be just enough to support the user's goals and the supporting task(s). There should be a rationale for every element on the screen. If there's not a reason for an element, or if it doesn't support the user's primary task, get rid of it!

Transparent Design

The best application UI design is the one the user doesn't notice. The flow of the application should feel natural to the user, exposing features and supporting information at the right time. The design should not interrupt the user and should help them feel "in the flow" of their task. The user should always have a clear understanding where they are, where they've been, and where they can go in the application. We should hear from users:

  • "It just works."
  • "It thinks the way I do."

Context Over Consistency

If a particular design element "works better" (i.e., it's clear to the users and allows them to perform their task efficiently, without errors) in the UI than a more common or typical element, even one that exists elsewhere in the same application, then the former element should be retained, because it works better given the context.

Design Quotes

Good design is as little design as possible. Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity. - Dieter Rams
Simplicity is not the goal. It is the by-product of a good idea and modest expectations. - Paul Rand
Design is not what it looks like and feels like. Design is how it works. - Steve Jobs
A style is the consequence of recurrent habits, restraints, or rules invented or inherited, written or overheard, intuitive or preconceived. - Paul Rand
That’s been one of my mantras — focus and simplicity. Simple can be harder than complex. - Steve Jobs

Color Palette

The Outsell color palette appears below. The theme used as a default by the style guide is based upon these colors.

Primary Colors

  • Process Blue
  • C 100 M 0 Y 0 K 0
  • R 0 B 174 G 239
  • HEX 00AEEF
  • Dark Grey
  • C 0 M 0 Y 0 K 70
  • R 109 B 109 G 109
  • HEX 6D6D6D
  • Light Grey
  • C 0 M 0 Y 0 K 30
  • R 190 B 190 G 190

Secondary Colors

  • PMS 7409
  • C 0 M 30 Y 100 K 0
  • R 255 B 192 G 0
  • HEX FFC000
  • PMS 1585
  • C 0 M 75 Y 100 K 0
  • R 242 B 101 G 34
  • HEX F26522
  • PMS 300
  • C 100 M 44 Y 0 K 0
  • R 0 B 121 G 193
  • HEX 0B78B8


For headings, content, button labels, and other elements, Outsell uses Lato, available from Google Fonts. Size and color may vary based upon the theme used.


Element Attributes Where Used

h1. Heading 1

Lato (Normal, 400), 24px, HEX 303030, R 48 G 48 B 48 Appears immediately below the header and serves to identify the application/module currently being used.

h2. Heading 2

Lato (Normal, 400), 20px, HEX 303030, R 48 G 48 B 48 Appears at the top left of, and serves to identify, discrete functional areas within a page.

h3. Heading 3

Lato (Normal, 400), 18px HEX 303030, R 48 G 48 B 48 Used for form subsections and large, wide form elements.


Lato (Normal, 400), 13px, HEX 000000, R 0 G 0 B 0. Used for instructions, messaging, table cells, and other application content.

This is a paragraph. Aliquam et euismod nulla. Donec non sem enim, aliquam aliquam lacus. Sed sed velit ut nibh varius hendrerit eu at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nec dui eu justo vestibulum ultrices vitae ut justo. Praesent pharetra venenatis urna. Suspendisse a sem ut nulla euismod faucibus. Donec facilisis volutpat posuere. Integer id lectus vitae sem aliquet sodales. Suspendisse iaculis turpis non ante cursus at tincidunt massa lacinia. Mauris ultricies eros id nisl tempus ut iaculis purus ultricies. Sed tempor turpis vitae ipsum viverra ullamcorper.


Icon Guidelines

Outsell Basics Web Font

To help establish a distinct and recognizable visual identity, a set of icons has been created to represent application functions and features. This set of icons is available in the Outsell Basics Web Font, glyphs described below.

Download the Outsell Basics Web Font (Last updated April 26, 2014)

Icon Class Meaning
icon-OutsellLogo Reserved. The Outsell logo.
icon-Dashboard Reserved. Used to represent the Outsell Dashboard.
icon-Build Reserved. Used on represent the Build application.
icon-METL Reserved. Used on represent the METL application.
icon-Template Reserved. Used on represent the Manage Templates application.
icon-Administration Reserved. Used on represent the Administration application.
icon-Draggable1 Placed to the left of an element, or within an element, to afford draggability.
icon-Draggable2 Alternative. Placed to the left of an element, or within an element, to afford draggability.
icon-TemplateActive Used to indicate the currently active state of a template or document.
icon-TemplateNotActive Used to indicate the currently inactive state of a template or document.
icon-TemplateView Used to indicate the means to view a template or document.
icon-TemplateEdit Used to indicate the means to edit a template or document.
icon-AlertWarning Used in alert dialogs and primary screens to indicate that the user is changing or deleting important information.
icon-Reporting Used for reporting applications.
icon-LogoO Reserved. Used in conjunction with the Outsell logo.
icon-LogoU Reserved. Used in conjunction with the Outsell logo.
icon-LogoT Reserved. Used in conjunction with the Outsell logo.
icon-LogoS Reserved. Used in conjunction with the Outsell logo.
icon-LogoE Reserved. Used in conjunction with the Outsell logo.
icon-LogoL Reserved. Used in conjunction with the Outsell logo.

The Outsell logo and text glyphs exist in the Outsell Basics Web Font, detailed above. Styles have been provided for medium and small variants of the logo.



Buttons & Links

Element Class Where Used
btn-primary Used to represent the primary action on the form, screen, or dialog.
btn-default Used to represent the secondary action on the form, screen, or dialog.
btn-secondary-dialog Typically used in modal dialog boxes to represent the secondary action. Should be placed to the right of the primary action button.
btn-primary btn-sm Used for primary, or important, actions and when space is limited.
btn-default btn-sm Used for secondary actions and when space is limited.

This is a Link

None required. Used for secondary actions and links within content.



Current table sort is indicated by the presence of a sort indicator in the appropriate column. The sort indicator should show whether the column is sorted in ascending or descending order. It is not necessary to place sort indicators in all sortable columns.


Searching should work across the entire dataset and not simply within the table results currently displayed. The Clear button should remove the string from the search field and reset the table so all results are displayed with paging (if used) set to the first page.



Warning Dialog

Coding Note Although it will render in View Source as an ×, use × for the close icon.

Use when a potentially damaging action (e.g. deleting, deactivating, changing data relationships) is being taken so that user must confirm the action before proceeding.

Information/Success Inline Message

Use when a non-critical message needs to be shown to the user or when an update has been successfully applied to an element on the screen. These alerts are displayed in line with other screen content and are removed from the DOM when closed.

Information/Success Floating Message

Use when a non-critical message needs to be shown to the user or when an update has been successfully applied to an element on the screen. This variant is positioned below the secondary navigation, floats over screen content, and will not cause content to reflow.

Retaining Alerts in the DOM

An inline message regarding a successful event should appear here.

For instances when the alert needs to be retained in the DOM after being closed. Use the attribute and value data-hide="alert" in place of data-dismiss="alert".

Paging Control

Typically, tables should contain no more then 15 rows per page (exact number depends on height of rows, type of table content, and other factors). When this number is exceeded, the paging control allows the user to display a subset of results per page.

The paging control consists of a maximum of 15 elements (see examples above): A previous link, a next link, and links to individual pages. The ellipsis character ("…") fills the gap between the visible pages and the first and last pages, depending on the current page number.

Element Attributes Notes
Previous/Next Links When enabled, uses the standard link style. When the first or last page of results is shown, the previous/next link is shown in disabled state.
Page button The page currently displayed has a distinct visual appearance from other available pages, and is not responsive should the user hover or click the element. Clickable element to go to the desired page of results.
Ellipsis Not linked, uses disabled style. Used to indicate the presence of pages "in-between" the current set of page links.

Progress Indicator

Used to indicate the progress, as a percentage, of a system process or user task. It should be dynamic: the length of the progress indicator increases as the item nears completion. The length of the progress bar should be a true representation of progress so the user can have a rough idea of when it will complete (this is especially critical when the user can't interact with the application until the item is completed).

Step Indicator

Used to indicate all the steps, current and otherwise, in a workflow or wizard-type flow. The current step is given an active appearance and all other steps are given a disabled appearance. This is a non-interactive element.


Used to separate distinct functionality and information on a screen.

Coding Note Although it will render in View Source as an ×, use × for the close icon.

Interaction Note Dialogs can be closed by clicking the close icon, the primary action button, or the cancel button. Interaction with the glass panel or primary window will not close the dialog.

Element Attributes Notes
Dialog container Top border is shown using a contrasting color to the background color. Includes all standard items and application content.
Glass panel Fills primary screen with a semi-transparent background. Appears between the primary application screen and the dialog. Should prevent the user from interacting with items on the primary screen.
Close icon Use standard Bootstrap icon (×). Closes the dialog. Dialog can also be closed using the esc key.
Modal dialog title Standard h2 appearance is used The dialog title should match the title of the button or link the user clicked to invoke the dialog.
Primary action button Use the button class btn-primary Commits whatever changes have been made in the dialog and closes it. If the dialog in informational, this should be the only button. The label should be "OK".
Cancel button Use the button class btn-secondary-dialog Closes the dialog returns the user to the primary screen.

Primary Screen Layout

Element Notes
Content container Includes branding, navigation, application title, the application content itself, and the footer.
Logo The Outsell logo and text. Refer to the Outsell Logo section above.
Language preference & identity Displays an iconic flag for the user's language preference, language name, username (linked to user preferences), a link to sign out, and the user's avatar.
Primary navigation Contains icons and links to primary applications and application groups.
Secondary navigation Contains links to application-specific functional areas.
Application logo & title Helps establish a visual identity for the application. A distinct icon should be used to represent the application.
Footer Contains brand and copyright information, as well as secondary links to Outsell applications and resources (exact content TBD).
Table of Contents