Badge sizes
There are 3 available sizes, small, medium & large.
Large
Large
Medium
Medium
Small
Small
Badge variants
There are 8 different colors available. (2 more will be added in the future: Lemon and Jeans Blue )
Dark Brown
Dark Brown
Yellow
Yellow
White
White
Olivine
Olivine
Turquoise
Turquoise
Bright Blue
Bright Blue
Lila
Lila
Watermelon
Watermelon
Anatomy
A. Text label
B. Background color
Behaviour
Use respective colour as badge colour
Use the shade of the colour that you use as background or highlight colour.
Do
Don't
Functional colour consistency
Use the same colour in a page or flow for the same functional badges.
Do
Don't
Badges on secondary colours
When placing badges on coloured backgrounds, only use primary colours, such as yellow, white, lemon or dark-brown for the biggest contrast. Don’t mix badge and background colours.
Do
Don't
Yellow for customer price
We only use the yellow badge to highlight the customer prices. Don’t use any other colour than yellow for ‘customer price’. Or don't use the yellow badge for other purposes.
Do
Don't
Don't display multiple badges
Badges are meant to offer quick context about what category, status, or meaning an item is associated with. If your design requires multiple badges, consider using regular text metadata and reserve a single badge for only the most important status, category, or meaning instead.
Only use short copy in a badge
A badge is used to highlight a particular aspect or UI element. Keep the text short. It is not possible to have two lines of text in a badge.
