Shadows

Surfaces lift with a hairline edge, not a border. Four steps cover everything from a card to a dialog.

Border--shadow-border

Raised--shadow-raised

Overlay--shadow-overlay

Dialog--shadow-dialog

Fig. 1 Four steps. Each begins with the same 0.5px edge; only the shadow beneath it grows.

Edges, not borders

Every step draws its own edge first: a 0.5px line that stays crisp on high-density screens. So an elevated surface needs no border and no ring. Add one anyway and you get two lines a pixel apart.

Do

The raised step alone: one clean edge, then a little depth.

Don’t

A border under the shadow’s edge reads as a double line and a heavier button.

Fig. 2 The same outline button, edged two ways.

Pick the step by its job

Choose by what the surface does, not by how much depth you want. Filled buttons and checked boxes stay flat: a shadow beside a solid fill reads as a halo.

Flat cards and swatches that need an edge--shadow-border

Resting cards, outline buttons, the selected segment--shadow-raised

Menus, popovers, selects, tooltips, toasts--shadow-overlay

Dialogs, sheets, drawers, the command palette--shadow-dialog

Fig. 3 Which surfaces use which step.

Build it

Apply a step with a shadow utility. Nothing else is needed for the edge:

elevation.tsx

The steps live in the theme, so every installed component follows when you change one.

styles/jzb-theme.css