Elevation

Elevation in Merid comes from surfaces first and shadows second. A card on the page sits on a grey tray; a card on a tray flips to a white surface with a soft shadow. Borders are the last resort.

Shadow scale

All shadows are long, soft and faint, tinted with ink (rgb(15 18 25 / …)) rather than black. The only saturated shadow is the primary button's accent glow.

--mrd-shadow-xsSelected pill chip

--mrd-shadow-smIcon tile

--mrd-shadow-mdCard lift

--mrd-shadow-lgPopover, toast, tooltip

--mrd-shadow-xlMenu

--mrd-shadow-2xlDialog

--mrd-shadow-accentPrimary button only

Choosing a level

Surface	Shadow
Selected chip in a segmented control	`--mrd-shadow-xs`
Card on a tray, interactive card on hover	`--mrd-shadow-md`
Popover, toast, tooltip	`--mrd-shadow-lg`
Menu	`--mrd-shadow-xl`
Dialog	`--mrd-shadow-2xl`

In dark mode

Shadows become black at 40–60% opacity, and elevated surfaces add a 1px ring through --mrd-elevated-ring. Include it next to the shadow so your own surfaces behave the same way:

css

.floating-panel {
  box-shadow: var(--mrd-shadow-lg), var(--mrd-elevated-ring);
}

Focus halo

--mrd-focus-ring is a 4px accent halo at low opacity, used together with an accent border on inputs. Other controls use a 2px accent outline offset by 3px.