DEPTHS—www.depths.studio
preset soft (Soft)
light 90 deg—shadows fall toward (0, 1)
curves distance 1px, growth x1.9, blur x2.6, opacity 7%, falloff x0.95, 2 layers
THIS LINK DID NOT ARRIVE INTACT
1 parameter in this link is not part of the contract (trk). Either the link is stale, or it was rewritten in transit.
LEVELS (light mode; dark boosts alpha x1.5, capped 0.85)
0 none
1 0px 1px 2.6px rgb(0 0 0 / 7%), 0px 0.4px 5.7px rgb(0 0 0 / 4.6%)
2 0px 1.9px 4.9px rgb(0 0 0 / 6.7%), 0px 0.7px 10.9px rgb(0 0 0 / 4.3%)
3 0px 3.6px 9.4px rgb(0 0 0 / 6.3%), 0px 1.3px 20.6px rgb(0 0 0 / 4.1%)
4 0px 6.9px 17.8px rgb(0 0 0 / 6%), 0px 2.4px 39.2px rgb(0 0 0 / 3.9%)
5 0px 13px 33.9px rgb(0 0 0 / 5.7%), 0px 4.6px 74.5px rgb(0 0 0 / 3.7%)
TOKENS
--shadow-none (level 0)
value none
dark none
use when Inputs, list rows, table cells—anything that belongs to the page rather than sitting on it.
not when Don't use elevation to fix a contrast problem; that's a color decision.
--shadow-raised (level 1)
value 0px 1px 2.6px rgb(0 0 0 / 7%), 0px 0.4px 5.7px rgb(0 0 0 / 4.6%)
dark 0px 1px 2.6px rgb(0 0 0 / 10.5%), 0px 0.4px 5.7px rgb(0 0 0 / 6.9%)
edge 1px solid rgb(0 0 0 / 7.5%) (light) / 1px solid rgb(255 255 255 / 7.5%) (dark)
use when The default for anything that reads as an object: cards, tiles, buttons.
not when Not for nesting—a raised card inside a raised card flattens both.
--shadow-hover (level 2)
value 0px 1.9px 4.9px rgb(0 0 0 / 6.7%), 0px 0.7px 10.9px rgb(0 0 0 / 4.3%)
dark 0px 1.9px 4.9px rgb(0 0 0 / 10.1%), 0px 0.7px 10.9px rgb(0 0 0 / 6.5%)
edge 1px solid rgb(0 0 0 / 9%) (light) / 1px solid rgb(255 255 255 / 9%) (dark)
use when On hover or focus of an element that is shadow-raised at rest, so the lift reads as one step up.
not when Not as a resting state—if everything is lifted, nothing is.
--shadow-sticky (level 2)
value 0px 1.9px 4.9px rgb(0 0 0 / 6.7%), 0px 0.7px 10.9px rgb(0 0 0 / 4.3%)
dark 0px 1.9px 4.9px rgb(0 0 0 / 10.1%), 0px 0.7px 10.9px rgb(0 0 0 / 6.5%)
edge 1px solid rgb(0 0 0 / 9%) (light) / 1px solid rgb(255 255 255 / 9%) (dark)
use when Bars that pin over scrolling content, the moment content actually passes beneath them.
not when Not while the page sits at the top—a shadow over nothing announces machinery.
--shadow-dropdown (level 3)
value 0px 3.6px 9.4px rgb(0 0 0 / 6.3%), 0px 1.3px 20.6px rgb(0 0 0 / 4.1%)
dark 0px 3.6px 9.4px rgb(0 0 0 / 9.5%), 0px 1.3px 20.6px rgb(0 0 0 / 6.2%)
edge 1px solid rgb(0 0 0 / 10.5%) (light) / 1px solid rgb(255 255 255 / 10.5%) (dark)
use when Transient surfaces summoned from a control and dismissed by a click elsewhere.
not when Not for dialogs that take over the page—that is shadow-modal's job.
--shadow-modal (level 4)
value 0px 6.9px 17.8px rgb(0 0 0 / 6%), 0px 2.4px 39.2px rgb(0 0 0 / 3.9%)
dark 0px 6.9px 17.8px rgb(0 0 0 / 9%), 0px 2.4px 39.2px rgb(0 0 0 / 5.9%)
edge 1px solid rgb(0 0 0 / 12%) (light) / 1px solid rgb(255 255 255 / 12%) (dark)
use when Surfaces that block the page behind a scrim and hold focus until dismissed.
not when Not for toasts—a modal shadow on a toast makes a notification feel like an interruption.
--shadow-toast (level 5)
value 0px 13px 33.9px rgb(0 0 0 / 5.7%), 0px 4.6px 74.5px rgb(0 0 0 / 3.7%)
dark 0px 13px 33.9px rgb(0 0 0 / 8.6%), 0px 4.6px 74.5px rgb(0 0 0 / 5.5%)
edge 1px solid rgb(0 0 0 / 13.5%) (light) / 1px solid rgb(255 255 255 / 13.5%) (dark)
use when The top of the stack: transient messages that float over everything, including modals.
not when Never on persistent chrome. The top level is loud because nothing lives there.
--shadow-pressed (level inset)
value inset 0px 0.8px 2.5px rgb(0 0 0 / 9.1%)
dark inset 0px 0.8px 2.5px rgb(0 0 0 / 13.7%)
use when Wells, active toggle tracks, pressed button states—surfaces pushed below the page.
not when Not for disabled states; depressed and disabled are different messages.
NOTES
Dark values boost every alpha x1.5 (capped at 0.85), and the optional --edge-* hairlines flip from ink to white. Even boosted, elevation on a dark surface is mostly carried by surface color—pair these tokens with a lightened surface ramp (https://www.ramps.studio/) rather than inventing stronger shadows.
Layer alpha is 0-1 in this payload and a percentage inside the CSS strings; they are the same number.
shadow-pressed is an inset and deliberately outside the elevation scale: it derives from the base unit, not the growth curve, because a well does not get deeper when a dropdown gets higher.
PRESETS
soft Diffuse and quiet—elevation you feel more than see.
crisp Tight and close to the surface—edges you can point at.
dramatic Long throws and real darkness—a stage, not an office.
hairline Barely-there shadows that lean on edges—flat design that still stacks.
REGENERATE WITH DIFFERENT INPUTS
https://www.depths.studio/?p=<preset> one of: soft, crisp, dramatic, hairline
https://www.depths.studio/?a=<0-360> light angle; 90 = overhead, 135 = upper-left
https://www.depths.studio/?d=1.5&g=2&b=2.5&o=10 curve values as plain decimals; see llms.txt
https://www.depths.studio/?y=<2|3> layers per level (3 adds a contact shadow)
https://www.depths.studio/?c=<6-digit hex> tinted shadow ink, no #
https://www.depths.studio/?k=<s|sb> dark strategy: shadows, or shadows + edges
https://www.depths.studio/?pu=modal5.hover3 move tokens to other levels
https://www.depths.studio/?xt=pressed.toast exclude tokens from export
https://www.depths.studio/api/shadows this data as JSON
https://www.depths.studio/api/shadows?format=text this data as text
Full contract: https://www.depths.studio/llms.txt