...
Page names, content headings, column headers, and navigation and tab labels all appear in title case -- the first letter of each word is capitalized. 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 in RAFT v 3.1, but will be used in future releases.
...
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 incorrect). Do NOT place a colon at the end of the label. Additional capitalization and punctuation negatively affects readability.
1.4 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.
...
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.
...
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 page content.
2.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).
...
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.
...
2.
...
2 Text
As noted above, the minimum size for all text is 13 pt.
2.3 Page Header
The top or header of every page should include a 90 px tall space with 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
The footer appears at the bottom of every page of the application. It is a 90 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