jsp-dsv0.1

Shadowsjsp

Four shadow steps and three roles. Product code picks a role – raised, overlay or modal – by what the surface is, never a step by how strong it looks.

Foundation
Source
tokens/semantic/shadow.json
Steps
4 primitives · 3 roles
  • Roles, not sizes

    shadow-raised, shadow-overlay and shadow-modal say what a surface is for.

  • Both modes

    The same shadows in light and dark; dark mode separates layers with lighter surfaces.

  • Tokens

    shadcn's shadow-xs … lg read the same primitives, so both tiers match.

Scale

xs
sm
md
lg

Tailwind’s default shadow scale, which shadcn/ui is drawn with. Each step is two layers: a tight contact shadow and a softer one below it.

Steps

The primitives. Pages never use these – use a role.

NameLayer 1Layer 2
shadow.xs
  • 0 1px 2px 0rgb(0 0 0 / 0.05)
–
shadow.sm
  • 0 1px 3px 0rgb(0 0 0 / 0.1)
  • 0 1px 2px -1pxrgb(0 0 0 / 0.1)
shadow.md
  • 0 4px 6px -1pxrgb(0 0 0 / 0.1)
  • 0 2px 4px -2pxrgb(0 0 0 / 0.1)
shadow.lg
  • 0 10px 15px -3pxrgb(0 0 0 / 0.1)
  • 0 4px 6px -4pxrgb(0 0 0 / 0.1)

Roles

What product code uses. Each points at one step, so a theme can change how deep a role is without touching a page.

shadow-raisedshadow.xs

Surfaces lifted just off the page: cards and panels. What shadcn's Card uses.

shadow-overlayshadow.md

Floating layers attached to a trigger: popovers, menus, tooltips.

shadow-modalshadow.lg

Layers above the whole page: dialogs, sheets and toasts.

Component

shadcn's Card, as installed: shadow-raised through the bridge.

Card
Sits just off the page.

Cards and panels use shadow-raised. Don’t add a deeper shadow to make one stand out – use layout and type.

shadow-raised → shadow.xs
  • 0 1px 2px 0rgb(0 0 0 / 0.05)
shadow.json
{
  "primitives": {
    "shadow": {
      "$type": "shadow",
      "xs": {
        "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        "$description": "shadcn shadow-xs (Tailwind's default). Cards, buttons, inputs."
      },
      "sm": {
        "$value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        "$description": "shadcn shadow-sm (Tailwind's default)."
      },
      "md": {
        "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
        "$description": "shadcn shadow-md (Tailwind's default). Popovers, menus, selects."
      },
      "lg": {
        "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
        "$description": "shadcn shadow-lg (Tailwind's default). Dialogs, sheets, toasts."
      }
    }
  },
  "semantic": {
    "shadow": {
      "$type": "shadow",
      "raised": {
        "$value": "{shadow.xs}",
        "$description": "Surfaces lifted just off the page: cards and panels. What shadcn's Card uses."
      },
      "overlay": {
        "$value": "{shadow.md}",
        "$description": "Floating layers attached to a trigger: popovers, menus, tooltips."
      },
      "modal": {
        "$value": "{shadow.lg}",
        "$description": "Layers above the whole page: dialogs, sheets and toasts."
      }
    }
  }
}