Branding
Typography
Source Sans Pro
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
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.
#0071bc
#205493
#112e51
#323a45
#f1f1f1
#ffffff
Secondary
#fac922
#2e8540
Tertiary
These colors are used primarily for content-specific needs, such as alerts and callout information. They should never overpower the primary colors.
#e1f3f8
#e7f4e4
#f9dede