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.

Gradients

See deprecated code
expiry date: 30/04/2021

The gradients are our main colour application and one of the most recognizable assets of our identity.

last modified: 21/12/2021 11:35:04

Default gradients

These gradients are composed of 80% of purple and 20% of a secondary color.

As the usage of secondary colors is defined by segment to follow brand identity, the gradients follow the same rule.

Residential

Purple to Red
#5C2D91 ➜ #EE2E5D
Purple to Magenta
#5C2D91 ➜ #FF418C
Purple to Orange
#5C2D91 ➜ #F39200
Purple to Blue
#5C2D91 ➜ #00BCEE
Purple to Turquoise
#5C2D91 ➜ #66D2CC
Purple to Green
#5C2D91 ➜ #81C747

Business & Enterprise

Purple to Blue
#5C2D91 ➜ #00BCEE
Purple to Turquoise
#5C2D91 ➜ #66D2CC

Light gradients

Light gradients are considered as a secondary type of gradient. These gradients are composed of 60% of purple and 40% of a secondary color.

Residential

Purple to Red
#5C2D91 ➜ #EE2E5D
Purple to Magenta
#5C2D91 ➜ #FF418C
Purple to Orange
#5C2D91 ➜ #F39200
Purple to Blue
#5C2D91 ➜ #00BCEE
Purple to Turquoise
#5C2D91 ➜ #66D2CC
Purple to Green
#5C2D91 ➜ #81C747

Business & Enterprise

Purple to Blue
#5C2D91 ➜ #00BCEE
Purple to Turquoise
#5C2D91 ➜ #66D2CC


Forbidden gradients

Gradients here above are the only ones allowed. All others gradients are forbidden:

  • A gradient between two secondary colors or two primary colors is not allowed.
  • Secondary colors are used at 100% in gradients, lighter variations (blue2, turquoise4,...) of these colors should never be used instead.


Directions

Gradient can follow four possible directions with the goal to create depth in communication and give brand recognition depending on the color chosen and the scenario in question.

A direction is chosen by considering how it complements the pictures, text, sub-headlines, composition and overall communication in question.

  1. Vertically
    From top to bottom
  2. Horizontally
    From left to right
  3. Diagonally
    From bottom left to top right
  4. Diagonally
    From top left to bottom right

Text on gradient

Always use the default gradient if you have text written on it. The text should always be on the purple part of the gradient to ensure readibility and accessibility.

Do
Text on the purple color of the default gradient.

Don't
Direction bottom right to top left is forbidden due to the text on the non accessible secondary color.

Don't
Text on the secondary color of the light gradient.

Don't
Text on the secondary color of the light gradient.


Theming

Epic

A specific gradient exist for Epic brand.

Epic documentation

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

Default and light gradients

To create a gradient background, use this image to decide from which side your gradient will come.

8
1
2*
7
 
3*
6
5*
4*

*Those gradients are deprecated and should no longer be used.

There’s two different of gradient backgrounds:

Default gradient

  1. Use rs-bgt-#
  2. Followed by number of the side you want to the color come.

Ex: rs-bgt-1 (default gradient from top to bottom)

rs-bgt-1
rs-bgt-6
rs-bgt-7
rs-bgt-8

Light gradient

  1. Use rs-bgtl-#
  2. Followed by number of the side you want to the color come.

Ex: rs-bgtl-8 (light gradient from top left to bottom right)

rs-bgtl-1
rs-bgtl-6
rs-bgtl-7
rs-bgtl-8



In addition with a flat background color, the gradient is placed above it and allows you to obtain all kinds of combinations.

Here's an example of a gradient:

Lorem ipsum ...


Theming

Epic

Lorem ipsum ...


Deprecated

EXPIRY DATE: 30/04/2021

The gradients and directions 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.

Default gradient

rs-bgt-2
rs-bgt-3
rs-bgt-4
rs-bgt-5

Light gradient

rs-bgtl-2
rs-bgtl-3
rs-bgtl-4
rs-bgtl-5