Elevation

Elevation communicates spatial relationships between UI elements. Tessera UI uses box-shadows for depth and a z-index scale for stacking order.

---

Shadow Scale

Five elevation levels provide a clear visual hierarchy from flat to floating. Hover to see each card lift.

XS

—ts-shadow-xs

Pressed states, inset elements

Small

—ts-shadow-sm

Cards at rest, toggle thumbs

Medium

—ts-shadow-md

Hovered cards, elevated panels

Large

—ts-shadow-lg

Dropdowns, hovered interactive cards

XL

—ts-shadow-xl

Modals, full-screen overlays

Elevation Transitions

Cards move up one elevation level on hover. Try hovering these cards.

Cardsm → lg

Panelsm → lg

Actionsm → lg

Inset Shadows

Inset shadows create the impression of recessed surfaces — input fields, toggle tracks, and pressed states.

Inset Small

—ts-shadow-inset-sm

Inset Medium

—ts-shadow-inset-md

---

Dark Mode Elevation

In dark mode, box-shadows become less effective because the base surface is already dark. Tessera UI compensates with elevation tint tokens — progressively lighter surface colors that differentiate layers.

Level 1

#181a21

Cards at rest

Level 2

#1e2029

Hovered cards, popovers

Level 3

#252730

Modals, floating panels

In light mode all three levels map to white (neutral-0) because shadows alone provide sufficient separation. In dark mode each step adds a subtle cool blue tint aligned with the M3 surface elevation model.

/* Card at rest */
background-color: var(--ts-color-bg-elevated-1);
box-shadow: var(--ts-shadow-sm);

/* Card on hover */
background-color: var(--ts-color-bg-elevated-2);
box-shadow: var(--ts-shadow-md);

---

Layering Model

Elements at rest occupy different conceptual layers. Each layer uses a specific elevation range.

SurfaceNo shadow

Raisedsm - md

Floatinglg

Overlayxl + overlay bg

---

Z-Index Scale

A fixed z-index scale prevents stacking conflicts across components.

Dropdown1000

Sticky1020

Fixed1030

Overlay1040

Modal1050

Popover1060

Tooltip1070

---

Guidelines

1. Use elevation sparingly. Not every container needs a shadow. Flat layouts with borders are often cleaner for dense UIs.
2. One elevation increase per interaction. Hover effects should move up one level, not jump from none to xl.
3. Pair elevation with borders in dark mode. Shadows are less visible on dark backgrounds — add a subtle --ts-color-border-subtle border for clarity.
4. Reserve xl for modals and critical overlays. Overuse of high elevation diminishes its impact.