USAJOBS defines a nonlinear, geometric progression of spacing to provide a consistent pattern.

Design Complete


XS: 0.25rem/2.5px
Base: 0.5rem/5px
S: 1rem/10px - $size-base * 2
Default: 1.5rem/15px - $size-base * 3
SM: 2rem/20px - $size-base * 4 (use sparingly if at all)
M: 3rem/30px - $size-base * 6
L: 4.5rem/45px - $size-base * 9
XL: 6rem/60px - $size-M * 2
XXL: 7.5rem/75px - $size-default * 5


When to use
  • All designs and implementations using the USAJOBS design system MUST align to this spacing progression in order for the inter-relationships of components to operate properly.
  • The SM (2rem/20px) is an exception that we're trying to remove. Any instances that can be removed should be replaced by either the default or M size.