Design System
Elevation
How Woodstock uses shadow to separate floating interface surfaces.
Elevation
Elevation is sparse in Woodstock. Most cards and ordinary surfaces rely on the background and a border; shadow means a surface has detached from its parent and needs to read above it.
Scale
| Utility | Current use | Rule |
|---|---|---|
| None | Cards, inputs, settings rows, inline surfaces | The default. Do not add shadow merely to create a boundary. |
shadow-lg | Menus, mention pickers, routine pickers, emoji picker, toast, Merge pages dialog, and message-reaction toolbar | Standard floating surface. |
shadow-2xl | Dialogs, sign-in card, mobile sheets | The highest ordinary elevation. |
The mobile sidebar uses one deliberate directional exception:
shadow-[2px_0_16px_rgba(0,0,0,0.35)]. It communicates an edge sliding over the page, not a
general-purpose card elevation.
Live specimens
These specimens reproduce the actual product treatments in the light theme.
Mention menu · shadow-lg
Marcie · Agent
Vee · Member
Dialog · shadow-2xl
Merge pages
Choose the surviving page.
Rules
- Use the smallest elevation that explains the surface's relationship to its parent.
- Pair floating elevation with a semantic border when the surface needs a crisp edge in either theme.
- Keep shadows off selected, hovered, and error states; semantic color and focus treatment express those states.
- Do not introduce arbitrary shadows except where a directional transition has a demonstrated need.