Foundation
Digital environment
In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.
Svenska Spels digital environment has adapted to the principles of Material Design and reflects these qualities in how surfaces are displayed and move across the UI. Surfaces, and how they move in three dimensions, are communicated in ways that resemble how they move in the physical world. This spatial model can also be applied consistently across apps.
Depth
Svenska Spel UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the digital environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.
On the web, the UI expresses 3D space by manipulating the y-axis.
Properties
Surfaces have consistent, unchangeable characteristics and behaviors across Svenska Spels digital environment.
Dimensions
Element surfaces have varying x & y dimensions (measured in dp) and a uniform thickness (1dp).
Do
Shadows show the elevation of different surfaces.
- Top view
- Isometric 3D view showing the shadow cast by light when the elements moves upwards
Don't
Express shadows without changing a surface’s elevation.
- Top view
- Isometric 3D view depicts a shadow using only color, rather than light and elevation
Multiple elements cannot occupy the same point in space simultaneously.
Attributes
Basic surface
The basic Svenska Spel surface is opaque white, with 1dp thickness, and casts a shadow. All UI elements in Svenska Spels digital environment result from modifications to this surface.
Stretchable surfaces
Svenska Spel surfaces have consistent, unchangeable characteristics and behaviors across our digital environment.
A stretchable surface can be stretched before reaching a limit, at which point the entire surface becomes rigid. Surfaces can stretch vertically, horizontally, or in both directions.
Typically, user interaction with a surface will stretch it in one direction. For example, tapping "more details" can cause a card to grow vertically and display additional content.
Surfaces stretch direction can be exclusively vertical.
Surface positioning and movement (x/y)
Svenska Spel surfaces have consistent, unchangeable characteristics and behaviors across Svenska Spels Design System.
Surfaces can remain in a fixed position on the x- and y-axes, or can be moveable in any direction.
Surface movement can be confined to a single axis, allow movement along a single axis at a time, or allow movement along both axes simultaneously.
Surfaces can remain in a fixed position. The header bar remains in a fixed position while the content area scrolls only vertically behind it.
Surfaces (1,2) can move in any direction, although movement can be confined to a single axis at a time.