Elevation & Shadow Generator

depths.studio—a six-level shadow scale from one light source, mapped to semantic tokens, honest about dark mode, and readable by a coding agent.

Fourth tool in the Studio Tools family, after ramps.studio, springs.studio and beeps.studio.

What it does

• Derives a six-level elevation scale—layered key, ambient and optional contact shadows—from a draggable light source and three curves.
• Maps the levels to semantic tokens: --shadow-raised, --shadow-hover, --shadow-sticky, --shadow-dropdown, --shadow-modal, --shadow-toast, plus an inset --shadow-pressed.
• States what dark mode actually needs: boosted alphas, hairline --edge-* borders, and the admission that elevation on a dark page is mostly carried by surface color.
• Exports as CSS variables, a Tailwind v4 theme, W3C DTCG design tokens, or markdown written for an agent's context.

Share links

Every scale is a pure function of the URL. The parameters are plain decimals, documented in public/llms.txt—the same file an agent is pointed at. Fetching any URL returns the complete scale embedded in the HTML with no JavaScript required; /api/shadows serves the same data as JSON or plain text.

Example	Meaning
/?p=crisp	The Crisp preset
/?a=135	Light from the upper-left
/?d=2&g=2.2&o=15	A longer, darker throw
/?c=1e2a4a	Tinted shadow ink
/?pu=modal5&xt=pressed	Modal moved to level 5, pressed excluded

Development

pnpm install
pnpm dev          # http://localhost:5187
pnpm build        # llms.txt family block + tsc + vite
pnpm test         # vitest, src/lib only
pnpm sync:check   # verify src/shared matches upstream (Ramps Studio)

src/shared/ is authored in Ramps Studio and synced here—don't edit it in this repo. See CLAUDE.md for how this repo works, and SPEC.md for what it is and why.

License

MIT. Fork it, change it, ship it.