element

Spacing

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

Design Complete

Progression

 
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

Guidelines

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.