DEMO PLACEMENT — “add demo DataNode” → borderless, full-height, hover-fill

Three fixes from the last round: (1) no border in any state — the resting button is just the glyph; (2) the hover fill spans the full 22px height of the section header, not a short padded box; (3) the fill is a neutral darken of the grey header — never a tint; the old near-white #f0f6ff read as a bright white patch on the grey bar. Header bar is the real grey (#e5e7eb) with its inset top highlight, so the fill is judged against the true background. Dial the fill + shape, then copy the readout into the plan.

Dial it in — drives the live button & every state below

7px
3px
15px
9px
neutral-darken presets (light → strong):

Live — real 22px grey header, real hover / focus (interact with it)

Demo placement
demo-placement canvas

All states at a glance

Before → after

Demo placement

Before — visible border, short padded box, near-white #f0f6ff hover (hover it).

Demo placement

After — no border, full-height tinted fill on hover only (hover it).