HELIOS UI · FOUNDATIONS

Effects

Layer and focus examples with copyable CSS recipes.

Layer and focus recipes

These CSS shadow recipes are derived from the existing website’s foundation examples. They are not entries in the resolved token JSON or newly created Figma effects. Borders remain visible in dark mode when shadow contrast is subtle.

Preview shadow

Shadow md

A surface with a visible border and the selected elevation.

Shadow xs

0 1px 2px #0000000d

Shadow sm

0 1px 2px -1px #0000001a, 0 1px 3px #0000001a

Shadow md

0 2px 4px -2px #0000000f, 0 4px 6px -1px #0000001a

Shadow lg

0 2px 2px -1px #0000000a, 0 4px 6px -2px #00000008, 0 12px 16px -4px #00000014

The focus color uses the website’s contrast-aware foreground role.

Local reference snapshot · no live Figma synchronizationOpen Effects in Figma

Effects

Layer and focus recipes

Shadow xs

Shadow sm

Shadow md

Shadow lg

Search Helios UI

Effects

Layer and focus recipes

Shadow xs

Shadow sm

Shadow md

Shadow lg

Search Helios UI