STYLE GUIDE sis redesign Britta Moberg
1
STRUCTURE header side bar
nav
header
main content side bar
nav main content
main content
main content
footer
footer
Header : masthead, RIT logo, Navigation Footer : links Page content : Information, media 2
GRID SPACING 12 column 960 grid
2
1 1 Items are left aligned with
the outermost grid lines
2 Items extend to line up with
the outermost grid lines on the right as well
3 When it suits the design, items
3
line up with grid lines
4 When design is more visually
appealing this way, items do not line up with grid lines
4
3
TYPOGRAPHY Cooper Hewitt Light
10 pt.
Used: calendar header, calendar days/times,calendar class descriptions, class search information, 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
Cooper Hewitt Medium
Used: calendar days, major title, saved courses names and numbers, nav items, advisor names
Used: all section headers, welcome, numbers in side bar, calendar toggle, advisor names, dates, grade letters
Cooper Hewitt Semibold Used: calendar class names, BFA label, advisor names, grades term
14 pt.
22 pt.
Used: all section headers 24 pt.
Used: calendar month 28 pt.
Used: welcome Used: calendar days and times
Used: Nav bar
Used: everything else in opacities
4
BUTTON EXAMPLES Button Normal Lato light 11pt.
Button Hover Lato light 11pt.
Button Active Lato light 11pt.
5
COLORS
ORANGE
LIGHT GRAY
NEON BLUE
RED
#f38940
#69c8f0
#f0f0f0
DARK GRAY #595959
#df3817
6