shadow-ring

name	shadow-ring
description	ALWAYS ACTIVE. In this project an elevation shadow must never be paired with a `border` (or a separate `ring`). Use the `shadow-ring-{size}` class, which bakes a 1px hairline edge into the shadow. Triggers whenever adding, editing, or reviewing a box-shadow / elevated surface — cards, popovers, dialogs, dropdowns, menus, tooltips, sheets, hover cards, toasts.

Shadows never carry a border — use the shadow-ring class

This site ships shadows through shadow-ring.css (with the raw --smooth-shadow-* values coming from shadow-plugin via globals.css). Two families:

• shadow-{size} — a stacked, ringless shadow (mapped to --smooth-shadow-* in globals.css).
• shadow-ring-{size} — the same shadow with a 1px hairline ring baked in as the final layer, so the edge morphs into the shadow instead of sitting beside it.

Sizes for both: xs, sm, md, lg, xl, 2xl.

The rule

Any element that has an elevation shadow must get its edge from shadow-ring-{size} — never from a separate border or ring utility on the same element.

A border next to a shadow reads washed-out and greyed, and it doubles the edge. The baked hairline stays crisp and continuous with the shadow.

// ❌ Don't — border + shadow stack into a washed, doubled edge
<div className="rounded-xl border bg-surface shadow-md">…</div>
…