WEB STYLE GUIDE | The Sage Colleges

advertisement
WEB STYLE GUIDE | The Sage Colleges These styles are to be used when developing a page, site, or microsite for The Sage Colleges. All sites should have an easily accessible direct link back to The Sage Colleges’ homepage, www.sage.edu. If the material on the page, site, or microsite references information pertaining to multiple colleges or The Sage Colleges, the main Primary Color referenced below should be used. If the information pertains to one specific college only, that college’s color can be used. Text Font Family | Verdana, Geneva, sans-­‐serif Font Color | #555 ! Paragraph | 12px; 0.75em; 1.2em based on a 62.5% body size Main Header | 22px; 1.375em; 2.2em based on 62.5% body size Secondary Header | 20px; 1.25em; 2.0em based on 62.5% body size Colors Primary Color | #FDBB31 ! [used as a background color for block elements, navigation elements, or buttons] Secondary Color | #CCC ! Tertiary Color | #333 ! Link Color [used for textual links only; should not be used for buttons or background colors] [used as a background color for callouts or buttons where primary color can’t be used and also for division lines or horizontal rules] [used as a background color for faded overlays or footers] | #BA5915 ! College Specific Colors Russell Sage College | #007154 ! Sage College of Albany | #ED5B2F ! Sage Graduate Schools | #164166 ! Styles Link Text Decoration | None; Underline on hover Link icon | » (») icon to indicate follow for more used on right of link text Page Alignment | Center aligned content wrapper Page Size | Content wrapper : 960px fixed width Responsive design techniques should be used when developing new sites. The Sage Colleges | Web Style Guide Updated : June 16, 2014 Logos Used on any site that references multiple colleges. The Sage Colleges logo can also be used in reverse. If used with a transparent background, no competing background should be used. Use at 100% black or 100% white, no faded opacity versions. Used on any site that relates only to Russell Sage College. Logo can be used with or without “Women of Influence” tagline. Logo should be 100% black, 100% white, or used with Russell Sage College specific color. If tagline is included, it should be 100% black or 100% white. If used with a transparent background, no competing background should be used. No faded opacity versions.
Used on any site that relates only to Sage College of Albany. Logo can be used with or without “Design Your Future” tagline. Logo can be 100% black, 100% white, or used with Sage College of Albany specific color. If tagline is included, it should be 100% black or 100% white. If used with a transparent background, no competing background should be used. No faded opacity versions.
Used on any site that relates only to the Sage Graduate School of Management. Logo can be 100% black, 100% white, or used with the Sage Graduate Schools specific color. If used with a transparent background, no competing background should be used. No faded opacity versions.
Used on any site that relates only to the Sage Graduate School of Health Sciences. Logo can be 100% black, 100% white, or used with the Sage Graduate Schools specific color. If used with a transparent background, no competing background should be used. No faded opacity versions.
Used on any site that relates only to the Esteves School of Education. Logo can be 100% black, 100% white, or used with the Sage Graduate Schools specific color. A stacked version of the logo is also available. If used with a transparent background, no competing background should be used. No faded opacity versions.
The Sage Colleges | Web Style Guide Updated : June 16, 2014 Seal The Sage Colleges seal should be used on any site referencing any of The Sage Colleges. The seal should be used in the footer or header element only. It can also be used reversed and at 70% opacity, but only on Sage’s primary and tertiary colors. The seal can be used bleeding off edges of the element, but should show the text “The Sage Colleges,” and if it shows “Troy” it should also show “Albany.” Preferred use is straight on, however other versions can be used if approved by the Office of Communications. Buttons Buttons should be Sage’s primary color, any of the specific colleges’ colors, or Sage’s secondary color, with a slight fade to black. Text should be white. A one pixel solid gray border should also be used with a three-­‐pixel border radius. If a :hover{ } style is used, the background should change to #DDD faded to black, and text should be changed to #222. The Sage Colleges | Web Style Guide Updated : June 16, 2014 
Download