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 Formation and the content style guide

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