Browse Foundations

Foundations

Surface elevation

Tokens for surface shadows that lift menus, tooltips, cards, and layered content above the page.

Surface shadows lift elements above the page. Use progressively higher levels as elements sit further from the base surface.

Token

Value (px/rem)

Preview

sgds-elevation-surface-1

box-shadow: 0 0 2px 0 rgba(14, 14, 14, 0.16);

sgds-elevation-surface-2

box-shadow: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 2px 4px 0 rgba(14, 14, 14, 0.08);

sgds-elevation-surface-3

box-shadow: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 4px 8px 0 rgba(14, 14, 14, 0.08);

sgds-elevation-surface-4

box-shadow: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 8px 16px 0 rgba(14, 14, 14, 0.08);

sgds-elevation-surface-5

box-shadow: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 16px 32px 0 rgba(14, 14, 14, 0.08);