Drift Design System
  • Welcome to Drift
  • Foundations
    • Logo & Logotype
    • Color
    • Typography
    • Iconography
    • Illustrations
    • Spacing
    • Elevation
  • Voice and Tone
    • Communication
    • Brand Personality
    • Voice
    • Tone
  • Components
    • Buttons
Powered by GitBook
On this page
  • Measuring elevation
  • 🧑🏻‍💻 Usage Guidelines

Was this helpful?

  1. Foundations

Elevation

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

PreviousSpacingNextCommunication

Last updated 5 years ago

Was this helpful?

Measuring elevation

Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows.

Example elevation of different components:

  1. Nav drawer: 16dp

  2. App bar: 4dp

  3. Card: 1dp to 8dp

  4. FAB: 6dp

  5. Button: 2dp to 8dp

🧑🏻‍💻 Usage Guidelines

Our Zoom Design team has created extension called to display dp level of shadows in zeplin.

Eleva
eleva