Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Latest release: Component Library: v56.7.0 released on Jul 1, 2026 | Guidance: Sprint 3 released on Jul 13, 2026 | Figma: Changelog

About

What's new?

The latest news and updates on the VA Design System.
Sprint 3
July 13, 2026

What’s Changed

Full Changelog: https://va.ghe.com/software/vets-design-system-documentation/compare/Sprint-2…Sprint-3

 Sprint 2
June 29, 2026

What’s Changed

Full Changelog: https://va.ghe.com/software/vets-design-system-documentation/compare/Sprint-1…Sprint-2

 Sprint 1
June 16, 2026

What’s Changed

New Contributors

Full Changelog: https://va.ghe.com/software/vets-design-system-documentation/compare/Sprint-29…Sprint-1

 v56.7.0
July 1, 2026

What’s Changed

Replace hard-coded css-values with css-library tokens

va-alert

va-search-input

dependency updates

CSS-Library: v0.33.0

  • Converted font token values to rem: Some font tokens were in px and this update converts them to their equivalent rem value for scalability because it respects a user’s browser font-size preferences by @JAMI-GIBBS in #2187
  • Added additional tokens: New tokens added for ongoing design work on VA.gov by @JAMI-GIBBS in #2176

Full Changelog: https://va.ghe.com/software/component-library/compare/v56.2.2…v56.7.0

 v56.6.2
June 23, 2026

What’s Changed

Fixes

  • va-combo-box
    • Fixed a keyboard bug where pressing ArrowUp on the first combobox option closed the list and lost focus. By @COLIN-OSULLIVAN in #2157
  • va-date, va-memorable-date
    • Fixed date validation to accurately represent invalid fields as the user interacts with the field elements. This update styles all invalid fields and clears validation and styling on field blur instead of component blur. By @Kerry-Powell in #2134
  • va-file-input
    • Improved error validation by reflecting the error prop in the DOM. Also updated watch logic to focus on the component’s “Change” button before falling back to the `` element. By @Ryan-Munsch in #2158
  • va-icon
    • Improved page load performance on pages with multiple va-icon instances by caching the sprite SVG fetch to eliminate redundant HTTP requests. by @Adrian-Rollett with @Copilot in #2153
  • va-pagination, va-maintenance-banner
    • Improved styles to prevent content from getting cut off in mobile when a page margin is present. By @JAMI-GIBBS in #2144
  • va-search-input
    • Resolved Stencil rendering warning. This update replaces the @Statedecorator from the isTouched boolean to a plain private field to avoid unnecessary component re-renders. By @JAMI-GIBBS in #2140
    • Resolved TypeScript errors. This update should not have any functional changes to the component. By @JAMI-GIBBS in #2141

Dependency update

New Contributors

Full Changelog: https://va.ghe.com/software/component-library/compare/v56.6.1…v56.2.2

 v56.6.1
June 9, 2026

What’s Changed

Fixes

  • va-official-gov-banner: update aria attributes by @JAMI-GIBBS in #2133
  • va-memorable-date, va-date: fix issue with validation not checking inital field values by @Kerry-Powell in #2132
  • va-breadcrumbs: fix typescript errors by @JAMI-GIBBS in #2137
  • va-alert-sign-in: suppress expected console.error in invalid variant tests by @JAMI-GIBBS in #2138
  • va-link: remove link–center style, align icons using containers/flex by @Kerry-Powell in #2139

Full Changelog: https://va.ghe.com/software/component-library/compare/v56.6.0…v56.6.1

May 2026

Content style guide

Bold and italic text

  • Updated the section title to replace the “&” with “and”
  • Updated the guidance on when to bold:
  • Made style guide edits throughout

