1# Elevation
 2
 3Elevation in Zed applies to all surfaces and components. Elevation is categorized into levels.
 4
 5Elevation accomplishes the following:
 6- Allows surfaces to move in front of or behind others, such as content scrolling beneath app top bars.
 7- Reflects spatial relationships, for instance, how a floating action button’s shadow intimates its disconnection from a collection of cards.
 8- Directs attention to structures at the highest elevation, like a temporary dialog arising in front of other surfaces.
 9
10Elevations are the initial elevation values assigned to components by default.
11
12Components may transition to a higher elevation in some cases, like user interations.
13
14On such occasions, components transition to predetermined dynamic elevation offsets. These are the typical elevations to which components move when they are not at rest.
15
16## Understanding Elevation
17
18Elevation can be thought of as the physical closeness of an element to the user. Elements with lower elevations are physically further away from the user on the z-axis and appear to be underneath elements with higher elevations.
19
20Material Design 3 has a some great visualizations of elevation that may be helpful to understanding the mental modal of elevation. [Material Design – Elevation](https://m3.material.io/styles/elevation/overview)
21
22## Elevation Levels
23
24Zed integrates six unique elevation levels in its design system. The elevation of a surface is expressed as a whole number ranging from 0 to 5, both numbers inclusive. A component’s elevation is ascertained by combining the component’s resting elevation with any dynamic elevation offsets.
25
26The levels are detailed as follows:
27
280. App Background
291. UI Surface
302. Elevated Elements
313. Wash
324. Focused Element
335. Dragged Element
34
35### 0. App Background
36
37The app background constitutes the lowest elevation layer, appearing behind all other surfaces and components. It is predominantly used for the background color of the app.
38
39### 1. UI Surface
40
41The UI Surface is the standard elevation for components and is placed above the app background. It is generally used for the background color of the app bar, card, and sheet.
42
43### 2. Elevated Elements
44
45Elevated elements appear above the UI surface layer surfaces and components. Elevated elements are predominantly used for creating popovers, context menus, and tooltips.
46
47### 3. Wash
48
49Wash denotes a distinct elevation reserved to isolate app UI layers from high elevation components such as modals, notifications, and overlaid panels. The wash may not consistently be visible when these components are active. This layer is often referred to as a scrim or overlay and the background color of the wash is typically deployed in its design.
50
51### 4. Focused Element
52
53Focused elements obtain a higher elevation above surfaces and components at wash elevation. They are often used for modals, notifications, and overlaid panels and indicate that they are the sole element the user is interacting with at the moment.
54
55### 5. Dragged Element
56
57Dragged elements gain the highest elevation, thus appearing above surfaces and components at the elevation of focused elements. These are typically used for elements that are being dragged, following the cursor