Spacing & Increments

Spacing Guidelines & Usage

The USPS Digital Style Guide uses spacing units based on multiples of 4 pixels.

Padding is the spacing inside a component around the content. For example, in a button component, the text label should have 20px of padding to the left and right and 12px above and below.
Margin is the spacing outside of a component that separates it from other components. For example, there should always be a margin of 32px between two buttons, or between a button and a form field.

These usage notes and guidelines aren't exhaustive.

Spacing Variable Name	Spacing Variable Size	Spacing Variable Usage Notes and Guidelines
USPS-spacing-4	4 pixels	Space between asterisk (*) and text field label for required field
USPS-spacing-8	8 pixels	Spacing on the left and right of a mobile modal
USPS-spacing-12	12 pixels	Space above and below the text in buttons
USPS-spacing-20	20 pixels	Left and right text padding in buttons
USPS-spacing-24	24 pixels	Spacing between cards in a card grid Spacing between the bottom of the global header and the start of page content
USPS-spacing-32	32 pixels	Spacing between buttons Spacing between form field elements
USPS-spacing-48	48 pixels	Generally used as the distance between page content sections
USPS-spacing-80	80 pixels	The space between the end of page content and the top of the footer component

USPS border radius increments are based on multiples of 4 pixels.

Border Radius Variable Name	Border Radius Variable Size	Border Radius Variable Usage Notes and Guidelines
border-radius-xsm	4 pixels	Button corners Form field text and text area input field corners
border-radius-sm	8 pixels	Used for images with rounded corners


Instance of xsm corner radius for text input fields	Instance of xsm corner radius for buttons

Instance of sm corner radius for images with rounded corners