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: 09/11/2022 17:05:05

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.

Vertically
From top to bottom
Horizontally
From left to right
Diagonally
From bottom left to top right
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.

last modified: 09/11/2022 17:05:05

Default and light gradients

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

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

There’s two different of gradient backgrounds:

Default gradient

Use rs-bgt-#
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

Use rs-bgtl-#
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 ...

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