I work in an e-commerce platform and we recently had a lively discussion about the variations of our alert message.

Would you agree that it is useful to have different versions of an alert or would you say that it is inconsistent to have multiple variations.

Use case 1

  • Warning message on gray background, with a strong border to provide sufficient contrast with the background. (Better accessibility)
  • 14px on smaller screens, 16px on large screens.

Use case 2

  • Warning on top of page content. Without border (background color has enough contrast)
  • 14px on smaller screens, 16px on large screens

Use case 3

  • Alert inside product and other cards. Without border (background color has enough contrast).
  • 12px on smaller screens, 14px on large screens.

Use case 1 or 2 can appear together with use case 3.

Wdyt should the alert for consistency have always a border? I don't think so, since we don't want to have too much attention for use case 2 and 3, as the contrast on the white background is sufficient. I think it makes sense to have a visual hierarchy for the alert message. The large version is on top of the page content and the small version for secondary information inside cards.

enter image description here

  • Hi. Would you be able to show us screen shots? I think I understand the concepts, but it would be helpful to see Use Case 3 in particular. Thanks.
    – Izquierdo
    Commented Sep 11, 2023 at 22:45
  • 1
    Hi, thanks for your question - i added a screenshot.
    – Helge
    Commented Sep 12, 2023 at 6:29

1 Answer 1


The answer is in branding.

Having the company logo in a color that works on a white background but presents little contrast on an alternative color background:

enter image description here

If the solution is to modify the style of the logo by adding a stroke, as the question says, the branding is positioned more in inconsistency than in a valid design decision.

enter image description here

In these cases, instead of creating different styles, the total color palette is usually established, with the corresponding adaptation to each used background:

enter image description here

A color adaptation while maintaining the same palette is much less relevant on a perceptual level than a change in style. Or, a slight perceptual change allows the logo to maintain the same corporate personality.

I would recommend studying all the colors in detail and establishing a base pattern regarding use. For example:

enter image description here

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.