Elevation

One rule: never pair a ring with a border

shadow-marketing-* is a shadow with a 1px hairline as its final layer, so the edge morphs into the shadow instead of sitting beside it. Adding a border or ring to the same element draws that edge twice and reads washed out.

<div className="shadow-marketing-lg rounded-2xl" />          {/* correct */}
<div className="shadow-marketing-lg rounded-2xl border" />   {/* the edge, twice */}

Use it for anything that floats: nav panels, dialogs, popovers, cards that lift on hover. A plain border with no shadow stays correct for flat dividers and cards-by-design. The bare shadow-* tokens are ringless on purpose, so reach for those only for edge-less decorative depth.

Scale

Adjusting the hairline

hairline-* sets only the ring colour, so it composes with any shadow and tailwind-merge never confuses the two:

<div className="shadow-marketing-md marketing-hairline-black/10" />

Same system, separate copy

This mirrors packages/ui/src/styles/shadow-ring.css, same ramp and same rule, but lives in packages/brand so brand surfaces do not depend on the product package. The brand copy is light only, because the marketing surface has no dark mode.

@import "@rogo-technologies/brand/styles";