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.


Spacing units

Spacing units are based on multiples of 8 to maintain a consistent rhythm when applied to margins, padding, and other dimensions.

Why multiples of 8?

The number 8 is easily broken down into smaller measurements before it approaches sub-pixel units. Additionally, many popular screen sizes are also divisible by 8.

Spacing tokens

The VA follows the USWDS spacing unit tokens and then adds additional semantic tokens.


Token Value Example
vads-spacing-0 0
vads-spacing-0p5 4px
vads-spacing-0p25 2px
vads-spacing-1 8px
vads-spacing-1p5 12px
vads-spacing-1px 1px
vads-spacing-2 16px
vads-spacing-2p5 20px
vads-spacing-3 24px
vads-spacing-4 32px
vads-spacing-5 40px
vads-spacing-6 48px
vads-spacing-7 56px
vads-spacing-8 64px
vads-spacing-9 72px
vads-spacing-10 80px
vads-spacing-15 120px


Token Value
vads-forms-spacing-vertical-stack-default vads-spacing-vertical-stack-l
vads-spacing-inset-l vads-spacing-4
vads-spacing-inset-m vads-spacing-3
vads-spacing-inset-s vads-spacing-2
vads-spacing-vertical-stack-default vads-spacing-vertical-stack-s
vads-spacing-vertical-stack-l vads-spacing-4
vads-spacing-vertical-stack-m vads-spacing-3
vads-spacing-vertical-stack-s vads-spacing-2

Using the spacing units

In order to keep spacing consistent throughout, it is recommended you favor using the units functions instead of hard coding pixels (or relative units) for margins and padding.

In order to access the spacing tokens in your project, you will need to import the base files into your project. Here is how this site is doing that.

There are two ways of using the spacing tokens in your code.

Output CSS as REM units

.foo {
  margin: units(5);
  padding: units(2.5);  

will compile to:

.foo {
  margin: 4rem;
  padding: 2rem;

Output CSS as PX units

.foo {
  margin: units-px(5);
  padding: units-px(2.5);  

will compile to:

.foo {
  margin: 40px;
  padding: 20px;
Edit this page in GitHub (Permissions required)
Last updated: Jan 29, 2024