Depth, Elevation and Shadows

Athough in recent years “flat” design has taken over the mobile market, KDE has continued to use shadows as a means to provide depth and elevation to elements on the screen.

KDE realizes that elevation and depth perception are intrinsic parts of working with computer and mobile interfaces. As you create applications, please be sure to use shadows in the style detailed below.

Shadows should be horizontally-centered, but vertically offset, to provide the illusion that a light source is over the top of the screen. This would, in general, follow your eye position relative to the screen you are working on.

The default shadow details should be:

  • Shadow color: Shade Black (see Breeze Colors)
  • Shadow opacity: 35%
  • Window shadow size: 64px
  • Menu & tooltip shadows size: 16px
Example for a shadows of window and menu

REMINDER: Shadows inside apps should use a size of 16px or below, so as not to compete with the window shadows.