Shadows
The elevation shadow ramp, from a hairline edge to a deep lifted surface.
Shadow tokens convey elevation. They mirror Tailwind's default ramp, composed from soft black-alpha layers so surfaces lift cleanly off the warm canvas. Larger steps stack two layers for a more natural falloff.
2xs
xs
sm
md
lg
xl
2xl
| Token | box-shadow |
|---|---|
| 2xs | 0px 1px 0px 0px oklch(0% 0 0 / 0.05) |
| xs | 0px 1px 2px 0px oklch(0% 0 0 / 0.05) |
| sm | 0px 1px 3px 0px oklch(0% 0 0 / 0.1), 0px 1px 2px -1px oklch(0% 0 0 / 0.1) |
| md | 0px 4px 6px -1px oklch(0% 0 0 / 0.1), 0px 2px 4px -2px oklch(0% 0 0 / 0.1) |
| lg | 0px 10px 15px -3px oklch(0% 0 0 / 0.1), 0px 4px 6px -4px oklch(0% 0 0 / 0.1) |
| xl | 0px 20px 25px -5px oklch(0% 0 0 / 0.1), 0px 8px 10px -6px oklch(0% 0 0 / 0.1) |
| 2xl | 0px 25px 50px -12px oklch(0% 0 0 / 0.25) |