Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Text colors

See deprecated code
expiry date: 30/04/2021

Text color is crucial to help users understand visually the value of the text

last modified: 13/12/2021 16:40:03

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
Text color
Body text
#0A0A0A
Negative mode
Text color
Body text
#FFFFFF

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
Text color
Small body text
rgba(0, 0, 0, 0.56)
Negative mode
Text color
Small body text
rgba(255, 255, 255, 0.64)

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
Text color
Promo text
#DE0037
Negative mode
Text color
Promo text
#FF4371
Promo color on purple background

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
Text color
Success text
#008000
Negative mode
Text color
Success text
#2AD12A

Warning status

Positive mode
Text color
Warning text
#A55D00
Negative mode
Text color
Warning text
#F5AB35

Error status

Positive mode
Text color
Error text
#B30000
Negative mode
Text color
Error text
#F22613
Status colors on purple background

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 states

Headings colors

Specific color rules are defined for headings.

More info about the headings
last modified: 13/12/2021 16:40:03

Overview

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.

Accessibility

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

last modified: 29/07/2022 16:25:04

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-purple

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


Promo colors

rs-txt-promo

rs-txt-code-promo

Negative version

rs-txt-promo-neg

rs-txt-code-promo-neg


Status colors

rs-txt-error

rs-txt-success

rs-txt-warning

Negative version

rs-txt-error-neg

rs-txt-success-neg

rs-txt-warning-neg


States colors

Please refer to StatesNew window 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

EXPIRY DATE: 30/04/2021

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

Lorem rs-txt-c3
Lorem rs-txt-c4
Lorem rs-txt-blue
Lorem rs-txt-dark-blue
Lorem rs-txt-turquoise
Lorem rs-txt-green
Lorem rs-txt-yellow
Lorem rs-txt-red
Lorem rs-txt-orange
Lorem rs-txt-magenta
Lorem rs-txt-almond
Lorem rs-txt-ps1
Lorem rs-txt-ps2
Lorem rs-txt-grey
Lorem rs-txt-pt1
Lorem rs-txt-pt2
Lorem rs-txt-pt3
Lorem rs-txt-pt10
Lorem rs-txt-purple1
Lorem rs-txt-purple6
Lorem rs-txt-pp1
Lorem rs-txt-pp2
Lorem rs-txt-ps3
Lorem rs-txt-tr2
Lorem rs-txt-black4
Lorem rs-txt-black6
Lorem rs-txt-black9

Text hover

Lorem rs-txt-hover-c2
Lorem rs-text-hover-parent
Lorem rs-text-hover-child-pp1
Lorem rs-text-focus-parent
Lorem rs-text-focus-child-pp1