Back to overview

Backgrounds and layers

Backgrounds

Backgrounds
TypePropertiesUsage
1. Basic background with gradientGradient from #aec8d2 to #ffffffBackground gradient
2. White page background with shadow#ffffffPage background
3. Background for search input field#f2f4f6Search input field
4. Main navigation backgroundGradient from #ffffff to #eceff2Navigation
5. Stage background

1 pixel border #f2f4f6;

Gradient from #ffffff to #eceff2

Stage background
6. Teaser background

1 pixel border #f2f4f6;

Gradient from #ffffff to #eceff2

Teaser box with gradient

Layers

Layer

Example of a layer with shaded background

A layer has a protective area of 16 pixels on all sides. The close button has a distance of eight pixels from the bottom and right side of the layer. The layer has a shadow of five pixels. It has a distance of three pixels from the layer itself. When the layer is opened the page background is covered with a shadow.

Properties:

  • Layer border: #ccd0d2
  • Background: #000000, Opacity 35 %

 

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines