Foundation
Elevation
By using light, surfaces, and cast shadows, Svenska Spel UIs create an environment that evokes three-dimensional (3D) space. Material elements move horizontally, vertically, and at varying depths along the z-axis. In Digital Environment, depth is depicted by arranging elements along the positive z-axis extending towards the viewer.
In order to establish a consistent elevation order across all components, certain components should be positioned at higher elevations than others. The dynamic elevation offsets of all components should be default values. For example, dialogs always appear above other components.
Svenska Spel's elevation is heavily inspired by Material design made by Google.
Measuring elevation
Surface elevation is measured as the distance from one surface to another along the z-axis and provided as shadows (by default).
- One surface at 1dp elevation and another surface at 8dp elevation, as viewed from the front
- The difference in elevation between the two surfaces is 7dp, as viewed from the side.
Surfaces at the same elevation can appear differently when other surfaces are behind them.
- Both surfaces A and B are at the same 8dp elevation. They cast different shadows because Surface B is in front of another surface (C) that already has elevation.
- Elevation differences between surfaces (A), (B), and (C), as viewed from the side.
Default elevations
There are default values for resting elevations and dynamic elevation offsets for all elements. Components are positioned at a higher elevation than others, establishing a consistent elevation order across all components. Dialogs, for example, appear at the top of the hierarchy.
The following table lists default values for resting elevation and dynamic elevation offsets.
Table of default elevations
Component | Default elevation values (dp) |
---|---|
Dialog | 24 |
Modal bottom sheet Modal side sheet | 16 |
Navigation drawer | 16 |
Floating action button (FAB - pressed) | 12 |
Standard bottom sheet Standard side sheet | 8 |
Bottom navigation bar | 8 |
Bottom app bar | 8 |
Menus and sub menus | 8 |
Card (when picked up) | 8 |
Contained button (pressed state) | 8 |
Floating action button (FAB - resting elevation) Snackbar | 6 |
Diagram of default elevation values
Cross-section diagram showing the resting elevation and dynamic elevation offsets for multiple components.
Shadows
Shadows indicate depth and directional movement of objects. They are the only way to determine the amount of space between two surfaces. The height of an object determines its shadow.