Spacing Unit Tokens

The NCIDS uses the U.S. Web Design System (USWDS) spacing units out of the box from USWDS. Their spacing unit tokens are based on multiples of 8px, with additional tokens for small sizes, named tokens for large sizes, and a more limited selection of negative tokens.

Applying Spacing Units for Designers

For more on how to apply spacing units in Figma, refer to our Figma Guide.

Spacing Tokens

The documentation below displays a target value in pixels, but the final output for tokens above 2px and below -2px is the eqivalent value in rem, which will vary depending on your project settings.

Note: Some units tokens come in two flavors: a numeric token (like 0.5 or -2) and a string token (like '05' or 'neg-2'). Utility classes use unquoted string tokens exclusively when they exist (like .margin-x-neg-2). Mixins and functions usually accept either, and we will note any exceptions.

1px

2px

0.5, '05'

4px

8px

1.5, '105'

1.5

12px

16px

2.5, '205'

2.5

20px

24px

32px

40px

48px

56px

64px

72px

80px

120px

'card'

160px

'card-lg'

240px

'mobile'

320px

'mobile-lg'

480px

'tablet'

640px

'tablet-lg'

110

880px

'desktop'

128

1024px

'desktop-lg'

150

1200px

'widescreen'

175

1400px

-1px, 'neg-1px'

-1px

-2px, 'neg-2px'

-2px

-0.5, 'neg-05'

-.5

-4px

-1, 'neg-1'

-1

-8px

-1.5, 'neg-105'

-1.5

-12px

-2, 'neg-2'

-2

-16px

-2.5, 'neg-205'

-2.5

-20px

-3, 'neg-3'

-3

-24px

-4, 'neg-4'

-4

-32px

-5, 'neg-5'

-5

-40px

-6, 'neg-6'

-6

-48px

-7, 'neg-7'

-7

-56px

-8, 'neg-8'

-8

-64px

-9, 'neg-9'

-9

-72px

-10, 'neg-10'

-10

-80px

-15, 'neg-15'

-15

-120px