The Department website represents a new direction for VA websites that are not directly focused on services and benefits for Veterans, but informational sites that may be of interest to all Americans. Many of the design elements were inspired by the work on the U.S. State Department website as well as VA.gov design system with an emphasis on the content style, and the U.S. Web Design System. The latter is the primary focus of our design philosophy, typography, and colors. With an emphasis on no-code or low-code, these sites use a FedRAMP authorized WordPress vendor and currently use commercial off-the-shelf themes and plugins to minimize sustainment costs.

Fonts

Primary Font Families

Source Serif Pro for all major headings

Public Sans for all other text and secondary, sub-section headers .

VA websites can choose to use this pairing or reverse it or choose one for all.

All typography is rem-based with root size being 16px. All content is 1 rem by default but long-format text can have a style of “prose” added to increase the font size to 1.25rem to allow the user to “sit back” and read the text.

Alternative Font Families

If the primary fonts do not meet your design needs the following alternatives are authorized:

Serif Font Family

  • Merriweather (USWDS)
  • Serif system fonts
    Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Bitter (VA.gov)

Sans Serif Font Family

  • Source Sans Pro (USWDS)
  • Sans serif system font
    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif

 

Any other fonts must be reviewed and approved by the VA Web Governance Board.

Typography Sample

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Basic paragraph — add class .content to maintain max-width of 80ch and to underline hyperlinks.

Ornare risus. Praesent porro, anim voluptates, ante donec voluptatem habitant hendrerit! Lorem nullam, harum, curae, omnis convallis odit, interdum veritatis iste, debitis dolorem natus, temporibus? Aute! Eleifend sapiente ad orci euismod aliquet illo, laboris quo laudantium unde vehicula cursus officiis. Odio condimentum, deserunt tenetur tempore auctor. Facilisi nesciunt, incidunt lacus, aut alias? Voluptate? Sociis hymenaeos magnam class rem vitae molestias.

8 point system based on rem
Relative Unit Pixels
1px 1px
2px 2px
.25rem 4px
.5rem 8px
1rem 16px
1.25rem 20px
1.5rem 24px
2rem 32px
2.5rem 40px
3rem 48px
4rem 64px
5rem 80px

Content

The theme we are currently using does not set a max width of the content, and therefore the text can flow across the entire screen. This is very bad for readability. Studies indicate that the ideal line length should not exceed 75 characters, with the range of 50-75 being ideal for paragraph text. Within the CSS we have created, there are three classes available — content (75 characters), content- -narrow (62 characters), and content- – narrowest (50 characters). The content class is already assigned to all article layouts but must be added manually for other text blocks.

content- -narrow

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.

content- -narrowest

If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.

Example of assigning a class to a text block within the theme elements

Vertical Tabs

International Labor Affairs

Protecting worker rights—especially the freedoms of association and collective bargaining through a healthy industrial relations system—is essential to building durable democracies as well as achieving sustainable growth for prosperity and a level playing field for American workers.

  • List Item
  • List Item
Your Content Goes Here
Your Content Goes Here
Your Content Goes Here

Basic Tabs

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Basic Accordion

An accordion is a list of headers that hide or reveal additional content when selected.

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

  • This is a list item
  • Another list item

Wayfinding

The class wayfinder__heading sets up an underline that can be used for headings (titles). The basic sizing and spacing are 100px wide, and 8px high, with a bottom margin of 32px. If you want to add the color modifier you must include both (e.g., wayfinder__heading wayfinder__heading- -info).

General Categories

  • wayfinder__heading (basic)
  • wayfinder__heading- -info
  • wayfinder__heading- -news
  • wayfinder__heading- -outreach
  • wayfinder__heading- -process
  • wayfinder__heading- -service

Benefit Categories

  • wayfinder__heading- -burials
  • wayfinder__heading- -health
  • wayfinder__heading- -disability
  • wayfinder__heading- -housing
  • wayfinder__heading- -education
  • wayfinder__heading- -careers
  • wayfinder__heading- -insurance
  • wayfinder__heading- -pensions

Utilities

  • wayfinder__heading- -thin (2px)
  • wayfinder__heading- -medium (4px)
  • wayfinder__heading- -center
  • wayfinder__heading- -white (for dark background where gray does not have enough contrast)

Basic

General Information

News Releases

Outreach

Process

Service Members

Burials

Careers

Disability

Education

Health care

Housing

Insurance

Pensions

Utilities

wayfinder__heading- -thin

wayfinder__heading- -medium

wayfinder__heading- -center

wayfinder__heading- -white

Components

This is just getting started and new components will be added as soon as possible.

More Information accordion

This can be used for short, secondary information that does not need to be displays all the times. See the VA.gov design guide for more usage information.

