Elevation and Surfaces

Elevation is the relative distance between two surfaces along the z-axis.

User interfaces in Bauhaus Design System rely primarily on the three-dimensional perception of elements through their varying positions along the z-axis in both positive and negative directions.

Elevation levels

Main levels

UI elements such as containers in Bauhaus DS can be placed in different levels in Bauhaus DS starting from Level 0 and going up to Level 20, in increments of 2, with the possibility to add more levels upon requirement. Level 0 is considered the ground level on the screen. Below that there can only be a level extending to negative infinity (L.-∞) that is used for 3D environments in applications. New levels can not be created in negative direction.

Sub-levels

Bauhaus DS is a mix between the guidelines of Material UI and Neumorphism. Unlike Material UI, surfaces in Bauhaus DS can be bent, imprinted on and come back to flat state following certain patterns of Neumorphism. These reflect debossing/embossing printing techniques on a metal sheet in physical world. Containers on the main levels can have elements that are debossed (pushed back) or embossed (pushed forward) and can change the depth of their state (respectively their debossing or embossing) upon user interaction, creating intermediate levels (like mezzanines), that are hereinafter called sub-levels.

Below you can see the relationships between different elements in z-axis for an example side-drawer element with form fields, button and dialogue box.

Representing elevation

Hierarchy in elevations are represented mainly with shadows, but also with surface colors, edges and positions to enhance accessibility. Containers can have embossed, debossed or flat elements.

Main levels are represented with Elevation n tokens and Figma styles, with naming that goes like Elevation 1, Elevation 2, Elevation 4, ... Elevation 20, where n is the value ascending in z-axis.

Sub-levels are represented with embossing, debossing and sometimes, in case of detached sub-levels (such as tooltip, popover, etc.), with Elevation n tokens.

Debossing is used in situations where user input is required such as in elements of form; text fields, select components, switches and checkboxes. There are corresponding tokens and Figma styles named: Debossed 1, Debossed 2, Debossed 4, etc.

Embossing is the default state of clickable elements that perform an action, such as buttons. There are corresponding tokens and Figma styles named: Embossed 1, Embossed 2, Embossed 4, etc.

Both embossing and debossing react to user hovering and clicking by changing the magnitude of their emboss/deboss states.

An exception is level -∞ (3D environment) where none of these surface manipulations are possible because this level extends to negative infinity, so there is no surface to emboss or deboss. 3D objects there float in an infinite space.

Surfaces that share the same elevation can not overlap each other on the same level, therefore for this to be possible the Dragged state must raise an element higher in z-axis to be able to move it above other elements.

When an element has an elevation it casts shadow on the preceding surfaces. Elevation n tokens can be used to represent the level that corresponds to value n by calculating the difference between the preceding surface and the element. When an element is situated above multiple preceding surfaces with varying elevations, the preceding surface closest in z-axis to the element is to be considered when calculating the level for casting shadow (see diagram below).

Examples of elevation tokens used for representing different levels.

Text elements are always flat and should not have shadow due to visual accessibility concerns.

Sometimes an element that should be debossed is too small and using tokens such as Debossed n is not visually sharp enough. An example is checkbox, where shadows of Debossed n tokens are too strong. In this cases we can use other shadow tokens and Figma styles that are called Die cut n that gives an element sharper edges while maintaining the overall debossed feeling.

Debossing should be employed sparingly, ideally, only one or two levels below the surface of its container, and with caution, as they can create scenarios where carved surfaces may overlap and contradict with the spatial possibilities in physical world where coplanar objects can not exist at the same place at the same time.

The levels described in this guideline are for guidance; the number of main levels and their degrees of elevation depend on the use cases in various applications, but the ratios across applications must be consistent.

Containers

A container is a visually distinguished surface that groups related content.

To avoid any confusion in definitions the term Container will be used hereinafter to include different types of containers, such as cards, toolbars, panels and tiles. The distinction will be done in component level.

To balance between the composition of modern UI and precision driven domain it serves for, we employ very subtle fillet in containers with the ratio of 10 to 1 of the shortest side of the container to the corner radius. The resulting value is then round up or down to the closest size gutter.

Surfaces

Because we utilize features of Neumorphism, we have to make sure that elements that emboss or deboss are of the same color as their background, to convey the feeling that it is the same material being pushed back and forth respectively. Additionally the color of the shadows that these elements cast should match the color of the background. Therefore we have different shadow tokens for different background colors. However to keep things simpler and avoid huge number of combinations of shadows and backgrounds we will aim only for light grey colored backgrounds in our applications. Hence, we have tokens such as Embossed 1 For Grey 90, Embossed 1 For Grey 95 and Embossed 1 For Grey 98.

The default surface on which all components and text lie has Grey 95 background color, and the shadows used for embossed and debossed states are Embossed n For Grey 95 and Debossed n For Grey 95 respectively, where n is the magnitude of depth.

Level 0 has the default surface color of Grey 90.

Semi-transparent surfaces resembling glass are used in...

Dialogs

Temporary elements that require user input (like modal and modeless dialogs) are semi-transparent. For modal dialogs a dimmed background is employed. Temporary dialog elements that can be printable outputs resemble and behave like paper, and are as close as possible to their printable format.