Rapport Theme Style Guide

Purpose

This guide describes the visual styles used in the Rapport theme and provides examples of the different interface elements used.

Design Considerations

The Rapport theme was designed to be viewed within a content window provided by a surrounding LMS. With this in mind, the color palette is very neutral as not to conflict with the styles of the LMS. The theme should be designed to fit a viewport that is 960 pixels wide. However, the theme should also adapt to various window sizes. For example, the theme may be viewed within a small iframe or opened in a full screen browser window.

Color Palette

Icons

Text

Encoding

Text should be encoded as UTF-8.

Fonts

The default font for the Rapport theme is Arial. If the browser does not support Arial, then Helvetica should be used. If the browser does not support Helvetica, then the browser should pick a generic sans-serif font.

Headings

H1 headings should use the Ciscolight Regular web font, use a font size of 22 pixels, use a normal font weight, and use the color of #911F94.

H2 headings should use the Arial font, use a font size of 16 pixels, use a bold font weight, and use the color of #A4279A.

H3 headings should use the Arial font, use a font size of 12 pixels, use a bold font weight, and use the color of #A4279A.

Paragraphs

Paragraphs should use the Arial font, use a font size of 12 pixels, and use the color of #707070.

Links

Links should use the color of #1AAAE2 and should not be underlined until hovered over.

Horizontal Rules

Horizontal rules should be 5 pixels high and have a linear gradient from left to right using the colors #611880 and #A12196 respectively.

User Interface Elements

Buttons

Data Tables

Whenever possible, a data table should be sortable by column.

If the table has more than 10 rows of data, then the data should be paginated and searchable. By default all rows should be displayed.

Date Pickers

Notices

Tabs