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

Each step increases blur and spread incrementally (~4px) to preserve soft silhouettes and avoid harsh halos. Use shadow-none for flat or secondary elements.

Token definition

Shadow tokens are defined in global.css and mapped to Tailwind utilities through the PyColors design system theme layer.

Components never define custom box-shadow values — they consume semantic shadow tokens instead.

Visual examples

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 or focus requires it.
• 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.
• Avoid custom box-shadow values in components. If a new elevation is required, introduce a token.

Related guides