We use elevation to create a visual distinction between components and elements with different spatial relationships. Mostly this applies to background and foreground, as the design languge stemming from our brand guidelines is meant to indicate proximity and closeness.
Shadows
Most components in Windmolen rely on a shadows to differentiate themselves from the rest of the interface. We use an array of shadows intentended for different purposes:
Card Shadow (Big)
The big card shadow is used primarilly for marketing/growth purposes on our website.
Card Shadow (Small)
The smaller card shadow is intented for our product/service UI.
UI Shadow (Outward)
The outward UI shadow is intented for UI that should give the appereance of facing outward, such as buttons and dropdown selectors.
UI Shadow (Inward)
The inward UI shadow is intented for UI that should give the appereance of facing inward, such as input fields.
Don’t overdo it
Using elevation consistently but sparingly will help your users understand the hierarchy and interaction patterns for the design elements in your product. Using too many elevation tokens in your designs will only diminish the user’s experience.