Skip to main content
Northwestern University

Body Components

Body Components

The body components of this guide are meant to provide several modular options that can be used interchangeably to meet different content needs. Titles and body copy can use our substitute brand fonts: Arial and/or Georgia, as shown below.

Find guidelines on using color, typography and photography by visiting the Visual Identity section of our brand tools site.

 

Main story with photograph

Titles can use our substitute brand fonts: Arial and/or Georgia, as shown below.

Main story with image example

 

  1. Photograph to stretch to the same width as header.
  2. Story title color: #4E2A84, font: Georgia Bold/Arial Bold
  3. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  4. CTA button color: #4E2A84, Font: Arial (all caps), Color: #FFFFFF

Main story without photograph 

Main story no image example

  1. Story title color: #4E2A84, font: Arial Bold/Georgia Bold
  2. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  3. CTA button color: #4E2A84, Font: Arial (all caps), Color: #FFFFFF

Section titles and story dividers

Section titles are enclosed with a single horizontal rule on top and a double horizontal rule on the bottom. Stories are divided by a single horizontal rule.

 

Section titles and dividers

  1. Single horizontal rule color: #CCCCCC
  2. Section title color: #4E2A84, Font: Arial (all caps)
  3. Double horizontal rule color: #CCCCCC
  4. Story divider horizontal rule color: #CCCCCC

Story formatting - No Image

Hyperlink the story title.

story-noimage-expample

  1. Story title color: #4E2A84, font: Arial Bold/Georgia Bold
  2. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  3. Story divider horizontal rule color: #CCCCCC

Story formatting - Left image

Hyperlink the story title and image.

story-left-image-expample

  1. Image
  2. Story title color: #4E2A84, font: Arial Bold/Georgia Bold
  3. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  4. Text CTA (optional) color: #4E2A84, Font: Arial (all caps)
  5. Story divider horizontal rule color: #CCCCCC

Story formatting - Top image

Hyperlink the story title, image and CTA (Call To Action).

 Story formatting - top image

 

  1. Image
  2. Story title color: #4E2A84, font: Arial Bold/Georgia Bold
  3. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  4. Button CTA background color: #4E2A84, Font: Arial (all caps) color: #FFFFFF

Tables

Tables should be designed to be as clean as possible: no background colors, and cells must have enough padding to make content display as legibly as possible.

Examples of tables in a story

  1. Table border 1px, Color: # #CBCBCB

 

Back to top