Colours

SDX defines a structured colour system that helps teams create clear hierarchies, support usability, and deliver a consistent Swisscom brand experience across digital products.

Colour Scales explained

Each colour in SDX unfolds across ten distinct hues, building a complete scale from 50 to 900. The progression begins with soft, airy tints at 50 and deepens gradually toward the rich, saturated tones of 900.

The palette is designed with accessibility in mind. The lighter half of the scale (50–500) is crafted to provide balanced backgrounds for the darkest hue (900) of the same colour scale, while the darker half (600–900) is suited to work as backgrounds with enough contrast for white content.

In practical use, the lightest hues (50 and 100) often serve as subtle background colours, creating space and calm.

The mid-range hues (200–700) bring structure and definition to borders, surfaces, and UI components.

Finally, the deepest tones (800 and 900) anchor the design, adding weight and clarity through typography, icons, and foundational page elements.

This scaling system ensures consistency and flexibility, giving every colour a defined role and a harmonious relationship across the interface.

Base Colour Scales

The complete list with all colour gradations.

Please use the primarily listed tokens as defined in “Colour Usage”. This list serves as a starting point for further processing. The base color values should only be used to construct functional and component/pattern design tokens, never used directly in code.

Blue

color / blue

#e8f1ff

100

#ddebff

200

#c3dbff

300

#9bc3ff

400

#7aafff

500

#4c93ff

600

#257efe

700

#0e6eec

800

#0445c8

900

#0036a7

Navy

color / navy

#f4f6ff

100

#eff1fb

200

#d2e0ff

300

#b4cafd

400

#9fb5e8

500

#758dca

600

#4e659e

700

#263a73

800

#001155

900

#040d33

Neutral

color / neutral

#ffffff

#f6f6f9

100

#f2f1f8

200

#dbdae1

300

#cecdd3

400

#b7b6bc

500

#8f8e94

600

#717177

700

#55545b

800

#3b3a3f

900

#222126

Iris

color / iris

#edefff

100

#e3e6ff

200

#ccd0ff

300

#b1b6ff

400

#9c9fff

500

#7e7aff

600

#7268ff

700

#6855fc

800

#573ce4

900

#430fc4

Orchid

color / orchid

#ffebfa

100

#ffdef7

200

#ffc9f2

300

#ffa6ec

400

#ff7fe8

500

#e64ace

600

#d235bc

700

#be19a9

800

#930082

900

#7b006d

Pink

color / pink

#ffeaed

100

#ffe1e5

200

#ffcbd3

300

#ffadbb

400

#ff8ca3

500

#fe427a

600

#f53773

700

#e32065

800

#ad194d

900

#870037

Turquoise

color / turquoise

#d3f6ff

100

#bbf1ff

200

#84e7ff

300

#56d4f1

400

#39bdd9

500

#00a3bf

600

#0091aa

700

#007c92

800

#006678

900

#004e5c

Green

color / green

#d7ffd2

100

#9eff94

200

#8bef81

300

#71d467

400

#5bbf53

500

#3fa337

600

#309728

700

#1b8712

800

#0d6f2c

900

#045300

Yellow

color / yellow

#fff7c9

100

#ffe595

200

#ffce32

300

#f1bf00

400

#cea300

500

#b69000

600

#a68300

700

#8f7000

800

#785e03

900

#5f4a02

Orange

color / orange

#fcece5

100

#fce4d9

200

#fecdb8

300

#fea985

400

#ff855a

500

#e65f2b

600

#db551f

700

#cf4a0c

800

#ba3e06

900

#892c01

Red

color / red

#feebe9

100

#fddeda

200

#ffc6bf

300

#ffa39a

400

#ff7b72

500

#ff544e

600

#f53738

700

#eb0505

800

#be0000

900

#8f000f

Light blue (#11AAFF) is currently not defined as a specific token or colour set in SDX.

SDX | Swisscom Digital Experience

SDX is a set of foundation, components, and guidelines for designing and building UI at Swisscom