Proximus design systemDevPlease don't forget to read Usage part of each element.
Epic
The Proximus offer for youth.
Overview
Epic's offering includes 3 product categories, which are differentiated by the use of the secondary colours:
-
Mobile offers
epic beats and epic stories -
Pack offer
epic combo -
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:
- 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.
- 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.
Types
-
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. -
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
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.
Purple
Purple is the brand identifier of Proximus and is also a part of Epic identity.
Dark blue
Blue is the Epic main color. This color can't be used for text color.
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.
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
Opacities
These are the primary background shades for informative frames without emphasis.
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.
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
Others background from the default theme can also be used, please refer to Backgound colors article.