2

The theme I'm using for my website has two different badge versions: filled and outline (like the image below).

My question is:

Should I mix these styles at the same page/theme, or should I use only one style for consistency to avoid mixing these styles? Is there any design system good practices documentation about it?

enter image description here

Improve this question

1 Answer 1

Reset to default
5

Should I mix these styles at the same page/theme, or should I use only one style for consistency to avoid mixing these styles?

I would suggest to use one styling in your theme or page unless you ask user to switch between different styling like dark mode or light mode. Doing this will not increase the cognitive load on user to wonder if there is any hidden meaning for differently styled badges.

Is there any design system good practices documentation about it?

The reference guideline to this would be a Heuristic of Usability upon which many design systems are built. Refer to 10 Usability Heuristics for User Interface Design. The fourth heuristic talks about consistency and standards.

Improve this answer

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