Skip to main content

    VA.gov visual design

    In order to have a consistent look and feel that is easy to use and accessible for all Veterans, VA.gov is built on top of VA's design system (VADS). VADS is based on the US Web Design System and contains components, patterns, and utilitiesthat can be used to create sites and applications that fit the VA's standards.

    The VA design system documentation can be viewed at design.va.gov. For developers building on the platform, there are two modules that you can use to implement the look and feel on your project.

    Formation

    formation is the name of the npm module that contains the base styles and components for the VA design system. It contains Sass files as well as compiled CSS versions of those styles. The module is on npm under the VA org here.

    If you need to use Formation on a project outside of the vets-website repository, you can follow the instructions here. If you're using it on an app in vets-website, it should be ready for you to use already.

    Formation-react

    Separately from the main formation module, we also have formation-react, which contains React implementations of many of the components described in the design system. This is already set up for you to use in vets-website; for uses outside of vets-website, see the module readme.

    You can view documentation for each of the components in formation-react by clicking on one in the sidebar on the left of the page.