Shadows

PyColors UI keeps elevation subtle and purposeful. A single drop-shadow scale covers every surface — from compact buttons to floating panels — making depth predictable across light and dark themes.

Token scale

Token	Utility	Intent
`shadow-xs`	`shadow-xs`	Micro lift for buttons, pills, inputs
`shadow-sm`	`shadow-sm`	Default cards, dropdown triggers
`shadow-md`	`shadow-md`	Popovers, dropdown content, menus
`shadow-lg`	`shadow-lg`	Modals, floating panels, command palettes

Each step increases spread + blur by ~4px, keeping gradients soft and avoiding harsh halos. Use shadow-none for flat or secondary elements.

Visual examples

shadow-xs

Buttons, segmented controls, small interaction chips.

shadow-sm

Default cards or navigation tiles.

shadow-md

Popovers, dropdown menus, focused surfaces.

shadow-lg

Modals and floating panels that should feel layered.

export function ShadowsPreview() {
  const tokens = [
    { className: "shadow-xs", label: "Buttons, segmented controls" },
    { className: "shadow-sm", label: "Default cards, nav tiles" },
    { className: "shadow-md", label: "Popovers, dropdowns" },
    { className: "shadow-lg", label: "Modals, floating panels" },
  ];

  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {tokens.map((token) => (
        <div
          key={token.className}
          className={`rounded-lg border bg-card p-4 ${token.className}`}
        >
          <div className="text-xs font-medium text-muted-foreground mb-1">
            {token.className}
          </div>
          <div className="text-sm leading-relaxed">
            {token.label}
          </div>
        </div>
      ))}
    </div>
  );
}

Usage guidelines

Pair shadows with the matching radius token (rounded-md + shadow-sm, rounded-lg + shadow-md) for cohesive silhouettes.
Use only one shadow per surface. Stack depth with overlays, spacing, or borders — not multiple shadows.
Increase elevation only when interaction requires focus.
In dark mode, default tokens already reduce alpha to avoid glow — avoid overriding shadow colors.
Reset to shadow-none for inline or nested surfaces inside another elevated container.

Radius

Corner radius tokens paired with elevation.

Colors

Semantic color roles used by elevated surfaces.

Card

Primary surface component consuming shadow tokens.

Button

Subtle elevation for interactive controls.