You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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. 

Screen size
The RAFT application (v 3.1) was designed for a 1280 deskt

op 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.
Future versions of the application may support tablet or other handheld devices, however the business case for a mobile RAFT application is yet to be determined.
Browsers
Eugene?
Fonts
The font selection was based on DCin, which is MIT’s brand font. We replaced Din with Source Sans, a monospace OpenType font designed to work on screen. Source Sans is a free Open Source Google font, and is a close visual match to Din. Because we wanted to be able to make the application an Open Source product, we chose Source Sans instead of Din, which is a licensed font. 
Source Sans is used everywhere within the content, headers, interior content, and containers.
The numeric tables use Source Code Pro.
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. 
Colors
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
How they are used on charts, in what order (need from Heather)
To meet accessibility guidelines for color blindness, the 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.
Logo
The logo is typographic using Source Sans in all caps, semi bold. The abbreviated name of the application is White, xx pt. The long form of the application name is in Dark Orange, xx pt.
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 for details, in particular if design support is needed for new icons.

1.1 Screen size

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.

Future versions of the application may support tablet or other handheld devices, however the business case for a mobile RAFT application is yet to be determined.

1.2 Browsers

(placeholder)

1.3 Fonts

The font selection was based on DCin, which is MIT’s brand font. We replaced Din with Source Sans, a monospace OpenType font designed to work on screen. Source Sans is a free Open Source Google font, and is a close visual match to Din. Because we wanted to be able to make the application an Open Source product, we chose Source Sans instead of Din, which is a licensed font. 

Source Sans is used everywhere within the content, headers, interior content, and containers.

The numeric tables use Source Code Pro.

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 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

(How they are used on charts, in what order (need from Heather)

To meet accessibility guidelines for color blindness, the 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 logo is typographic using Source Sans in all caps, semi bold. The abbreviated name of the application is White, xx pt. The long form of the application name is in Dark Orange, xx 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 for details, in particular if design support is needed for new icons.

1.7 Hyperlinks

(placeholder)

1.8 Field labels

(placeholder)

1.9 Text

(placeholder)

1.10 Page Layout

(placeholder)

  • No labels