Primary Buttons
These buttons are used for actions like opening an application, continuing to the next step in a process, saving or submitting a form, and completing a transaction:
They map to the primary use case for a given screen:
- Primary buttons should always appear first, on the left when in a horizontal row or on the top when buttons are stacked
- As a rule, there should only be one primary button per screen (though exceptions exist)
- Primary buttons are active; in cases where there is a dependency or error, selecting the button will trigger appropriate error messaging
Secondary Buttons
These buttons are used for supporting or optional actions like canceling a request, skipping a step, or returning to a prior
page. They are only used on USPS tools and applications, not on USPS.com static content pages. Secondary buttons:
- Appear to the right of or underneath primary buttons
- Can appear as the only CTA on a screen
- Are active; in cases where there is a dependency or error, selecting the button will trigger appropriate error messaging
Inactive Buttons (Limited Use)
As a rule, primary and secondary buttons on USPS.com are active. In cases where there is a dependency or error, selecting
the button will trigger appropriate error messaging.
However, there are certain tools and applications where exceptions to this rule are necessary. These exceptions are
granted on a case-by-case basis by USPS Digital Brand Marketing and in accordance with DSG governance. Contact
USPS Digital Brand Marketing team to request an exception.
Ecommerce Buttons (Limited Use)
These buttons are used for adding items to a shipping or shopping cart and completing other ecommerce transactions.
Use of the ecommerce button visual treatment is strictly limited. While visually distinct, the ecommerce button visual treatment
cannot be used for visual impact outside of point-of-purchase transactions.
Ecommerce Icon Buttons
The Postal Store makes use of icons within buttons. While this practice is not forbidden on the wider USPS.com domain, its use should be limited to ecommerce applications, specifically point-of-sale buttons. Ecommerce Icon buttons require both white (#FFFFFF) and USPS Digital Green (#218748), correctly sized versions of the icon being used. Below are examples of Postal Store buttons with icons.
Links
A variety of different link treatments are used on USPS.com depending on link type and destination:
- Header links
- Body text links
- Lists of links
- Banner and card links
Body Text Links
Body text links may appear within a block of text, end a block of text, or encompass an entire text block. The
body text specifications apply to all other link types unless noted otherwise. This is a
Body Text Link example.
Color: USPS Digital Blue #333366
Font: Helvetica Neue Bold
Active Link Decoration: Underline
Hover Link Decoration: No Decoration
Body text links inherit any relevant body text styling (e.g., an inline link within a bold or italic block of text
would inherit that bold or italic styling). Additionally:
- Free-standing links appear in Title Case
- Body copy (embedded) links may use Sentence or Title Case (contextual)
- Links should be clear, concise, and action-oriented
- Lead with an action verb whenever possible
- Tell users what to expect
- Fragments OK, no need for complete phrases
- Do not use links in error messaging (with the exception of the Alert Bar)
Banner Links
Banners use any of the following linking methods, depending on their design and context:
- Primary and secondary buttons
- Ecommerce buttons
- Lists of links
- Linked headings (<H2> or <H3>)
Despite using specific buttons and links, banners are sometimes entirely or partially clickable:
Hero Banners:
- The entire banner is clickable
- If multiple buttons or links are included, the banner container div link maps to the primary CTA
- Secondary buttons or links point to their specific locations
Promotional/Marketing Banners:
- Banner images may or may not be clickable depending on context and banner type
- Icons or other graphical elements should not be linked (unless a part of linking the entire banner container <div>)
Note: Some banners require alternative linking approaches. These exceptions are created by or approved at the discretion
of Digital Brand Management. Contact Digital Brand Management with any questions or before beginning work on any non-standard banner designs.
Linked Headings
When an <H2> to <H5> is linked, the heading adopts the text link underline active link decoration and no underline link decoration on hover. However, linked headings use USPS Digital Accent Blue (#3573B1) rather than USPS Digital Blue (#333366). Examples:
Icon Combo Buttons (Limited Use)
Icon Combo Buttons include a default and hover/selected state to further aid in making a user's selection unambiguous. On mobile, icon are used.
Step 1: Who is Moving?
Instance of desktop icon combo button (default)
Step 1: Who is Moving?
Instance of desktop icon combo button (selected)
