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

The height and width of elements can vary.

Don't

Elements is always 1dp thick.

Shadows

Svenska Spel surfaces at different elevations cast shadows.

Do

Shadows show the elevation of different surfaces.

1. Top view
2. Isometric 3D view showing the shadow cast by light when the elements moves upwards

Don't

Express shadows without changing a surface’s elevation.

1. Top view
2. Isometric 3D view depicts a shadow using only color, rather than light and elevation

Physical properties

Surfaces are solid. User input and interaction cannot pass through elements.

Do

Input events only affect the surfaces.

Don't

Input events cannot pass through surfaces.

Multiple elements cannot occupy the same point in space simultaneously.

Do

Prevent multiple elements from simultaneously occupying the same point in space, such as by separating elements with elevation.

Don't

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.