Elevation

Elevation refers to the perceived distance from an application’s background to the front of an element. This concept is a combination of layering techniques, involving background colours, shadows, and/or overlays, that allows for a layered yet cohesive visual experience.

Surfaces

Surfaces in Prism refer to the layers that group content and interactive elements in EcoOnline products. Use them to organise elements and create a sense of hierarchy.

Default

The Default surface sits slightly higher than the base surface. It is the primary background for main content of the page such as text, buttons, forms, and icons should be placed on a surface.
Always pair color-surface with shadow-surface.

Base

Use as the starting point for building the application UI. It defines the overall background for surface containers and other elements. When placing content directly on the Base surface, it should be supportive to the main focus or task of the page, for example a page header, in-page navigation or secondary/supportive information or options.

Popover

Use for elements that sit over other UI, such as dropdown/select menus, modals, dialogs, floating toolbars. Also use for elements in a dragged state. Always pair color-surface-popover with shadow-surface-popover.

---

Shadows

To keep elevation simple there are 2 types of shadows in Prism both with different levels of elevation. There is also a focus shadow but this is used as a style effect rather than for elevation. The main shadows are:

Surface partners

shadow-surface and shadow-surface-popover

Overflow

shadow-overflow (there are tokens for different directions of these shadows). Often a border will be used as the default approach for scrolled content. Shadows can be used in something like a table where borders are already heavily in use or smaller/more subtle UI elements.

---

Overlay

The overlay serves to temporarily highlight important content—such as modals, drawers, or notifications—by isolating it from the primary interface, thereby directing user attention.

---

Interaction

Hovered and pressed

Elevations use surface colour changes to communicate hovered and pressed states. Use the hovered and pressed surface tokens to create these visual changes.

Transitions between elevations by changing the shadow can be used as an alternative to hovered and pressed colours, but only for Default surfaces (not Elevated). Use this approach sparingly to avoid excessive animation.

Dragged

Use the shadow-surface-popover for any UI that is being dragged. Once moved, it returns to its original elevation.

Best practices

Follow Surface pairings

Default and Elevated surfaces have dedicated colour and shadow pairings.

Nesting

Summary table