1

STYLE GUIDEsis redesign

Britta Moberg

STRUCTURE

2

header header

footerfooter

main content

main content

main content

main contentsidebar

sidebar

navnav

Header : masthead, RIT logo, NavigationFooter : links Page content : Information, media

GRID SPACING12 column 960 grid

3

Items are left aligned with the outermost grid lines

Items extend to line up withthe outermost grid lineson the right as well

When it suits the design, itemsline up with grid lines

When design is more visually appealing this way, items do not line up with grid lines

1 2

3

4

1

2

3

4

TYPOGRAPHY

4

Used: calendar header, calendar days/times,-calendar class descriptions, class search infor-mation, saved courses descriptions, advisor information, upcoming date descriptions, grades courses, footer, tand navigation

Used: calendar class descriptions, side bar descriptions, grades courses, dates descriptions, calendar times

Used: calendar days, major title, saved courses names and numbers, nav items, advisor names

Used: calendar class names, BFA label, advisor names, grades term

Used: everything elsein opacities

Used: calendar daysand times

Cooper Hewitt Light 10 pt.

14 pt.

Used: all section headers22 pt.

Used: calendar month24 pt.

Used: welcome28 pt.

Used: all section headers, welcome, numbers in side bar, calendar toggle, advisor names, dates, grade letters

Cooper Hewitt Medium

Cooper Hewitt Semibold

Used: Nav bar

BUTTON EXAMPLES

5

Button NormalLato light 11pt.

Button HoverLato light 11pt.

Button ActiveLato light 11pt.

COLORS

6

ORANGE#f38940

NEON BLUE#69c8f0

LIGHT GRAY#f0f0f0

DARK GRAY#595959

RED#df3817