Foundations

Elevation

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

Overview

Elevation styles are crucial in a website design system as they help in creating depth and focus in user interfaces. By manipulating shadows and layering, elevation styles can differentiate between elements, improve user experience, and guide users' attention. This documentation outlines the standards and practices for implementing elevation styles within our website design system.

Principles

  1. Consistency: Elevation styles should be consistent across the website to maintain a coherent visual language.
  2. Hierarchy: Use elevation to establish a clear hierarchy of elements, helping users to understand which elements are interactive or in focus.
  3. Subtlety: Elevation should be subtle yet effective; avoid overly dramatic shadows that can clutter the interface.
  4. Accessibility: Ensure that elevation styles do not compromise text readability or the overall accessibility of the website.

Best Practices

  1. Limit Elevation Usage: Use elevation purposefully and sparingly to avoid a cluttered interface.
  2. Test in Context: Always review elevation styles in the context of the entire interface to ensure they work harmoniously with other design elements.
  3. User Feedback: Incorporate user feedback, especially regarding readability and accessibility, to refine elevation styles.

Styles & Tokens

Elevation  Elevation 1 Elevation 2Elevation 3Elevation 4
Hex#001D344D#001D344D#001D344D#001D344D
Spread1px1px2px2px
Blur3px
6px6px8px
Offset(X)0px0px0px0px
Offset(Y)2px2px4px6px