Visual design elements
Vets.gov is based on the U.S. Web Design Standards.Get an overview of our design building blocks below.
- Body Copy
- Source Sans Pro (Regular, weight 400)
- Source Sans Pro (Bold, weight 700)
- Headings: Roboto Slab, Source Sans Pro
Content headings (headings 1 and 2 are reserved for the vets.gov header and breadcrumb navigation)
- Primary (Hex value: #0071bc)
- Primary Darker (Hex value: #205493)
- Primary Darkest (Hex value: #112e51)
- Gray Dark (Hex value: #323a45)
- Gray Lightest (Hex value: #f1f1f1)
- Gold (Hex value: #FAC922)
- Green (Hex value: #2e8540)
- Green lightest (Hex value: #e7f4e4)
Generally, vets.gov avoids the use of imagery, icons and other visual embelishments. If an image is to be used, it should convey content that can not be adequately conveyed by text alone. If an image is used, be sure to caption the meaning of the content through the use of an alt tag to maintain Section 508 accessibility compliance.
If icons are needed, as in a specific application context, Vets.gov uses Font Awesome as its standard.