Style Guide

Header 1 (Gotham Medium/24pt  32px/black or white/sentence case)

HEADER 2 (GOTHAM BOOK/20pt 22px/all cap/black/all caps)

Header 3 (Gotham Medium/18pt 24px/orange/sentence case)

Header 4 (Gotham Book/20pt 22px/orange/sentence case)

Header 5  (Gotham Medium/25.5pt 34px/black or white/sentence case)
Header 6 (Gotham Book/21px 15.75pt/black/sentence case)
Standard Text Block Heading 6 inside of the text block

Most body copy looks like this. Right rag. Gotham Book, 16px / 12pt over 24.46 leading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block Quote Full Width Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

“Full Width Pull-out Quote Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

Block Quote Full Width Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

“Left Side Pull-out Quote Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

Block Quote Left Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

“Right Side Pull-out Quote Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

Block Quote Right Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC.

Un-ordered List

  • Bulleted List
  • Bulleted List
  • Bulleted List
  • Bulleted List

Ordered List

  1. Numbered List
  2. Numbered List
  3. Numbered List
  4. Numbered List

Link states (color):

  • NORMAL #ff6600 – unvisited link.
  • VISITED #808285 – a link the user has visited.
  • HOVER #79a7bc – a link when the user mouses over it.
  • ACTIVE #79a7bc – a link the moment it is clicked.

Standard Rule Line


Styled Rule Line

Buttons

For buttons on white
Button Small
Button Medium
Button Large
Button Xtra Large 2 Lines
Orange button for donation page
Button Small
Button Medium
Button Large
Button Xtra Large 2 Lines
For buttons over images, white overlay and a thicker white border; rollover is opposite.
GIVE 100% NOW

Team DNL test. Text Block of content authored to show headings, etc using one editor for faster authoring and styling of content.

Heading 1 Charcoal

Heading 1 Black

This is a textsdfsdfsdf

HEADing 2

Heading 3

Heading 4

Heading 5
Heading 6

Most body copy looks like this. Right rag. Gotham Book, 16px / 12pt over 24.46 leading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block Quote Full Width Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

“Full Width Pull-out Quote Styling: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

  • Bulleted List
  • Bulleted List
  • Bulleted List
  • Bulleted List
  1. Bulleted List
  2. Bulleted List
  3. Bulleted List
  4. Bulleted List