For designers

Working with the design system

The VA.gov Design System is VA.gov’s front-end framework. Before getting started, we recommend that you get familiar with the VA.gov Design System and how you can use it as part of your design process. Each section includes some helpful information:

• Content. Our house style guide for VA.gov. Follow the guidelines to help you create a consistent, helpful experience for Veterans.
• Foundation. This section explains VA.gov’s base styles and visual language. You should set margins and padding in your design comps using the 8pt spacing units.
• Components. Components are the building blocks of the user interfaces. For example, accordions and buttons. Some of these have strict usage guidelines, so please become familiar with them.
• Patterns. Patterns define how components, content strategy, information architecture, accessibility, and visual design work in tandem to solve Veterans’ needs. Here you will find patterns to ask users for specific pieces of information and how to help a user to complete a task or interaction.
• Templates. Templates, or page layouts, compose components within a single page. A layout can contain multiple variations of a component depending on the context.

Design resources

The website displays HTML and CSS examples of the various components and patterns in use on VA.gov. You can use your browser’s web inspector to view the specs for each component.

The Design System Team also provides a complete Figma library of core components. In addition, there are community shared libraries organized by functionality.