Elevation & Depth

Our design system relies on two main things to establish the elevation hierarchy of an interface: shadows and Z-index.

Shadows

We cast drop shadows to establish a visible distinction between one elevation level vs the other.

Z-Index

Interfaces live in a sort of 3-dimensional space, so element position in the interface is determined by 3 values:

1. The X coordinate indicates the horizontal position.
2. The Y coordinate indicates the vertical position.
3. A Z coordinate or Z-Index specifies the stack order of an element.

An element with a greater stack order is always in front of a component with a lower stack order.

Elevation Levels

Our Design System has 12 elevation levels, each one with a specific purpose.

• 0. Page
• 1. Surfaces
• 2. Side Panel
• 3. Global navigation
• 4. Copilot
• 5. Shroud
• 6. Modal
• 7. Menus
• 8. Dragged Items
• 9. Toasts
• 10. Tooltips
• 11. OS/Browser Alerts

As mentioned in the Z index section, each elevation level will always be shown on top of the previous one in the interface,  so, for example, level 1 will always be shown below level 2, and level 2 will always be shown below level 3.

Below you can find our levels, the box shadow styles, and Z-Index values attached to each one.

0. Page

The page is the base of our interface; any content will go on top of it. 

---

 

1. Elevated Surfaces

Our surface level is divided into 2:

• Cards — Containers that give the impression of being on top of their parent section.
• Sunken Surfaces — Containers that give the impression of being sunken in their parent section.

Cards

Cards can serve as entry points into deeper sections of detail or navigation, such as a group of semantically related items or details on a CX ticket.

Card states

Cards can be interactive, so we also provide a darker shadow style to denote hover/active states.

Sunken surfaces

As the name suggests, Sunken Surfaces give the 
impression of a section being sunken into its parent rather than on top.

We use them mostly for delimiting a section that can have multiple elevation elements, such as a stack of cards or buttons.

These types of surfaces don’t possess a box shadow style; we differentiate a sunken surface by using a darker background color than its parent, for example, tonal_subtle or tonal_medium.

---

 

2. Side Panel

Side Panels are drawers that are anchored to one side of the screen and sit on top of the page. They do not alter the page layout.

---

 

3. Global navigation

Global Navigation, similar to the side panels, is anchored to the top of the screen; they do not possess a box_shadow since it is always visible and might cloud the interface.

---

 

4. Copilot

Copilot is the AI-powered assistant of Genesys Cloud. It empowers employees to improve their Contact Center through deeper, more informed use of Genesys.

---

 

5. Shroud

Shrouds are overlays used to make the user focus on a specific element on the screen, like modals or side panels.

---

 

6. Modal

Modal dialogs interrupt users and demand an action. They are appropriate when the user’s attention needs to be directed toward important information.

---

 

7. Menus

Menus are interactive elements of the UI that float above the UI, ignoring the layout of the page.

Examples of this can be:

• Context Menus
• Dropdown Menus
• Flyout Menus

---

 

8. Dragged items

Dragged items are items that users can drag a drop; by default states these items sit on the card surface level, but when dragged, they take a higher elevation level.

---

 

9. Toasts

Toasts, more often than not, contain information crucial for the user; usually, this information is time-sensitive, like a toast indicating a call or a new update of the app.

---

 

10. Tooltips

Tooltips are user-triggered messages that provide additional information about a page element or feature.

---

 

11. OS/Browser Alerts

These kinds of alerts will always take the highest layer since they are alerts coming directly from the Browser or the OS.