Bulleted and numbered lists

  • Added a new consideration for ordering bulleted lists:

    Most to least popular or common

    We order some lists based on how popular or common each item in the list is. This approach works most often for radio button or checkbox options in an interactive form. For example, if you know more people select a certain response for a question, you can put that response at the top of the list.

    Note: Base the order of popularity on data from past responses or research.

  • Added “or chronological” to the “numerical” ordering consideration
  • Specified in the alphabetical ordering consideration that this order is for lists that don’t have another natural order
  • Added a new subsection on breaking up long lists:

    Breaking up long lists

    If you have a long list (typically a list with more than 7 items), consider breaking up the list into multiple smaller lists with subheads. This helps keep lists easy to understand. You can break up the list in different ways, depending on the content.

    Consider breaking up long lists in these ways:

    • Item type
    • Physical location
    • Numerical or chronological
    • Alphabetical

    Examples

    Item type

    You can break up a long list by keeping similar items together in their own smaller lists.

    Physical location

    If you have a long list of different locations, you can break up the list by state or country.

    Numerical or chronological

    You can break up some lists numerically or chronologically in a variety of ways, including by month, year (or range of years), era, length of time, age, or percentage level of disability.

    Alphabetical

    Some lists may make sense to break up by letter, or range of letters. For example, a list of medications or locations that wouldn’t make sense grouped by state or country.

Use conversational language

Added guidance on not using unclear pronouns:

Don’t use unclear pronouns like “it,” “this,” or “that” on their own. Using these terms without context can be confusing. And unclear pronouns can cause problems with translated content.

Title tags

  • Removed guidance on character limits and us truncating title tags (search engines may still truncate title tags, but we don’t manually truncate title tags)
  • Revised the introduction to the Additional guidance subsection:

    For VA medical center (VAMC) websites and forms and subtasks, we need to include additional information in the title tag for clarity and accessibility. The title tag format is different for these pages.

  • Clarified the guidance for VA medical center (VAMC) websites:

    Because many Veterans search for VA hospitals by city or region, it’s important to include the region to distinguish the VAMC page from the national content on VA.gov.

  • Revised the guidance for forms and multi-page subtasks:

    Some form components, like the Income limits tool and forms using the Form step - minimal template, use the question for the H1. This may be helpful for people as they fill out the form, but it’s less useful as the title tag on its own. If someone has multiple forms open, we want them to easily be able to tell the forms apart with clear title tags.

    Each page in the flow should have the H1 and form number in the title tag.

    Format: H1 Page Title | VA Form Number | Veterans Affairs

  • Fixed the capitalization in the example in the Privacy guidance subsection
  • Made style guide edits throughout

Templates

Form step

  • Aligned hint text subsection with current guidance:

    Add hint text under a field label if it would help someone choose the right response, like “We’ll use your email address to confirm when we receive your form.” Knowing how we’ll use their email may help the person choose which email to enter. Or use hint text to help someone answer a question more easily, like “Select a month. Enter 1 or 2 digits for the day and 4 digits for the year.” Hint text should have an ending period if it’s a full sentence.

  • Made style guide edits throughout

Form step-minimal

  • Clarified guidance on H1s:

    The H1 on each page of the form should either describe the information needed (like Your name and date of birth) or ask the specific question for that page (like What’s your relationship to the Veteran?).

    All new forms should use this template. The templates in Figma and in code provide good starting points for new form development. Your forms will have a unique H1 for each page and will be more accessible for people.

    The step label should be unique from the H1 on each page. The step label describes the general type of information you’re collecting (like Your personal information) and the page header (H1) will be specific (like Your name and date of birth).

    H1 page headers can be questions or statements.

    Each page in a form that gathers information must have an H1 page header that tells the person what kind of information we’re asking for on that page. Each H1 must be unique from the other question pages and from the step label. The H1 on each page of the form should either describe the information needed (like Your name and date of birth) or ask the specific question for that page (like What’s your relationship to the Veteran?).

    Keep hint text brief, without any line breaks if possible. If you need to give a long, detailed explanation, consider using a Details component or an accordion instead. Screen readers will read the entire hint text aloud when people interact with the form field. This could frustrate people if the text is long.

  • Made style guide edits throughout

IA

Reorganization

Reorganized the section:

Overview

IA Standards

  • Redirects
  • Search Recommendations
  • URL Standards
  • Vanity URLs

Organization

  • Site Organization
  • Domain Structure

VA Health and Benefits app

Search Recommendations (new section)

This new section explains how to request the setup of or changes to search recommendations (or best bets) for a VA.gov page. The page also had general information on what search recommendations are, when and how to use recommendations, and keyword considerations.
Edit this page in GitHub (Permissions required)
Last updated: Jun 09, 2026