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.


Implementing design work

When a designer hands off work, it is vital to work through potential implications that design may have on the Design System.

Are there any new variations on components? Are there any new components not present on this site? For more on that process, read about how to contribute.

Implementation rules

In general, some rules for implementing design work include:

  • Use spacing units instead of hard-coding pixel values for margins and padding.
  • Use Sass variables for colors instead of hex codes.
  • Discuss reusability of new design components and where is the most appropriate home for CSS and JS.
  • Use the CSS Library naming convention.
  • Do not use ID selectors

Use design system utilities

Sometimes you will need to modify certain default properties of a component depending on how it scaffolds with nearby elements. Use utilities instead of writing new CSS.


Use utility classes to override default properties. This allows components to maintain a well-defined baseline of properties.

<div class="a-container">
  <div class="a-component vads-u-margin-top--3"></div>


Don’t change CSS properties based on a container or other context. This makes baseline properties for components unclear.

<div class="a-container">
  <div class="a-component"></div>
.a-container .a-component {
  margin-top: 24px;
Edit this page in GitHub (Permissions required)
Last updated: Feb 20, 2024