Elevation

Elevation is measured as the distance between components along the z-axis in density-independent pixels (dps).

The new material design, M3, from google sets these values:

• Elevation applies to all surfaces and components
• Keep the elevation story simple (not too many levels)
• Show elevation changes by changing surface color

Differences from M2

• Shadows: Instead of applying shadows by default to all levels, use shadows only when required to create additional protection against a background or to encourage interaction
• Color: New color mappings and compatibility with dynamic color
• Levels: Elevation is now described in terms of levels

The M2 Philosophy

The M3 Philosophy

Depicting Elevation

Elevation can be depicted using shadows or other visual cues, such as surface fills with a tone difference or scrims.

1. Two overlapping surfaces with distinct tonal values
2. Two overlapping surfaces with the same tonal values serperated by shadow
3. Two overlapping surfaces with the same tonal values seperated by a scrim/overlay.

Need to build a system for utilizing color / tonal values dynamically

ex: (but this isn't dynamic)

/* Elevation Level 4 and 5 */
    .elev-4,
    .elev-5 {
        background-color: #b6b7b6; /* Darker tone for higher elevation */
    }
    /* Elevation Level 3 */
    .elev-3 {
        background-color: #fff; /* Lighter tone for mid elevation */
    }
    /* Elevation Level 2 */
    .elev-2 {
        background-color: #fff; /* Lighter tone for mid elevation */
    }
    /* Elevation Level 1 */
    .elev-1 {
        background-color: #fff; /* Lighter tone for mid elevation */
    }
    /* Elevation Level 0 */
    .elev-0 {
        background-color: #e2e4e9; /* Lighter tone for lower elevation */
    }

CSS Tokens for Creating Elevation with Shadow

Elevation levels range from 0 to 5, with 0 representing elements at the same elevation as the background and 5 indicating the highest elevation.

By adhering to elevation guidelines, designers can create interfaces that effectively communicate hierarchy, emphasize important elements, and guide user interactions.

Elevation Level 4 and 5

Elevation Levels 4 and 5 - DP Height: 8dp-12dp

CSS

._elev-4,
._elev-5 {
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2);
}

HTML / CSS Class Name

_elev-4

_elev-5

Use Case

TBD

Elevation Level 3

Elevation Level 3 - DP Height: 6dp

CSS

._elev-3 {
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.2);
}

HTML / CSS Class Name

_elev-3

Use Case

• Search Bar
• Date/Time Picker
• Dialog

Elevation Level 2

Elevation Level 2 - DP Height: 1dp

CSS

._elev-2 {
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
}

HTML / CSS Class Name

_elev-2

Use Case

• Autocomplete Menu
• Dropdown Menu
• Navigtation Bar
• Rich Tooltiop

Elevation Level 1

Elevation Level 1 - DP Height: 1dp

CSS

._elev-1 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}

HTML / CSS Class Name

_elev-1

Use Case

• Banner
• Modal Bottom
• Elevated Button
• Elevated Card

Elevation Level 0

Elevation Level 0 - DP Height: 0dp

CSS

._elev-0 {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

HTML / CSS Class Name

_elev-0

Use Case

• Carousel Item
• Filled Button
• Filled Card
• Full Screen Dialog
• List Item
• Outlined Card