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.

Epic

The Proximus offer for youth.

last modified: 30/09/2021 11:10:06

Overview

Epic's offering includes 3 product categories, which are differentiated by the use of the secondary colours:

  1. Mobile offers
    epic beats and epic stories
  2. Pack offer
    epic combo
  3. Internet offer
    epic kot

Colored boxes

Another specificity of the epic pages is the use of secondary colors as box background color.
You can use these colored background boxes two ways:

  1. Highlight of key words
    You can play around with the content by adding background color to certain words. Although for accessibility, you can only use white text on purple or blue background color. The text should always be white and therefore isn’t accesible on orange, pink or green.
     
  2. Decorative squares
    You can add small colored squares in your pages. You can use any of the Epic colors. They should ideally be the same size thoughout the page. You can only use squares or rectangles that are the size of two squares next to each other.
     

Visuals

Pictures

You can darken the image a bit. Focus the attention on the subject by adding black gradients.

Products

You can highlight a product by adding a subtle purple or grey gradient behind it.


Branded components

All the components on negative mode can be used in the Epic interfaces and some components are specifically customize to reflects the epic brand.

Accordions

Explore the accordions article to learn more.

Selectable boxes

Explore the Selectable boxes article to learn more.

last modified: 30/09/2021 11:10:06

Types

  1. The block version
    This version corresponds to the epic product identity and will be used as illustrative element. On the website, it is practically never used because it takes too much space. This block version is not a component so it is not usable on the web.
  2. The horizontal version
    This version is much smaller and is used everywhere on the site. This version was made so that it wouldn’t take as much height as the block version.

Usage and sizes

Used as html element

When displaying in html, the reference element of the logo will always be the name of the product.

Vertically

For instance, when as an h1:

  • The beats has the h1 desktop size
  • It is aligned horizontally to the e of epic
  • Vertically it is aligned on a 0.1 ratio vertically on the epic text
  • The ratio for the epic font-size is 0.72
  • The padding inside the blue box around the text is a 0.2 ratio on the x-height
Horizontally

For instance, used as h2:

  • beats has h2 desktop size
  • It is aligned vertically on the top of the x-height of epic
  • It has a left padding of 0.2 ratio
  • The ratio for the epic font-size is 0.72
  • The padding inside the blue box around the text is a 0.2 ratio on the x-height



Used in your designs

Download Illustrator file

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

Primary colors

The main colors that define the Epic identity are black, purple and dark blue. Those colors can be used as squares of colors or background colors.

Black

Black should be the prominent color. It is not only used for the background color on the pages but also on visuals.

Black
#000000
Purple

Purple is the brand identifier of Proximus and is also a part of Epic identity.

Purple
#5C2D91
Dark blue

Blue is the Epic main color. This color can't be used for text color.

Dark blue
#0073CF

Secondary colors

The secondary colors contribute to the epic look and feel. They can make it more dynamic and fun but they should be used in moderation. They can only be used as squares of colors as decorative.

Magenta
#FF418C
Orange
#F39200
Turquoise
#66D2CC
Green
#81C747

Background colors

The differentiator of this product is the black universe associated with it. Therefore, all epic pages have a black background, and elements used black increments or opacities as background color.

Backgrounds colors

Black
#000000
Black 9
#252525
Black 8
#464646
Black 7
#636363

Opacities

These are the primary background shades for informative frames without emphasis.

W1
rgba(255, 255, 255, 0.08)
W2
rgba(255, 255, 255, 0.12)
W3
rgba(255, 255, 255, 0.16)

Clickable frames

These are the background colors used for clickable frames with emphasis. These colors are used in secondary buttons and some others clickable components.

W4
rgba(255, 255, 255, 0.24)
last modified: 17/03/2022 12:00:04

Logos - Block version

epicbeats


Logos - Horizontal version

Add rs-logo-epic class on the heading, for example an <h1> , that best suits your location on the page.

epicbeats

epicstories

epiccombo

epickot


Smaller version

To reduce the size of the logo, choose the heading that best suits your location on the page.

epicbeats


Text colors

The rs-txt-dark-blue is used as text color.

epic


Background colors

rs-bg-dark-blue

Other background colors

Others background from the default theme can also be used, please refer to Backgound colorsNew window article.