Elevation
Elevation is the relative distance between two surfaces along the z-axis. D-system indicates elevation through the use of background colours: when the degree of elevation between surfaces isn't crucial, and shadows: when the degree of elevation between surfaces needs to be clear.
Good elevation affordance is helpful in setting user expectations in terms of how elements behave during scrolling, or how elements sit on a page.
See the style tab for more
Elevation through shadow
Shadows can also be used to indicate elevation. Lower elements will have a less diffuse, more defined shadow (or no shadow at all), while higher elements will have larger and more diffuse shadows.
The shadow styles in D-system are a combination of 2 shadows. This is done to create a keyline effect without relying on borders around the element as using a border can sometimes make the element look blurry against certain background colours.
Normal Y Axis:
Inverted Y Axis:
Elevation through colours
Colour is often used to group elements and create visual content sections. When the degree of elevation between elements does not need to be clear at first sight, colour can be used to illustrate which elements overlap during scroll.
Elevation through backdrop color system
Colors in the neutral gray palette are layered on top of each other to create depth and spatial associations. The layering model defines the logic of how colors stack on top of each other in a UI when using the Depot themes.
In the light themes, layers become one step darker with each added layer and reverse.
In the dark themes, layers become one step lighter with each added layer and reverse.
Light backdrop colors for texts and links
Dark backdrop colors for texts and links
Colors are layered on top of each other to create depth and spatial associations. The layering model defines the logic of how colors stack on top of each other in a UI when using the Depot themes.
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Base
Elevation through modals
Modals overlay the top of their parent page but they have their own context. Think of a modal as a reset of the z stack and start from 0 when mapping out where each child element goes.
