AO3 Brand Book
- In General
- On Screen
- In Print
- Spoken
- Handheld
- All
In General
Logo
This is our logo: 
On a screen it's shown in red, color #990000. The shorthand for this color is #900.
The logo has an aspect ratio of 117:80. Do not change the aspect ratio.
Fonts
- Headings, Subheadings, Titles, Addresses
- Georgia
- Georgia is a core web font; this means that everyone has it installed on their computer.
- Use Georgia on the screen and in print when writing the Archive name. Use it for lettering on icons and logos.
- Body text, Serif (Print)
- serif
- Serif is a family of fonts rather than a specifc font. It tells the system to use its default serif font.
- Use a serif to print out pages from the Archive.
- Body text, Sans-serif (Screen)
- Lucida Grande/Verdana
- Lucida Grande is an Apple system font. All Apple users have it. Verdana is a core web font. All PC users have it.
- Use Lucida Grande/Verdana for electronic materials, like web pages.
Colors
| 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 grey | #DDDDDD | web only | 221 | 221 | 221 | |||||
| dark grey | #333333 | web only | 51 | 51 | 51 | |||||
On the Screen
Resources
Download these branding resources (right click and save)
- All Screen Resources, zipped
- Logo SVG(size in px)
- Logo JPG(size in px)
- Logo PNG(size in px)
- TrueType font comprising AO3 logo (a), OTW logo (l) and OTW wordmark (w)
- Photoshop Custom Shape Pack (vector)
- Photoshop Custom Brush Pack (raster)
Logo
This is our logo:
On the screen we show it in this red: #990000. Don't change the color.
Fonts
- Headings, Subheadings, Titles, Addresses
- 400 weight, Georgia
- 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.
- Georgia should be used in the structural elements
h1, h2, h3, h4, h5, h6or in elements with the class.heading - Body text
- Lucida Grande, Verdana
- The full stack is
'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif; - 'Lucida Grande' is an Apple system font. All Mac users have Lucida. Verdana is a core web font; nearly everybody has it on their PC. Where these fonts are not available, we fall back through the stack.
- Lucida Grande/Verdana should be used in the main body of the text, on navigation actions, and on almost anything that isn't a heading.
- Code and Dates
- Monaco, Courier
- The full stack is
'Monaco', 'Consolas', Courier, monospace; - Monaco is an Apple system font. All Mac users have it. Courier is a core web font. Nearly everyone has it.
- We use monospace fonts for
kbd, tt, code, var, preand many instances of dates and times, which typically have the classdatetime.
Colors
| Use | HEX | R | G | B | |||
|---|---|---|---|---|---|---|---|
| red | Logo, Mast Head, Titles, Tag Hover | #990000 | 187 | 0 | 17 | ||
| white | Page background | #FFFFFF | ? | ? | ? | ||
| dark grey | Text | #2A2A2A | ? | ? | ? | ||
| darkest grey | Links | #111111 | ? | ? | ? | ||
We also use a range of greys 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
- #700
- #600
- #500
- #400
- #300
- #200
Some states have their own colors.
- #e8e6ed
- green
- #daa520
Some interactions have their own colors.
- #0c0
- #c00
- #ffffa3
- #f1d031
- #f3efec
System and error messages use their own separate color scheme:
- blue: success, messages, additional information. The background is #d1e1ef with a border of #c2d2df.
- 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.
Don't use other colors.
Banners, Buttons, Links
- Graphic links
-
<a href="http://www.transformativeworks.org/"><img src="../" alt="Organization for Transformative Works" /></a>testy
<a href="http://archiveofourown.org/users/testy/profile"><img alt="favicon" border="0" src="http://archiveofourown.org/favicon.ico" /></a><a href="http://archiveofourown.org/users/testy"><strong>testy</strong></a>
- Plain code links
-
- AO3
<a href="http://archiveofourown.org/"><acronym title="Archive of Our Own">AO3</acronym></a>
To be defined. Should be based on screen.
In Print
Our default print stylesheet is called 27-role-print.css.
Fonts
- All Text
- serif
- Serif is a family of fonts rather than a specifc font. It tells the system to use its default serif font.
Colors
| 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 | ||
Don't use any other colors.