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: 01/01/1601 01:00:00

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: 01/01/1601 01:00:00

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.

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.

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:

Purple7

Purple6

Purple4

Purple2

Purple1

Black6

Black2

Grey

Grey6

Grey4

Grey2

Grey1

Magenta

Orange

Blue

Turquoise

Green

Blue4

Blue2

Blue1

Turquoise4

Turquoise2

Turquoise1

Green4

Green2

Green1

Status colors - Positive mode

Warning background

Use white font color on these colors:

Purple

Black

Black9

Black8

Black7

Promo background

Status colors - Positive mode

Success background

Error background

Use black font color on these colors:

Status colors - Negative mode

Success background

Warning background

Error background

last modified: 01/01/1601 01:00:00

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

Negative version

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

Text hover

Lorem rs-txt-hover-c2