Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 Logo, MIT

The MIT logo should appear in the footer area of the web application, and it should be hyperlinked to web.mit.edu.

Hyperlinks should always be underlined. Links within body copy appear the same size as the copy. For specific usages, see the Pattern Library.

...

The top or header of every page should include a 90 px tall space with a background color that may be customized. 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

...

  1. the MIT logo in white 
  2. the standard copyright in Light Orange, Source Sans 13 pt
  3. 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 Image Removedpt 

Image Added

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.

...

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.Image Removed