Foundations · Shadows7 core shadows · 3 special states
Shadows create depth, hierarchy, and separation.
Shadow tokens that define depth and hierarchy across surfaces.
Usage
Shadow Principles
Use shadows to clarify elevation and interaction. The token should support the surface, not become the main visual element.
Title goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
SecondaryPrimary
Use tokens
Apply Dew shadow tokens instead of one-off box-shadow values.
Reserve depth
Use stronger shadows for overlays, menus, and floating surfaces.
Pair with surface
Shadows work best with surface fills and clear boundaries.