This page's background color:

Cream      Light Gray      White      Purple

View CSS files:

common.css (general recommended framework)
kenyon.css (Kenyon-specific graphic standards)

Basic type styles:

Heading 1

Used for the words "Kenyon College" only. Standard Web browsers will see the Kenyon logo instead of this <h1>.

Heading 2

Used only once per page, for the page title.

Heading 3

Used for major section subdivisions. Often used in gray.

Heading 4

Usage TBA.

Heading 5

Used for minor section subdivisions. Often used in red.

Heading 6

Same size as body type. Usage TBA.

Small sans-serif font available when needed.

Fine print, for uses such as legal disclaimers or footnotes.

Type colors:

Purple {color:#59118E;}
Blue {color:#005A8B;}
Brown {color:#6C4D23;}
Gold {color:#907C4B;}
Gray {color:#666;}
Green {color:#5B8F22;}
Orange {color:#C75B12;}
Red {color: #c33;}
Yellow {color: #EBB700;}

View palette demo

Note: All colors will be adjusted and re-specified for use over a dark background, if called for by the finished design.

Other style elements:

Inline header. A style for very brief, stylish introductions to important paragraphs.

Pull quote
Used to draw attention where needed in a long block of text.

White Whale Web Services

Kenyon College

General styleguide

This page presents the basic type and display styles we are proposing for use on the Kenyon College Web site.

Goals of the styleguide

Consistency

Standards exist to bring unity of expression to the many pages of a Web site, each with its own audience, agenda and author. A centrally located set of CSS files make this easy; any department, office or other site wishing to develop consistency with Kenyon's graphic standards needs only to link to one or more CSS files.

Primary areas of consistency include the following:

Fonts. Web fonts require multiple specifications, as not all browsers have all fonts installed. We're recommending the following set of basic fonts:

• Goudy Old Style, Garamond, Georgia or default serif font (non-bolded) for large headlines
• Arial, Helvetica, or default sans-serif (bolded) for small headlines
• Georgia or default serif font for body text
• Arial, Helvetica, or default sans-serif (expanded for readability) for fine print

Links will be underlined and set in a blue to match the overall palette. Mouseover behavior of links will be determined later in the design process. We are currently working with a base font size of 14px.

Note: When smaller text is needed, a sans-serif font will be used.

An even smaller sans-serif, with extended letter spacing for readability, can be used for fine print, labels on form fields, etc.

Colors. A basic color palette will drive the Kenyon site. If a green is used, it should be a single, consistent green (as proposed here: #5B8F22). The Kenyon CSS files will have clearly labeled values for both foreground and background colors. (Some different background colors for this page can be tested at top right.)

The text colors we have defined to date are Purple, Blue, Brown, Gray, Green, Orange, Red, and Yellow (which, though interesting, will be used sparingly if at all). We are also looking at Dark Red and an Dark Blue.

Your results may vary: Web color is a famously unstable area of human endeavor, involving a perfect storm of monitor calibrations, Web browsers, and computing platforms, and there's no guarantee you'll see the same colors here as anyone else. We have looked at this palette on a fairly wide range of setups. This palette demo page will let you look at all these colors in your individual monitor environment.

Basic page layout. Our plan is to create a basic Kenyon.edu frame that will be consistent across every page of the site. There will be only one usage for the Kenyon College word mark. Basic navigation elements (top level IA, search box, and footer if required) will be consistent across all pages. While we hope to create a much more diverse and interesting site design, it's imperative that each page of the site create a first impression of unity and cohesion.

Flexibility

Our goal in this process is to provide a flexible set of standards that will work across a diverse, creatively distinct set of Kenyon Web sites. The current site suffers from excessive attention to consistency, and as a result— to oversimplify a bit— all the pages look the same.

In the new Kenyon.edu design we'll define elements that are negotiable and ones that aren't. We think that elements that can differ on a site-to-site basis include the following:

• Accent colors. The basic color palette of the site will remain fixed across most if not all site pages. If a light background color is used (such as the one featured here), that will be a global value. But individual offices and departments should be free to make a selection of secondary colors that meet their needs (or simply suit their tastes). All individual color selections should remain consistent across the sites on which they're used.
• Photography. Individual site managers ought to be able to supply their own photography for their sites, if they've got enough stylish and high-quality photos. Otherwise, they ought to be able to choose from a set of photographs maintained by Public Affairs, or contract independently to have photos taken to order. At any rate, any stakeholder that has good photography and wants to use it should be able to.

Kenyonicity

Some style decisions involve our own judgements about what constitutes best practice on the Web. The common.css stylesheet represents, more or less, a standard approach that we bring to most projects we work on. Beyond the basics, we are actively looking for ways to reflect Kenyon's unique nature in the stylesheet in addition to basic typeface and color choices. Here are a few ways we're seeking to implement a degree of Kenyonicity in CSS:

• Following the standards of Kenyon's print work. We've frequently expressed our admiration for Kenyon's print materials, and the stylesheet you're seeing on this page is intentionally modeled on the standards set in Kenyon's print brochures (in particular, the "down to business" sections that follow full-bleed photo essays in documents like the Visiting and Diversity pieces).
• Taking more cues than usual from print page layout. Because Kenyon's legacy is so closely tied to the written word, we're actively interested in incorporating literary elements into our CSS. Pull quotes and sans-serif paragraph headers (seen in these bullet points) are examples of this approach; we hope to find more ways of drawing out this analogy during the design process.
• Classic font and color choices. We're hoping that our design will create a striking and modern first impression. But we're displaying restraint in our font choices, emphasizing the classic over the flashy to suit Kenyon's culture of deliberation and colloquy. (These classic font choices will, we think, contrast well with an edgy, innovative site design.)

Other graphic elements

Images

By default, images don't have borders (even when linked). With only the tiniest of potential exceptions, drop shadows should not be used for photographs.

The photos used on the site should be color-corrected; basic instructions for color-correcting a photo (using Photoshop or free tools for the Mac and PC) should be made available to the community of Kenyon.edu content managers.

More specifications for photo usage will be produced as part of the site design process.

Tables (for data)