...
The following style guide includes a set of rules which dictate the look and feel of all MIT BI applications. A consistent look and feel is necessary for building brand trust and achieving efficiency when working across business intelligence applications in the MIT web application family. The design styles are based on the RAFT (Reporting & Forecasting Tool) web application; the following are standards governing the layout, appearance, and behavior of that site.
1.1 Capitalization
Page names, content headings, column headers, and navigation and tab labels all appear in title case -- the first letter of each major word is capitalized (not the, a, for, by and other conjunctions and prepositions). For form field labels, only capitalize the first word of the label (see below for more).
1.2 Colors
The color contrast between backgrounds and text should be 67% or greater when converted to gray scale. To meet accessibility guidelines for color blindness, the following colors were selected for their strong contrast against one another when paired appropriately. Nowhere is color used as a sole indicator of status or state. It is always paired with a symbol and/or text. The color palette is extensive due to a foreseeable need for charts and graphs in the system. Several of the colors mentioned below are not used not used in RAFT v 3.1, but will be used in future releases.
...
The color contrast between backgrounds and text should be 67% or greater when converted to gray scale. The pairings below meet that criterion.
...
1.2.1 Colors in charts and graphs
When using colors in charts and graphs, use them in the following order in which they appear above to ensure contrast when they are adjacent to one another.
...
Note that F3E7B3 may be too light for use on graphs, but could be
...
part of a pie chart
...
.
1.3 Field labels
Field labels should appear above form fields . The first word is capitalized. Any additional words in the label should be lowercase (e.g., First name is correct; First Name: is incorrector to the left of them, depending on space. Field Labels should use Title Case (every major word is capitalized). Do NOT place a colon at the end of the label. Additional capitalization and punctuation negatively affects readability.
...
Source Sans is a free Open Source Google font, and is a close visual match to Din, MIT's brand font. Because we wanted to be able to make the system of applications Open Source products, we chose Source Sans instead of Din, which is a licensed font.
Use Source Sans everywhere within the content, headers, interior content, and containers.
Use Source Code Pro for numeric tables.
...
The logo is typographic using Source Sans in all caps, semi bold. The abbreviated name of the application is White, 24 pt. 22.5 pt (30 px or 1.9em) The long form of the application name is in Dark Orange, 24 pt10.5 pt (14px or.9em).
1.6 Logo, MIT
The MIT logo should appear in the footer area of the web application, and it should be hyperlinked to web.mit.edu.
1.7 Hyperlinks
Hyperlinks should always be underlined. Links within body copy appear the same size as the copy. For specific usages, see the Pattern Library.
1.8 Icons
The icon system was hand drawn for RAFT, therefore the symbols depicted may or may not be relevant to other DM-BI applications. The icons are selected using CSS and an icon sprite in which the icons are place within 20 x 20 squares.
...
Contact Mike Berger (mberger@mit.edu) if design support is needed for new icons.
1.9 Numbers
Numbers, when used in tables, should use Source Code Pro rather than Source Sans, for readability. Numbers should be right aligned within table columns.
...
As noted above, the minimum size for all text is 13 pt.
2.3 Page Header, persistent
The top or header of every page should include a 90 px tall space with a background color that may be customized with alternate colors from the color library. RAFT uses the Maroon background color (#5A1D17) that holds the branding and key persistent features. The header includes the typographic logo in Source Sans in all caps, semi bold in 24 px. It also includes the global navigation links, a search box, advanced search link, a text welcome and log in/out links, and other global tasks.
2.4 Page Footer, persistent
The footer appears at the bottom of every page of the application. It is a 90 50 px high block using background color Maroon that includes
- the MIT logo in white
- the standard copyright in Light Orange, Source Sans 13 pt
- two hyperlinks to pages About this Application and Help; these hyperlinks take users to new pages with this information; hyperlinks are underlined Light Orange, Source Sans 13 pt
2.5 Forms
Forms should be designed in accordance with the standards above. All fields should include field labels. Labels appear above their fields left aligned with the beginning of the field (except in cases of very long forms i.e., more than 1 full page of scrolling; in this case, labels can appear to the left, aligned left). Buttons should appear at the bottoms of the forms, left aligned with the form fields (not the field labels).
2.5.1 Form fields
The term form fields is used generically to describe any HTML object that allows users to input information and receive a response from the site. This includes select boxes (also known as drop-downs) used for filtering views within a page. Each form object should conform to its intended purpose.
- text fields are for free text entry; they should be sized according to the suggested or allowable character limit; they should not be sized uniformly unless the character limits are uniform
- select boxes are for a single select from a list of items (5-15)
- radio buttons are for a single select from 2-4 items; do not select a default option in a radio button group unless the default option is selected 80% (or more) of the time.
- checkboxes are for multi-select items; try to limit your multi-select options to no more than 10 (2 columns of 5 options).
We use two other types of form fields for allowing users to multi-select from lists of 11 or more items.
On forms that include a single multi-selection option, we use an add/remove panel that allows users to select items from the left and add/remove them from the selected items on the right.
On forms that include multiple multi-select options or in cases where multi-select lists include over 20 options, we use a type-ahead box that allows users to select an item and then remove it if they have selected an item incorrectly.