Signal

v1.2

Signals are programmatic recommendations to help customers make more informed decisions.

CSS
Marko
React

Considerations

Clear

Signal titles are short and direct, making the message clear at a glance without needing additional context.

Consistent

Signals appear in familiar places throughout the experience.

Trustworthy

Clear, consistent, and infrequent use of signals helps build trust in their message.

Anatomy

Title
Container

Properties

Title

Required. Titles create urgency and motivate action. Focus on scarcity, time limits, popularity, value, or newness.

Use all caps for the visual treatment
Write in sentence case for screen readers
No articles, prepositions, or punctuation
Aim for 1-3 words

Use default signals from the Signals Dictionary. For new strings, book Design System office hours to share your use case.

An item tile with a signal above the item title. The title of the signal is “GREAT PRICE”.

Color

Signals use color in combination with titles to convey added meaning. Blue indicates trust, green signifies recency, and red represents time-sensitive or urgent information.

Behavior

Frequency

Signals should highlight items to assist customers in making quick, informed decisions. Remember that the system automatically places items and badges. While we can't always predict how many signals will appear on a page or in close proximity, it's ideal to aim for a ratio of 1:5—one signal per five items when possible.

A grid of item tiles. Out of the 8 item tiles, only two have signals.

Text overflow

To enforce brevity, titles truncate if they extend beyond the width of the item tile container.

An item tile with an extra long signal title. The title truncates with “...”

Screen sizes

Small

The signal ratio can be adjusted according to the content density in view. Aim for one or two signals in view when possible.

Medium and large

Aim for the 1:5 ratio—one signal per five items on medium and large screens when possible.

A medium-sized search results page with signals in the 1st tile in the top row and 2nd tile on the bottom row.

Best practices

Placement

Do keep the signal in a consistent location above the item’s title.

Don’t relocate the signal, such as placing it under the price. This interferes with the hierarchy of the content.

Frequency

Do use signals sparingly to highlight certain products and help the user make a decision.

Don’t overload results with signals. This could nullify their message and cause customers to ignore them.

Interaction

Use signals as straightforward visual elements designed to assist in decision-making.

Don’t use a tip on a signal, as there’s no indication that an element of this type is intended for interaction.

Styling

Do style signal titles in uppercase type.

Don’t alter the type casing of signal titles.

Do follow the semantic color strategy for signals.

Don’t update signals to new, unapproved colors.

Do use the outlined signal design.

Don’t fill signals or add effects.

Do use a 100% corner radius on the container.

Don’t alter the shape of the container.

Content

Do use the standard text strings that are readily available for signals in the “Signals on Signals Service” tab of the Signals Dictionary.

Don’t create your own text strings. If a new string is needed, please sign up for Design System office hours to share your use case and reach out to Kate Walker for content support.

Specs

Spec for a signal pill. The height is 16px with 8px of padding on the left and right of the title.