Skip to content

Commit ff6bf10

Browse files
niels9001Copilot
andcommitted
Add Shadows section to layering page
Add a dedicated section explaining the role of shadows in communicating elevation and depth, with guidance on purposeful usage. Links to the implementation page under Develop for ThemeShadow and DropShadow APIs. Co-authored-by: Copilot <[email protected]>
1 parent f847061 commit ff6bf10

1 file changed

Lines changed: 9 additions & 2 deletions

File tree

hub/apps/design/signature-experiences/layering.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,5 +138,12 @@ Windows 11 uses a two-layer system for applications. These two layers create hie
138138
- The **base** layer is an app's foundation. It is the bottommost layer of every app, and contains controls related to app menus, commands, and navigation.
139139
- The **content** layer focuses the user on the app's central experience. The content layer may be on contiguous element, or separated into cards that segment content.
140140

141-
> [!TIP]
142-
> To learn how to implement shadows using ThemeShadow and DropShadow in your app, see [Shadows in Windows apps](../../develop/ui/shadows.md).
141+
## Shadows
142+
143+
Shadows are a key visual cue that reinforces the concept of elevation. When a surface is elevated above another, it casts a shadow on the layer beneath it — just as objects do in the physical world. The higher the elevation, the larger and softer the shadow becomes. This relationship between elevation and shadow helps users intuitively understand the spatial hierarchy of your app's interface.
144+
145+
In Windows 11, shadows work together with contour (outlines) to communicate depth. Standard controls like flyouts, dialogs, and tooltips already include appropriate shadows based on their elevation values. Using shadows purposefully — rather than decoratively — ensures they remain an effective signal for drawing focus to the most important elements.
146+
147+
When designing your app's layout, consider how shadows can clarify the relationship between overlapping surfaces. For example, a dialog that appears over the base layer should cast a noticeable shadow to clearly separate it from the content behind it. Overusing shadows, however, can diminish their impact and create visual noise.
148+
149+
To learn how to implement shadows using ThemeShadow and DropShadow in your app, see [Shadows in Windows apps](../../develop/ui/shadows.md).

0 commit comments

Comments
 (0)