Documentation for designers
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. However, if you use Sketch, each of these components have been added to a pattern library as well.
How to work with Formation
Formation is VA.gov’s front-end framework for the design system. This site documents most of the components in the Sketch library. However, some components will be migrated over the next few release cycles.
Before getting started, we recommend that you get familiar with Formation and how you can use it as part of your design process. Each section includes some helpful information:
- Content style guide: Our house style guide for VA.gov. Follow the guidelines to help you create a consistent, helpful experience for Veterans.
- Design: 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 “UI fragments,” such as buttons and accordions. Some of these have strict usage guidelines, so please become familiar with them.
- Utilities: This section mostly describes CSS, but that doesn’t mean it is only for front-end developers. Formation guides design implementation, so understanding the utilities may assist in how designers describe their work. Many of the utilities are responsive and can be used to modify or enhance designs for different screen widths at a low development cost.
- Patterns: How components, content strategy, information architecture, accessibility, and visual design work in tandem to solve Veterans’ needs. Here, you will find information on how Hub pages are structured, how to build multi-part forms, etc.
- Layout: The layout section describes the design grid and tools you can use to create page or design pattern structure.
Working with developers
In many cases, your designs will not need to introduce new components. Additionally, you should not add new components where an existing one would suffice. If you need to add a new component, you should consider whether or not it could be reusable in other contexts on the VA.gov platform or if it is a single-use pattern. You can bring other designers and front-end developers in to assist with the decision-making process.
If you have determined that a component is reusable, you will need work with the development team to ensure that it is built and scoped correctly in Formation.
If the component is not reusable, only useful in a single context or single type of application, you have two options for how to proceed.
- Build the component using utility classes. Utilities can be used to help implement the component without committing new CSS.
- Build the component locally within the application.