Front End Help

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 Design Lead, Front End Lead, or AD&T Committee Chair.

• General
  • Copy
  • Logo
  • Fonts
  • Colors
• Screen
  • Fonts
  • Colors
    • Variations
    • States
    • System and error messages
• Print
  • Fonts
  • Colors

General

There are some guidelines we follow regardless of media.

Copy

When writing copy for the Archive (e.g. help text), use American spelling, a single space between sentences, and a capital “A” when referring to the 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

Screen

Our e-mail styles also follow these screen styles.

Fonts

Headings, subheadings, titles, addresses

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, GNU Unifont, Verdana, Helvetica, sans-serif

• 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. GNU Unifont is system font on most free operating systems (e.g. Linux).
• Verdana is a core web font that nearly everyone has.

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

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

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 of #900.
• yellow: warning, click to proceed, correct this error before you proceed. #ffe34e with a border of #d89e36 and #000 text.

LiveValidation messages on forms use these colors:

• #0c0 green: success
• #c000 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