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.


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.


What’s new?

The latest news and updates on the Design System, Forms library and the Content style guide

November 23, 2021

Content style guide updates

November 1, 2021

Design System updates

  • Back to top web component
  • Form confirmation page
  • Alert box web component

May 12, 2021

Content style guide updates

April 5, 2021

Tools Updates

Storybook Launch

Storybook was launched in January and is ready for use. Storybook is an industry-standard platform we’re using to document and more rapidly develop our component library. To access go to Storybook

Sketch Library Updates (as of Q1 2021)
  • Added action link symbols. Also included action link mini components on the User Flows page. Check the templates page on how the action link works in context
  • Underlined all link text styles for accessibility purposes
  • Widened on month select box in date input component to incorporate the entire month name
  • Added month/year date input component
  • Tweaked wording on address component “Line 2” and “Line 3” is now “Street address line 2” and “Street address line 3”
  • Added form templates for “Contact information” in the templates section
  • Added email template and email text styles
  • Added form templates for “Applicant information” in the templates section
  • Added the “Back to top” component in the navigation section
  • Create a date input symbol
  • Updated the checkbox and radio button symbols for better resizing
  • Fixed typo in pagination component
  • Added wizard mini pattern to user flows page
  • Added direct deposit templates
Form Pattern Library Updates

Documentation has been added for the following patterns:

  • Application Information
  • Contact Information
  • Date input

Components and Pattern Updates

Accordion Web Component

There is now an Accordion Web Component that is a single source of truth for multiple technical environments. Documentation for the Accordion is on Storybook.

There is a new Action link component that was created because we needed a more prominent link component to direct sighted users and assistive tech users to start a service. It is important for assistive technology users to have the correct markup because screen readers always say “link” before links, and “button” before buttons. Using links and buttons intentionally results in a more inclusive experience for assistive technology users We updated guidance on buttons as well and have decided to limit the use of the green button for triggering wizards only. Please read both components’ guidance to determine how to use buttons and links consistently and correctly.

[Action Links ]


Direct Deposit

A standard pattern is available for any team that needs direct deposit functionality in a product. Review the form template documentation to learn more. Direct deposit form templates are on the “Templates” page of the Sketch library.

Responsive list tables

Responsive list tables adapt on smaller screens so that each row in the table becomes an item in a list. They are great to use when Veterans are looking up information that is formatted in a table that would best be reformatted as a list on mobile devices, where the width of the screen may not accommodate a wider table.

The responsive list table can is on the “Styles” page of the Sketch library under the artboard “Content Presentation”. You can read documentation for responsive tables

September 10, 2020

Content style guide updates

April 2, 2020

Content style guide updates

December 11, 2019

Content style guide updates

July 3, 2019

Site updates

July 3, 2019


  • Accordion component now supports a multi-selectable feature, allowing multiple accordions within a set to be open at the same time.

June 21, 2019

Site updates

  • Documentation for the new promo banner component
  • Note about how U.S. Web Design System has been implemented into the Formation design system


  • Corrects font size in the font size utility. The issue affected the normal font size utility, which was incorrectly set to 300. The correct value is 400.

June 20, 2019

6.6.1 and 6.6.2

  • Corrects display bug in the promo banner component


  • Adds new promo banner component

June 10, 2019

Site updates

  • New pattern documentation for handling supplemental content.

June 6, 2019


  • Patches line-height mismatch for paragraphs inside of a va-introtext div.


Site updates

  • Removed USWDS npm notes from JavaScript documentation since it is no longer needed as a dependency
  • Fixed bug where anchors were hidden behind sticky navigation

May 30, 2019

Content style guide update

May 21, 2019

Site updates

  • Removed examples of alert boxes with expandable content.

Content style guide updates

Summary of new guidance or change in guidance (either from the or OPIA style guides):

May 20, 2019


  • Patch to Fix a bugg affecting accordions

Site updates

  • Redesigned code snippet previews and improved links to the react versions for some components.

May 13, 2019


  • Imports missing Sidenav component CSS

May 13, 2019


  • Patch for Sidenav component Javascript. Fixes bug where screen would be stuck if screen was resized while navigation flyout was open.

May 9, 2019


  • Added Sidenav component JavaScript to Formation

