Background colours and colour gradients support the visual structure of an interface by highlighting parts of a page. While they can help to organize content and make hierarchies visible, they should be mixed sparingly and only when really needed.
Please note:
- Background colours and gradients should support content, not outweigh it.
- Stay true to the colour scheme of your application (e.g. white on portal). Avoid using backgrounds on the whole view that aren’t in line with that.
- Colour gradients should be used sparingly. They are particularly suitable for hero areas, transitions or highlights, not for long text areas.
- Texts and primary interaction elements must always remain clearly legible.
- Do not use a Primary Button on a gradient background.
- To create hierarchy, remember that you can also use layer shadows.
Usage
Balanced
This core colourway is highly recognisable as Swisscom, balanced approach to how we apply the light and dark. In the digital channels, our main colour balance is centered around white (Light 01). Even when using a soft grey (Light 02 or 03) as the background colour, we ensure that we maintain the colour balance towards white by adding white elements on top. We use the gradient to punctuate through to reinforce the brand colours and make out communications feel distinctly Swisscom.
Attract
When we want to stand out, excite or immerse our audience in the Swisscom world, we leverage the energy and brightness of our dynamic gradients. This creates eye-catching, vibrant communications that capture the full spirit and closeness of our brand.
Entertain
We dial up the navy in moments when we need to make our experience feel more immersive.
Dos and don’ts
Only use the on this page defined colour tokens as background.
Do not use any other colours or base tokens as background.
Use the NEO gradients as backgrounds.
Do not use the light gradients as backgrounds in teasers.
Examples
