Shadows

Eight elevation shadows from a hairline to a floating sheet, plus the focus style. Each one is an effect style built from one or two drop shadows. Dark surfaces separate by tone first, so shadows stay quiet on dark and carry more of the depth in light.

Elevation

Apply Chartory/Shadow/* as an effect style. Values are offset y / blur / spread for each drop shadow.

StyleSampleShadows

shadow/2xsy 1 / blur 0

shadow/xsy 1 / blur 2

shadow/smy 1 / blur 3y 1 / blur 2 / spread −1

shadow/mdy 4 / blur 8 / spread −2y 2 / blur 4 / spread −2

shadow/lgy 12 / blur 16 / spread −4y 4 / blur 6 / spread −2

shadow/xly 20 / blur 24 / spread −4y 8 / blur 8 / spread −4

shadow/2xly 24 / blur 48 / spread −12

shadow/3xly 32 / blur 64 / spread −12

Focus

Focus is a 2 px ring outside the control in text/⁠secondary, drawn on every interactive part, never a shadow alone.
Keyboard first: the ring shows on keyboard focus, not on a mouse click.