MITBI Style Guide
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.
1.1 Screen size
The target screen size for readability is 1024x786. This allows users to read without straining themselves on any desktop or laptop monitor and tablets held in the horizontal orientation (landscape layout).
The RAFT application (v 3.1) was designed for a 1280 desktop screen resolution, due to the nature of the data displayed by the system. Wide tables needed to be accommodated with the understanding that most end-users would be working at their desks with large monitors. The application is usable at a 1024 x 768 screen resolution, although best viewed at higher resolutions. Some horizontal scrolling may be required to view data on wide tables at lower resolutions.
If your web application also includes wide data tables and you are certain your target users have large monitors (larger than 17 inches) with resolutions at or above 1280, you can design for this wider breakpoint.
1.2 Capitalization
Page names, content headings, column headers, and navigation and tab labels all appear in title case -- the first letter of each word is capitalized.
1.3 Fonts
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 minimum font size is 13 pt throughout the application. All fonts use the normal weight with the exception of the logo, tabs, and table headers which use semi bold.
1.4 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 in RAFT v 3.1, but will be used in future releases.
- 90% Black, 272727
- Maroon, 5A1D17
- Dark Green, 615A36
- Yellow, F3E7B3
- Sand, BEAE66
- Cream, FCF9EC
- Dark Orange, BB6E24
- Light Orange, EEB162
- Alert Red, A23026
- Sky Blue, 91AEBC
- Light Purple, 7C71A3
- Dark Purple, 50417E
- White, FFFFFF
1.4.1 Colors in charts and graphs
When using colors in charts and graphs, use them in the following order to ensure contrast when they are adjacent to one another.
- 5A1D17
- 615A36
- 272727
- F3E7B3 (very light but could be used as a background or part of a pie chart)
- BEAE66
- BB6E2A
- EEB162
- 91AEBC
- A23026
- 7C71A3
- 50417E
1.5 Logo
The logo is typographic using Source Sans in all caps, semi bold. The abbreviated name of the application is White, 24 pt. The long form of the application name is in Dark Orange, 24 pt.
1.6 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.
If more icons are required, they can be added at any time by updating the sprite and CSS.
Contact Mike Berger (mberger@mit.edu) if design support is needed for new icons.
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 Field labels
Field labels should appear above form fields
1.9 Text
As noted above, the minimum size for all text is 13 pt.
1.10 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.
1.11 Page Layout
Page layout is based on a 4 column grid system. The far left and far right columns are reserved for global and local navigation respectively. The middle two columns are used for copy and transactional page features.