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

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

last modified: 12/12/2023 16:10:12

Gradients by Business Units

To follow our brand identity guidelines, available gradient varie based on the respective Business Unit.

Residential

Default gradients

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

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

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.

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

Business

Black to Purple to Light purple
#000000 ➜ #5C2D91 ➜ #8D6CB2

Enterprise

Black to Purple
#000000 ➜ #5C2D91

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.

last modified: 12/12/2023 16:25:12

From primary color

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 gradient backgrounds:

Default gradient

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

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

Light gradient

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

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

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

Example of gradient

Lorem ipsum ...


From black color

Lorem ipsum ...


SE

Lorem ipsum ...

Lorem ipsum ...