Luctus iaculis. Dignissim mollit! Explicabo habitasse blandit enim! Bibendum conubia gravida accusantium, irure! Laboris, distinctio, assumenda dictum aliquet cumque quo, blanditiis modi torquent ducimus mollis risus eum, pede quo at quisque metus velit tortor earum? Modi, erat animi potenti proident.

In dolorem dapibus numquam eveniet consequat adipiscing mollis diam, minim! Dolores blanditiis imperdiet vitae facilis, commodo. Dui maxime voluptatum praesent officia tristique facere vivamus. Nostra vitae consectetuer delectus nostrum magnam! Fugit nam suspendisse ac quos mus, aut duis rutrum! Sollicitudin.

Link Button

This can be used for a variety of link options. The additional attributes can be used to add aria- information or data- values.

Sliding CTA Button

Create a transparent button with a border and add the class vac-button-slide.

Accordion Card

This is to only provide the basic information or important highlights information and then link to the authoritative source. There are several options available — Policy, Health Care, Budget, Notice, and General Information.

11. Ensure Information Quality and Accuracy

The Internet enables agencies to communicate information quickly and easily to a wide audience, which, while of great benefit to society, also increases the potential harm that can result from disseminating incorrect information. Taking this into account, information disseminated from Federal Government websites and digital services, or from third-party services on behalf of the Government, is expected to be authoritative and reliable.

The Information Quality Act applies to all information disseminated from Federal websites, and in certain cases, to information published to third-party sites on behalf of the Government. OMB has published Information Quality Guidelines to help agencies meet this requirement.

[…]

E. Agencies must clearly identify external links from their websites, and to the extent practicable update or remove the links when the external information is no longer sufficiently accurate, relevant, timely, necessary or complete.

  1. Agency websites must clearly state that the content of external links to non-Federal Agency websites is not endorsed by the Federal Government and is not subject to Federal information quality, privacy, security, and related guidelines.
  2. Agencies should choose the best approach to identify external links to users in a way that minimizes the impact on the usability of their websites and digital services.

View the full text of M-17-06 [PDF, 1.2 MB]

11. Ensure Information Quality and Accuracy

The Internet enables agencies to communicate information quickly and easily to a wide audience, which, while of great benefit to society, also increases the potential harm that can result from disseminating incorrect information. Taking this into account, information disseminated from Federal Government websites and digital services, or from third-party services on behalf of the Government, is expected to be authoritative and reliable.

The Information Quality Act applies to all information disseminated from Federal websites, and in certain cases, to information published to third-party sites on behalf of the Government. OMB has published Information Quality Guidelines to help agencies meet this requirement.

[…]

E. Agencies must clearly identify external links from their websites, and to the extent practicable update or remove the links when the external information is no longer sufficiently accurate, relevant, timely, necessary or complete.

  1. Agency websites must clearly state that the content of external links to non-Federal Agency websites is not endorsed by the Federal Government and is not subject to Federal information quality, privacy, security, and related guidelines.
  2. Agencies should choose the best approach to identify external links to users in a way that minimizes the impact on the usability of their websites and digital services.

View the full text of M-17-06 [PDF, 1.2 MB]

11. Ensure Information Quality and Accuracy

The Internet enables agencies to communicate information quickly and easily to a wide audience, which, while of great benefit to society, also increases the potential harm that can result from disseminating incorrect information. Taking this into account, information disseminated from Federal Government websites and digital services, or from third-party services on behalf of the Government, is expected to be authoritative and reliable.

The Information Quality Act applies to all information disseminated from Federal websites, and in certain cases, to information published to third-party sites on behalf of the Government. OMB has published Information Quality Guidelines to help agencies meet this requirement.

[…]

E. Agencies must clearly identify external links from their websites, and to the extent practicable update or remove the links when the external information is no longer sufficiently accurate, relevant, timely, necessary or complete.

  1. Agency websites must clearly state that the content of external links to non-Federal Agency websites is not endorsed by the Federal Government and is not subject to Federal information quality, privacy, security, and related guidelines.
  2. Agencies should choose the best approach to identify external links to users in a way that minimizes the impact on the usability of their websites and digital services.

View the full text of M-17-06 [PDF, 1.2 MB]

11. Ensure Information Quality and Accuracy

The Internet enables agencies to communicate information quickly and easily to a wide audience, which, while of great benefit to society, also increases the potential harm that can result from disseminating incorrect information. Taking this into account, information disseminated from Federal Government websites and digital services, or from third-party services on behalf of the Government, is expected to be authoritative and reliable.

The Information Quality Act applies to all information disseminated from Federal websites, and in certain cases, to information published to third-party sites on behalf of the Government. OMB has published Information Quality Guidelines to help agencies meet this requirement.

[…]