April 30, 2019


  • Adds missing Sass variables for cool blue colors

April 25, 2019


  • Address bug in accordion script where bordered accordions were not declared
  • Fixes second bug in accordion where the DOM was traversed incorrectly
  • Fixes interaction on accordions where accordion content is opened below the fold

Site updates

  • Updates to the content style guide
  • Removed browser autocomplete from search
  • Fixes issue where content in responsive previews generated 404 in production

April 17, 2019


Packages Formation’s Javascript to function as a standalone package. Formation can now be installed with node on a project without any other dependencies.

Site updates

  • Updated documentation to the content style guide

April 12, 2019

Site updates

  • Improved documentation for running the site locally
  • Updates to some content guidance in the style guide


  • Adds autoprefixer to address display bug in select boxes

April 4, 2019

Site updates

  • Added examples to showcase how to nest flexbox grids inside other grid columns.


  • Updates Formation’s USWDS backbone to version 1.6.10.

April 3, 2019

6.0.0 & 6.0.1

Image paths in Formation are now relative, so the images and fonts folder are not required to be in your site root.

Site updates

  • Better indicators for responsive utilities
  • Updates to contribution documentation (still work in progress)
  • Updates to content style guide

March 29, 2019

Site updates

  • Added search feature

March 25, 2019


  • Removes padding property on U.S. Web Design System grid that is overridden on

Site updates

  • Updated documentation for designers, developers, and naming conventions

March 21, 2019


  • Adds heading level names to font-size utility


  • Adds more images used in background image CSS from

Site updates

  • Update to documentation about headings in the typography section
  • Update to documentation on heading utilities

March 13, 2019

Site updates

March 12, 2019


  • Adds external link icon CSS into Formation design system

March 11, 2019


  • Creats Sass variables for hub colors that are consistent with the rest of color variable naming conventions
  • Adds two new hub colors to utility classes for color, background color, and border color

Site updates

  • New layout for system color palette
  • Updated documentation for color, background color, and border color to include new hub colors and Sass variable names

March 6, 2019

Site updates

  • Update documentation for alerts

March 4, 2019

Site updates

  • Added form control documentation
  • Added image aspect ratio documentation

February 21, 2019


  • Added line-height utility


  • Added measure

Site updates

  • Improved documentation pages for some utilities

February 20, 2019


  • Added height and width utility

February 14, 2019


  • Added a border utility

February 12, 2019


  • Added a font-weight utility


  • Added a transparent option for color and background color utility.


  • Added a new font-style utility.

February 11, 2019

Site updates

  • Hover on any h2, h3, or h4 to get an anchor link. This feature will allow users to easily copy deep links to share and discuss.

February 8, 2019


  • Added a text-decoration utility


  • Added a text-alignment utility

February 6, 2019


  • Added a spacing units function for margin and padding

Site Updates

  • Added documentation for spacing units

February 6, 2019


  • Added font-family utility

Site Updates

  • Updated the documentation presentation for the color utility and added hex keys.
  • Updated icon documentation to include HTML snippets

February 5, 2019


Adds a font-size utility

Site Updates

Updated the documentation for background colors and added hex keys.

February 1, 2019


Adds a background-color utility


Adds a color utility

January 30, 2019


Adds a suite Flexbox utilities.

January 29, 2019


Moves the Add Another button to the bottom of array lists in support of updates to the U.S. Forms System.

January 25, 2019


Includes Font Awesome regular and Fontawesome brand fonts.


This release adds a new flexbox grid system.

January 23, 2019


In this release we are splitting Formation into two modules: formation and formation-react. The regular formation module contains the styles and assets used to render a site using the VA design system. In the future it will also include plain JS implementations of components with interactivity.

The formation-react module contains all the React component implementations we’ve built for design system patterns.

Both are starting on v3, but will not necessarily be kept in sync going forward.

To upgrade, update any paths in your React code to point to formation-react instead of formation.

January 21, 2019


  • Updated icon font set to Fontawesome 5 solid

January 17, 2019

Site updates

  • Created page to show recent updates

January 15, 2019


  • Accessibility fixes for the module component
Edit this page in GitHub (Permissions required)
Last updated: Nov 24, 2021