Colors and Typography

 

Colors

White (Hex: #FFFFFF) forms the base color for the site. The following colors are used for various elements of the site design. Color choices (and variations from those listed) take into account WCAG 2.0 level AA contrast ratio requirements. For specific font colors and their usage, see the typography section below.

 

Primary

 

Accent

Color bands, icons, attention-drawing elements

 

Messaging

 

Neutral

[Back to Top]

---

Fonts

Two font families — Cairo and Lato — have been selected for use on the site. Cairo is reserved for headers, navigation, and call outs. Lato is the font for all other usage, including paragraph text.

Cairo Bold

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 (!@#$%&.,?:;)

Cairo Semibold

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 (!@#$%&.,?:;)

Lato Regular

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 (!@#$%&.,?:;)

[Back to Top]

---

Typography

The following example has been set for display at large desktop (1500px and larger) viewport width. The base copy size is 17px; spacing is largely based on this value. Copy scales as the viewport is reduced (from 1500px and lower) until the base copy reaches 14px (minimum recommended font size). Additional adjustments are considered for tablet and mobile display.Font size, line height, content width and characters per line are optimized for maximum legibility, calculated around the golden ratio when feasible. A minimum 3:1 contrast ratio is recommended for links (compared to surrounding text) to accommodate vision impairments.

Headline H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget. Sample link.

Headline H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget. Sample link.

Headline H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget. Sample link.

Headline H4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget. Sample link.

Headline H5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget. Sample link.

Headline H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget. Sample link.

---

Lead-in text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio.

---

Bulleted lists

Unordered:

• Mauris aliquam
• felis nec tempus faucibus
• purus tortor posuere neque
• ut facilisis nunc magna quis magna
  • Vivamus ultrices
  • dolor et ultrices ultrices
  • turpis justo porttitor purus

Ordered:

1. Mauris aliquam
2. felis nec tempus faucibus
3. purus tortor posuere neque
   1. ut facilisis nunc magna quis magna
   2. Vivamus ultrices
   3. dolor et ultrices ultrices
   4. turpis justo porttitor purus

Vestibulum justo arcu, luctus in lacus ut, vulputate gravida nulla. Cras vitae leo interdum, dapibus risus porttitor, placerat dolor. Aliquam rhoncus leo at ornare congue. Sed viverra mollis turpis nec mattis. In hac habitasse platea dictumst.

[Back to Top]

---