E. Agencies must clearly identify external links from their websites, and to the extent practicable update or remove the links when the external information is no longer sufficiently accurate, relevant, timely, necessary or complete.

  1. Agency websites must clearly state that the content of external links to non-Federal Agency websites is not endorsed by the Federal Government and is not subject to Federal information quality, privacy, security, and related guidelines.
  2. Agencies should choose the best approach to identify external links to users in a way that minimizes the impact on the usability of their websites and digital services.

View the full text of M-17-06 [PDF, 1.2 MB]

11. Ensure Information Quality and Accuracy

The Internet enables agencies to communicate information quickly and easily to a wide audience, which, while of great benefit to society, also increases the potential harm that can result from disseminating incorrect information. Taking this into account, information disseminated from Federal Government websites and digital services, or from third-party services on behalf of the Government, is expected to be authoritative and reliable.

The Information Quality Act applies to all information disseminated from Federal websites, and in certain cases, to information published to third-party sites on behalf of the Government. OMB has published Information Quality Guidelines to help agencies meet this requirement.

[…]

E. Agencies must clearly identify external links from their websites, and to the extent practicable update or remove the links when the external information is no longer sufficiently accurate, relevant, timely, necessary or complete.

  1. Agency websites must clearly state that the content of external links to non-Federal Agency websites is not endorsed by the Federal Government and is not subject to Federal information quality, privacy, security, and related guidelines.
  2. Agencies should choose the best approach to identify external links to users in a way that minimizes the impact on the usability of their websites and digital services.

View the full text of M-17-06 [PDF, 1.2 MB]

Note Box

Used to call attention to special interest items. Adjust the heading level and switch to code view and add class=”vac-notice__heading.”

Note

Taciti aspernatur repellendus aspernatur, laoreet eaque posuere sociis! Ducimus, nemo scelerisque dapibus. Ullamcorper consequuntur. Provident! Incididunt cupidatat, alias. Rutrum repudiandae? Laoreet, molestie quo. Voluptate, suscipit vulputate nec voluptas corrupti diamlorem dignissim soluta explicabo vel sequi vitae consectetur felis maxime ullam.

Aliquet inventore hymenaeos arcu aliquet vehicula dapibus eveniet veritatis! Semper. Eum, exercitationem temporibus tempora! Quibusdam, ullam cubilia primis aut morbi. Platea. Fusce proin vel iaculis! Laoreet sapiente alias fermentum sodales consectetuer cumque adipiscing iaculis, vestibulum quibusdam senectus eleifend diam, iusto.

Contact Information – Formal

Melissa Bryant

Brenda “Sue” Fulton

Assistant Secretary, Office of Public and Intergovernmental Affairs

Additional Resources

Contact Information – Casual

John P. Smith

Executive Director

Some office at VA (000)
john.smith99999@va.gov
(123) 456-7890

John P. Smith

Executive Director

Some office at VA (000)
john.smith99999@va.gov
(123) 456-7890

John P. Smith

Executive Director

Some office at VA (000)
john.smith99999@va.gov
(123) 456-7890

Process List

A process list displays the steps or stages of important instructions or processes. Visit the USWDS website for more details. This does require using the code view.

  1. First Item
    Est labore imperdiet modi amet neque, ullamco pariatur esse quibusdam laborum nostra? Illo totam blanditiis taciti impedit dis! Laboriosam sapien provident viverra unde? Eius, leo? Iste eleifend, suscipit neque ridiculus? Vestibulum interdum mi nisl viverra pede eros tempor modi eget.
  2. Second Item
    Est labore imperdiet modi amet neque, ullamco pariatur esse quibusdam laborum nostra? Illo totam blanditiis taciti impedit dis! Laboriosam sapien provident viverra unde? Eius, leo? Iste eleifend, suscipit neque ridiculus? Vestibulum interdum mi nisl viverra pede eros tempor modi eget.
  3. Third Item
    Est labore imperdiet modi amet neque, ullamco pariatur esse quibusdam laborum nostra? Illo totam blanditiis taciti impedit dis! Laboriosam sapien provident viverra unde? Eius, leo? Iste eleifend, suscipit neque ridiculus? Vestibulum interdum mi nisl viverra pede eros tempor modi eget.

Table of Content Element

The default theme that is being used comes with a table of contents element that can be used on pages and posts. We have created a styled version and added it to the element library TOC- Gray Bar. This is the preferred style, but other options are available. The table of contents listing is autogenerated based on the heading levels on the page. By default h2 and h3 are selected, but all heading levels can selected or removed.

This is just a placeholder (h2)

This is just a placeholder (h2)

This is just a placeholder (h3)

This is just a placeholder (h4)

This is just a placeholder (h5)
This is just a placeholder (h6)

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.

Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!

There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.

If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.