Branding

Typography

Source Sans Pro

Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.

Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.

Source: US Web Design Standards

Roboto Slab

Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Roboto Slab is an open-source slab serif typeface based on Roboto. With only four variations of weight, Roboto Slab is appropriate for headers and can be paired with other san serifs. Roboto Slab is used in the breadcrumb and title headers throughout Vets.gov to convey a friendly and welcoming gesture to users.

Typesetting

Readable text allows users to efficiently read and take in textual information, whereas text that is not readable turns off readers or makes it challenging for them to stay focused. The following guidelines promote good readability.

Heading

Content heading 1 and 2 are reserved for the vets.gov header and breadcrumb navigation.

Heading 3

Heading 4

Heading 5
Heading 6

Body Copy

  • Source Sans Pro (Regular, weight 400)
  • Source Sans Pro (Bold, weight 700)

Alignment

Type set flush left provides the eye a constant starting point for each line, making text easier to read.

The Grand Canyon

Grand Canyon National Park is the United States' 15th oldest national park. Named a UNESCO World Heritage Site in 1979, the park is located in Arizona.

Line Length

Controlling the length of lines of text in extended copy makes reading more comfortable by helping readers’ eyes flow easily from one line to the next. Somewhere between 50 and 75 characters per line is broadly considered to be a readable line length, while 66 characters is considered the ideal. Other factors beyond line length also affect reading comfort. Text with more space between lines can have somewhat longer line length. Also, contexts in which users will not be reading long passages of text (such as footnotes or alerts) can safely be set with somewhat longer lines as well.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

75 characters max on desktop

Spacing

  • Component Element
  • Component Description
  • Component Code
  • Component 508

Color

This palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Primary

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Primary Hex: #0071bc
Primary-darker Hex: #205493
Primary-darkest Hex: #112e51
Gray-dark Hex: #323a45
Gray-lightest Hex: #f1f1f1
White Hex: #ffffff

Secondary

Gold Hex: #fac922
Green Hex: #2e8540

Tertiary

These colors are used primarily for content-specific needs, such as alerts and callout information. They should never overpower the primary colors.

Primary-alt-lightest Hex: #e1f3f8
Green-lightest Hex: #e7f4e4
Secondary-lightest Hex: #f9dede

Vets dot gov Logo, navy View Logo - Dark

Vets dot gov logo, Dark

View Logo - White

Vets dot gov logo, hover state

View Logo - Hover

Thread Image

Thread Image

Thread Image (AI file)