Style Guide

To establish the Archive’s identity and to keep a consistent look and feel across the site, we have a specific set of styles we use. These are closely tied to the styles of our parent organization and our sister projects, so do not deviate from the styles in this document without approval from the AD&T Committee Front End Leads or Chairs.

Table of contents

General

There are some guidelines we follow regardless of media.

Copy

When writing copy for the Archive, use American spelling and a single space between sentences.

Archive logo

The red used in our logo is #990000, which can be shorthanded as #900. Do not change the color. If there is insufficient contrast between the logo and the background, a border may be added.

The logo has an aspect ratio of 117:80. Do not change the aspect ratio.

Fonts

When the Archive name accompanies the logo or is used as a masthead, it should be written in Georgia.

Colors

We use five basic colors in all our materials
Color HEX C M Y K R G B
Red   #990000 26 100 100 28 187 0 17  
White   #ffffff 0 0 0 0 255 255 255  
Black   #000000 0 0 0 100 0 0 0  
Light gray   #dddddd web only 221 221 221  
Dark gray   #333333 web only 51 51 51  

Screen

Our email styles also follow these screen styles.

Fonts

Headings
400 weight, Georgia, serif
  • The serif font stack should be used in the structural elements h1, h2, h3, h4, h5, h6 or in elements with the class heading.
  • Georgia is a core web font; this means that everyone has it installed on their computer.
  • If Georgia is not available, we fall back to the user's default serif font.
Body text
Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, sans-serif, GNU Unifont
  • This sans-serif font stack should be used in the main body of the text, on navigation actions, and on almost anything that isn't a heading.
  • Lucida Grande is an Apple system font that all Mac users have; Lucida Sans Unicode is the Windows equivalent.
  • Verdana is a core web font that nearly everyone has.
  • GNU Unifont is utilitarian system font that has a glyph for every codepoint in Unicode. It serves as a last resort when the requested glyph is not available in any other font..
Dates, pre-formatted text, and code
Monaco, Consolas, Courier, monospace
  • We use monospace fonts for kbd, tt, code, var, pre and many instances of dates and times, which typically have the class datetime.
  • Monaco is an Apple system font that all Mac users have. Consolas is the Windows equivalent.
  • Courier is a core web font that nearly everyone has.

Colors

We use these colors on the screen
Color Use HEX R G B
Red   Logo, masthead, blurb titles, tag hover #990000 187 0 17  
White   Page background #ffffff 255 255 255  
Dark gray   Text #2a2a2a 42 42 42  
Darkest gray   Links #111111 17 17 17  
Light gray   Visited links #666666 102 102 102  
Medium gray   Link hover #999999 153 153 153  

Variations

We use a range of grays to color boxes, mark borders, and create shadows.

  • #eee
  • #ddd
  • #ccc
  • #bbb
  • #aaa
  • #999
  • #777
  • #666
  • #555
  • #444
  • #333

The header, footer, and tag clouds use a few more reds.

  • #a00
  • #800
  • #700
  • #600
  • #500
  • #400
  • #300
  • #200

States

Some states have their own colors.

  • #008000 green: replied, offered
  • #876714 gold: offered and requested
  • #900 red: requested, rejected

System and error messages

System and error messages are color-coded and use their own separate color scheme.

System and flash messages use these colors:

  • blue: success, messages, additional information. The background is #d1e1ef with a border of #c2d2df. It uses the main text color.
  • red: error, go back and fix this problem. The background is #efd1d1 with a border and text color of #900.
  • yellow: warning, click to proceed, correct this error before you proceed. The background is #ffe34e with a border color of #d89e36 and #000 text.

LiveValidation messages on forms use these colors:

  • red: error

Print

Our print styles are defined in 27-role-print.css.

Fonts

Rather than using a specific font, all print text uses the serif font family. This tells the system to use its default serif font.

Colors

We use two colors in our print styles
Color HEX C M Y K R G B
White   #ffffff 0 0 0 0 255 255 255  
Black   #000000 0 0 0 100 0 0 0