Proximus design systemDevPlease don't forget to read Usage part of each element.
Text colors
expiry date: 30/04/2021
Text color is crucial to help users understand visually the value of the text
Default body text
The color of the body text is a specific black value for the default/positive mode and white for the negative mode.
Positive mode
Negative mode
Small text
A specific color is defined for content of lesser importance or to provide additional information to a product. Please also use a smaller font size for that kind of content (size 3)
Positive mode
Negative mode
Promo colors
Promo text color is depending of the modes/themes and can only be used for small promotional content.
The promo code use uppercase, it's an exception.
Positive mode
Negative mode
Promo color text on purple background is not accessible. Always prefer white color text on purple background instead of pink/promo text color.
Status colors
Status text colors have been defined for each default theme and should be used through all the segments. Those colors are defined to give specific message to the users.
Success status
Positive mode
Negative mode
Warning status
Positive mode
Negative mode
Error status
Positive mode
Negative mode
Status colors on purple background are not accessible, so these colors can't be used on this background color.
States colors
Specific colors are defined for the states.
More info about the statesHeadings colors
Specific color rules are defined for headings.
More info about the headingsOverview
Font color should be carefully considered, with legibility and accessibility as paramount concerns. Keep type color neutral in running text.
Best practices
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Do
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dont
Text is not enough readable due to a lack of contrast.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Do
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dont
Text is not enough readable due to a lack of contrast.
Contrast is the most important consideration
Using various forms of contrast is the most important consideration when making user-friendly color and interface choices. Awareness of standards and best practices is the key to accessible color selection.
The color families in the Proximus palette allow the usage of differents values. Black text is WCAG AA accessible on some colors and white text is accessible on others regardless of the increments.
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Success criterion 1.4.3 Contrast
Use black font color on these colors:
AA
Purple7
AA
Purple6
AA
Purple4
AA
Purple2
AA
Purple1
AA
Black6
AA
Black2
AA
Grey
AA
Grey6
AA
Grey4
AA
Grey2
AA
Grey1
AA
Magenta
AA
Orange
AA
Blue
AA
Turquoise
AA
Green
AA
Blue4
AA
Blue2
AA
Blue1
AA
Turquoise4
AA
Turquoise2
AA
Turquoise1
AA
Green4
AA
Green2
AA
Green1
Status colors - Positive mode
AA
Warning background
Use white font color on these colors:
AA
Purple
AA
Black
AA
Black9
AA
Black8
AA
Black7
AA
Promo background
Status colors - Positive mode
AA
Success background
AA
Error background
Use black font color on these colors:
Status colors - Negative mode
AA
Success background
AA
Warning background
AA
Error background
Define the text color
The color of the body text is defined by css for the light theme. For the dark theme, add the rs-txt-c2
class on the element.
To change the color of a text, add the color class on the element.
Example rs-txt-primary
Lorem ipsum dolor sit amet...
Body text colors
rs-txt-c1
Negative version
rs-txt-c2
Small text colors
rs-txt-details
Negative version
rs-txt-details-neg
.rs-neg > .rs-txt-details
Promo colors
rs-txt-promo
rs-txt-code-promo
Negative version
rs-txt-promo-neg
rs-txt-code-promo-neg
.rs-neg > .rs-txt-promo
.rs-neg > .rs-txt-code-promo
Status colors
rs-txt-error
rs-txt-success
rs-txt-warning
rs-txt-unlimited
Negative version
rs-txt-error-neg
rs-txt-success-neg
rs-txt-warning-neg
rs-txt-unlimited-neg
.rs-neg > .rs-txt-error
.rs-neg > .rs-txt-success
.rs-neg > .rs-txt-warning
.rs-neg > .rs-txt-unlimited
States colors
Please refer to States article.
Competitors and social media colors
rs-txt-ce1
rs-txt-ce2
rs-txt-ce3
rs-txt-ce7
rs-txt-cfb
rs-txt-ctwit
rs-txt-cyou
rs-txt-clin
Deprecated
The colors below are deprecated and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.
Text color
rs-txt-pp1
Text hover
rs-txt-hover-c2