Shadows & Blurs

#Shadows

Use boxShadow with a token name. The scale runs xs, sm, md, lg, xl, 2xl, plus inner for pressed or recessed surfaces.

import { css } from "@pindoba/styled-system/css";

<div className={css({ boxShadow: "md", borderRadius: "lg" })}>Raised card</div>;

Each tier follows two rules so shadows look smooth and match the border system:

• Tinted, never black. The tint is the darkest end of the gray ramp, the same cool-gray family the border.* tokens use. It is mixed with color-mix, so it follows the ramp when you re-theme.
• Layered. Every tier stacks two or three layers: a tight 1-3px contact layer that fuses with the 1px border, then ambient layers whose blur roughly doubles while staying low in opacity. Depth comes from accumulation, not one dense blob.

Shadows are semantic tokens: dark mode uses the same geometry at a much higher opacity, because a shadow tuned for a light surface vanishes on a dark one. You never write a _dark override.

#Blurs

The blurs tokens feed backdropBlur, filter blur and the translucent (trslct) utility.

trslct accepts none through xl only. It applies backdrop-filter: blur(<token>) saturate(150%) brightness(100%).

<nav
  className={css({ trslct: "md", backgroundColor: "neutral.surface.peak/60" })}
>
  Glass navigation
</nav>

Give a glass surface a translucent background (a color with alpha) so there is something to blur through.

#Try it

Compare every shadow on each surface, then pick a blur token to see it over a busy background.

#Best Practices

• Pick a shadow by how far the element floats: xs-sm resting, md-lg raised, xl-2xl overlays
• Do not add _dark shadow overrides; the tokens already flip
• Keep the reserved 1px border: shadows are tuned to fuse with it
• Use inner on pressed states rather than inventing an inset shadow