Button & Links

Buttons

All Call To Action (CTA) buttons used on USPS^® digital properties should follow our universal graphic standards to maintain consistancy and hierarchy throughout USPS.com^®. There are four types of CTAs:

Individual CTA types are defined below. First, the following formatting requirements apply to all CTA buttons.

---

CTA Specifications

Display: left-aligned on desktop, centered on mobile, additionally:

• Multiple desktop CTA align horizontally
• Multiple mobile CTAs align vertically

Labels: use concise CTAs:

• Avoid using more than three words
• Start all CTAs with an action verb
• Use Title Case

Multiple CTAs: on screens where there are multiple calls to action:

• All CTAs are the same width
• Adjacent CTAs: primary first, then secondary
• Adjacent/desktop: list CTAs horizontally
• Adjacent/mobile: list CTAs vertically

Height: 44px:

• Plus 30px margins Top/Bottom

Width: variable based on content:

• Longest CTA determines width of all CTAs on that screen

Minimum width:

• Static: 170px
• Tools/applications: 120px

Minimum padding:

• Left/Right, 20px

---

Primary CTAs

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 CTAs 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 CTA per screen (though exceptions exist)
• Primary CTAs are active; in cases where there is a dependency or error, selecting the CTA will trigger appropriate error messaging

---

Secondary CTAs

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 CTAs:

• Appear to the right of or underneath Primary CTAs
• Can appear as the only CTA on a screen
• Are active; in cases where there is a dependency or error, selecting the CTA will trigger appropriate error messaging

---

Inactive CTAs (Limited Use)

As a rule, Primary and Secondary CTAs on USPS.com are active. In cases where there is a dependency or error, selecting the CTA 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 CTAs (Limited Use)

These CTAs are used for adding items to a shipping or shopping cart and completing other ecommerce transactions.

Use of the ecommerce CTA visual treatment is strictly limited. While visually distinct, the ecommerce CTA visual treatment cannot be used for visual impact outside of point-of-purchase transactions.

---

Ecommerce Icon CTAs

The Postal Store makes used of icons within CTAs. While this practice is not forbidden on the wider USPS.com domain, its use should be limited to ecommerce applications, specifically point-of-sale CTAs. Ecommerce Icon CTAs require both white (#FFFFFF) and USPS Digital Green (#218748), correctly sized versions of the icon being used. Below are examples of Postal Store CTA 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.

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 CTA buttons
• Ecommerce CTA 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 CTAs or links are included, the banner container div link maps to the primary CTA
• Secondary CTAs 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 retain their USPS Digital Blue (#333366) rather than using USPS Digital Blue (#333366). Examples:

Linked <H2> Header

Linked <H3> Header

Linked <H4> Header

Linked <H5> Header

---

Icon Combo CTAs (Limited Use)

These limited-use icon/CTA combos force the user to select between mutually exclusive application flows.

Icon Combo CTAs include a default and hover/selected state to further aid in making a user's selection unambiguous. On mobile, icon CTAs are used.