Elevation ()

Chameleon makes use of a list of predefined elevation values that simulate a three-dimensional stack above the surface of an interface. The relative distance between two surfaces is measured along the z-axis, where the degree of elevation can be enhanced with shadows.

UI elements are depicted on a relative distance between each other. To concistenly place them on top of each other, every element makes use of a z-index order. This emphasizes a layering effect and hierarchy in our interfaces.

Shadows can increase the relative depth for a given z-index order. An element with a smaller and sharper shadow indicates that the surface is closer to the surface behind it. Larger and softer shadows indicate more distance.