Buffer UI—levels of drop-shadow

Part of my work on the design system at Buffer was to devise a system and ruleset for working with different levels of drop-shadow.

I tried to introduce a rule-of-eight system throughout, which this concept utilizes. For example, the further away from the background a piece of UI was (say a modal), its blur and Y value increases by 2 —a quarter of an eight—fitting into the rule-of-eight system.

Attached is the full-quality concept.