Yugen UI

Foundations

Elevation

Elevation uses two-layer shadows (key + ambient) to show the relative height of surfaces and the hierarchy between them.

Shadow ramp

shadow2

shadow-2

Slightly raised elements in content: message bubbles, code blocks

shadow4

shadow-4

Card (default), command bar

shadow8

shadow-8

Card on hover, tooltip

shadow16

shadow-16

Menu, popover, dropdown

shadow28

shadow-28

Sliding panel, teaching popover

shadow64

shadow-64

Dialog, modal window