Cloaked Design SystemFoundations

Shadows

Compare subtle separation with an elevated layer. See the two defined shadows on real surfaces, including a flat reference.

Implementation preview

Show separation where it matters

Compare the card and modal shadows on real surfaces. These are the two shadow roles currently defined by the system.

Live exampleReact · shared implementation

Try the controls. Your changes stay in this example.Open example

COMPLETE STORYBOOK REFERENCE

Every example. In one place.

Explore every named example, including states, compositions, and theme variants.

1 story

Effects selectedOpen canvas

Example source

packages/design-system/src/foundations/Foundations.stories.tsxExport Effects

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Full story catalog JSON ↗

Choose with the experience in mind

Use the two defined treatments

The card shadow is a small downward shadow. The modal shadow is broader and extends upward. They are two distinct definitions, not a numbered elevation scale.

Start with the surface

A different background or boundary may provide enough separation. Compare the same object with and without shadow before adding another visual layer.

Check both themes

A dark shadow becomes subtle on a dark background. Preserve the real token and assess the complete surface and boundary treatment instead of inventing a bright replacement.

Keep the exact definition close

These values come directly from the design-owned source. Aliases, expressions, theme selectors, and source files are retained.

Full shadows reference 2 definitions

Token	Source value	Selector	Source file
	`0 -10px 40px rgb(0 0 0 / 15%)`	`:root`	`packages/design-system/src/tokens/effects.css`
	`0 2px 8px rgb(0 0 0 / 10%)`	`:root`	`packages/design-system/src/tokens/effects.css`

Design-owned preview Version 0.2.0-preview.1 2 definitions

Build from the same decisions

Give an agent the guidance, source values, and working example together.

Agent handoff

Use the Cloaked shadows foundations.
Read https://design.cloaked.team/data/foundations/shadows.json first.
Use the exact token names, values, and theme selectors in this contract.
Check the shared foundation-shadows example and preserve its visual intent.
Verify keyboard access, both themes, responsive layout, and reduced-motion behavior where applicable.
Treat this design-owned version as an implementation preview, pending sign-off.

Shadows contract JSON Complete token source JSON Build with an agent Guide

Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1